Components: "Inner blocks" block breaks layout in admin panel when component selected

Not sure if this should be treated as a bug or as a feature request for improving components.

I’ve created a grid with info cards using a component to easily switch between different column counts. I’ve set up style options for 2 columns, 3 columns, and 4 columns, assigning a specific grid class to each.

However, since I can’t predict how many info cards will be needed in each specific location across the website, I’m using an Inner Block. This way, I can add or remove any card to fit the count required on a particular page or situation.
So my structure looks like this:
Screenshot 2023-10-26 at 18.00.38

And grid itself:

But the layout breaks in the admin panel whenever the component is selected and the “Inner Blocks” block is revealed.

The behavior is quite logical because the grid affects its direct child elements. However, when the component is selected, “Inner Blocks” suddenly becomes the only direct child in the grid and breaks original layout.

@Louis, while there might be another solution from your side to address this, but a simple fix would be to add:

.wp-block-cwicly-innerblocks {
    display: contents;

I’ve added this to my custom admin styles, but I hope this can be addressed in upcoming updates.

Hello @krievinshj,

Thanks for bringing this up.
I wanted to confirm that this is something that is on our to-do list for our Components fixes and features.

The logic behind Components being so readily available for customisation/modification also means we have to ensure that removing the inner blocks container doesn’t disturb that.

Thanks for sharing your temporary solution!