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.
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.
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
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.
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
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:
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
I don’t understand your second point, could you please explain it in more detail?
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
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.
(with some extra text to make this post 20+ characters)