How to create reusable thing with two places where blocks go

[equitieslab]

I have a 2x1 grid with rounded corners and borders that I want to be able to reuse throughout the site, and I can’t seem to do it at all. I tried several things, and am hoping someone knows how to do it. What I tried:

1. Components with two innerBlocks. Although they looked perfect, and I could actually insert two innerBlocks items (one for each cell), it failed when inserting. I couldn’t modify both grid cells independently.
2. Components with one inner blocks, and the two child divs as the child of the innerblocks. This when inserted deleted both divs, rendering this sad.
3. Components with no inner blocks. The idea here was to just insert and then break apart each item after insertion. I lose the ability to mass-format them after the fact, but maybe that was just life. Unfortunately, when I break the component nature of the inserted component, so I can edit it independently, all formatting goes out the window.
4. Cloud library. When I tried this, it looked pretty in the cloud library. But when I inserted it, the second copy on any given page fails, with weird styling. Also there is this odd stylist object that gets inserted, that baffles me. I tried it both with attach global styles enabled and disabled, and in both cases it caused problems. One interesting symptom is that my global style (that does the CSS for the rounded corners, borders, etc, is replaced with .removed, even though it’s the same site as the cloud item was installed from.
5. fragments from the themer menu – these are just inserted as they are with weird formatting, and no ability to modify the results. Unless I’m doing it wrong, which seems all but certain.
6. Templates. Apparently, the templates say how the whole page is to be laid out, and nothing else.
7. Reusable block patterns from Wordpress. This worked, and showed up in the completion menu, which was definitely nice, but then you have to “detach” it if you want to add content in the two boxes, and again, it denies the ability to adjust the formatting of all the inserted grids after the fact. UPDATE: unsynced reusable blocks apparently cannot be inserted from a cwicly paragraph, even through one can be inserted from the wordpress paragraph block via /reusablepatternname.

Any ideas what I’m doing wrong?

    Thanks,

         Henry

[StrangeTech]

Hey @equitieslab,

I just noticed this was never answered and is a good question.

We have been attempting to do the same thing and here is the current status.

Components with multiple InnerBlocks are not supported:

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 the…

Creating a component that contains an InnerBlocks and also contains one or more nested components containing InnerBlocks has issues:

Pasting into Innerblocks acts as if you are in Modify mode even when you are not

Description: This has just started happening for us. Logged in as an admin with modify privileges or as a custom editor role without modify privileges, when pasting into an innerblocks within a component it adds the content to every instance even though we are not in modify mode. @Louis this is an urgent one for us as we have clients editing the site and it is supposed to be going live tomorrow morning. Step-by-step reproduction instructions: Open the Post Editor/Site Editor Create a compo…

We have been in communication with Louis about this and the fix may take some time to be added.

We are still actively exploring ways to do this. As soon as there is a working option, I will post an update.

[Louis]

@StrangeTech

Creating a component that contains an InnerBlocks and also contains one or more nested components containing InnerBlocks has issues:

I rather it be made clear that this isn’t an issue and that InnerBlocks behave as they were originally designed to function.
The possibility of having multiple Inner Blocks nested within nested Components (while being unique to that that entity) is something I’m exploring, but was not intended for V1.

[StrangeTech]

@Louis

I rather it be made clear that this isn’t an issue and that InnerBlocks behave as they were originally designed to function.

Absolutely, I am simply clarifying that for the purposes of being able to create a component that has multiple usable InnerBlocks, the current implementation doesn’t support it yet.

This is purely so that anyone else who is exploring this will save some time and will know what currently works and doesn’t work. This way we can all get to a working solution more quickly and without wasted effort.