Component with multiple InnerBlocks only shows one InnerBlocks when modify mode is left

Description:

I create a Component with a header, body and footer div. I add an InnerBlocks to each of the div to allow the contet editor to insert variable content or other components.
grafik

The problem is, when I leave the modify mode only one InnerBlocks shows up and can be edited. Renaming them to different names does not change anything.
grafik

I really need this to work. When I reenter modify mode they are still there. Even after Saving and reloading the page in the editor. So they have to be somewhere :wink:

Use Case:
I have a card component with a header (this could contain an image but also a div or a simple image slider), a body (this could contain text but alo some other Component specialy designed, like a FeatureList in a Pricing table) and an optional footer (which could contain a button or some other component like category and reading/comments stats für articles)

The card can go into a card deck which is also a component with one InnerBlocks element. It has properties like column/row count and flow direction.

Environment info

  • WordPress version: 6.4.2
  • Cwicly Plugin version: 1.3.4.7

Any Feedback on this? Thank you! :pray:

Hello @jan,
I can confirm that there is something going on.

When saving multiple inner blocks, it seems that they are overwritten in some way by the first inner block.

My Gif XD (24)

Tested in the Cwicly Test Environment (1.4) with Firefox

Hello @jan,

Sorry for not responding to this sooner.

You can only ever have one InnerBlocks block within a Component as is the case in most libraries.

EDIT: we will add a restriction so that this happens. My apologies for the misunderstanding this might have caused.

Cheers,

1 Like

Oh, thank you @Louis,

good to know :sweat_smile:

1 Like

Hi @jan if this is a pagelayout, this might still be possible to some extent if you stack components with multiple styles.

I would recommend separating the header and footer to make editing easier.

Kind regards.

Hi @T-low, thanks for the tip. This is what I ended up with in the meantime. But unfortunately this makes the process of using the component more complex than necessary because the content editor needs to know what to add where and not combine it into other components. And depending on the complexity of the inner workings of the component there builds up a lot additional components just to get everything in its right place.
So my component that could work with two components with multiple InnerBlocks now needs

CardDeck (Component)
—> InnerBlocks
------> Card (Component)
---------> InnerBlocks
------------> CardHeader (Component)
---------------> InnerBlocks
------------------> Headline, Text, etc.
------------> CardMedia (Component)
---------------> InnerBlocks
------------------> Image, Slider, Icon, etc.
------------> CardContent (Component)
---------------> InnerBlocks
------------------> Paragraph, Text, etc.
------------> CardFooter (Component)
---------------> InnerBlocks
------------------> Button, Icon, Text, etc.

The main problems are

  • Unfolding all this hierarchy all the time to edit some part is really annoying
  • The content editor needs to know which of the many components need to be added where and in which order so the underlying styling doesn’t break.

If I could structure it like this it would be way cleaner and I could create the underlying HTML hierarchy as complex as necessary without having the content editor and multiple components that need to work together in mind:

CardDeck (Component)
—> InnerBlocks
------> Card (Component)
---------> InnerBlocks - CardHeader
------------> Headline, Text, etc.
---------> InnerBlocks - CardMedia
------------> Image, Slider, Icon, etc.
---------> InnerBlocks - CardContent
------------> Paragraph, Text, etc…
----------> InnerBlocks - CardFooter
------------> Button, Icon, Text, etc. Elements…

@Louis hope this will/can be added in the future…:four_leaf_clover:

This is definitely a reasonable feature request, perhaps change the post type to reflect that.

Depending on the technical feasibility it would certainly add a lot of flexibility as you say.

Hi @jan,

I try to reduce the layering of my components as much as possible.
I would prefer to layer the components deeper without opening each one, and that’s what this feature request is for: Component Advanced View/Edit Mode

This could solve the problem you mentioned here:

& don’t forget to vote :wink:

I don’t understand your second point, could you please explain it in more detail?

Cheers

Hey @T-low ,

I think the main problem is what I mean with “content editors”. I’m working in a bigger marketing team in a mid size company. There are people who explicitly only do the content management. I called them “content editors”. Maybe some other term would make it clearer. They have little to no knowledge about HTML/CSS/JS/etc.
So I try to build the components in a way that they can place them and the components automagically work and follow the design principles I aim for. They don’t need to know about this and the structure under the hood. But I want them to be able to add f.e. a Headline, Paragraph and Button component to a Card component that I built that keeps the design and layout correct. So I need to add an InnerBlocks element. My CSS under the hood will recognize the components added and layout them accordingly. If I would leave adding divs and classes to the content management people…it just won’t work. For this components are incredibly usefull and a game changer :wink:

So here is a simple example. When I have a simple div with flex and two other divs inside that do a simple two column flexbox layout it would be handy to add an InnerBlocks to both the inner divs.
But currently I need to add an InnerBlocks to the main div and create a Column component with an InnerBlocks and explain the content management people how to structure the component before they can edit the element. Over and over again.
This is a simple example. The Card / Card Deck example I explained earlier in this post shows how complex this can get from a usabilty point of view without adding real value to the functioning of the component and the work the content management person is primarily supposed to do.

Many of my other feature requests come from this point of view and those use cases.

I will move the topic over to the feature requests category. Thanx.

1 Like

Hey, @StrangeTech How do I move the topic? I can not edit it anymore?!

Done. :+1: (with some extra text to make this post 20+ characters)

1 Like