Subblocks in components

I was extremly excited about components (and still are ;). I’m working in a large company with a dedicated marketing team and multiple companies/websites in the group. What I am trying to achieve is to have components the content managers simply can drag & drop together in a hierarchy but with a very limited way of “destroying” things design wise :sweat_smile:. But I still need the possibilities on the development side to create them in a pixel perfect and individual way. Fortunately I found Cwicly to achieve that. Thank you so much for all the hard work and passion going into it!

Now, back to the request. In the context I just described componants are currently of limited use. Maybe I oversaw something. But basically right now they “just” encapsulate the HTML Structure and the Styling (which is great!) but don’t have a possibility for adding components as children in the hierarchy. This gives me a lot of headaches with many components I want to build for the Content Managers.

A simple example is a cards container that allows to add 1 or more cards with the posibilites to adjust the styling. Most of it is perfectly doable right now with components. But adding 1…n cards into the cards container is not. The workaround is to insert like 4 maximum cards in the component and use the visibility to activate 1…4. But than also the complete component properties of the possible cards need to be linked up into the cards container because they are not accessible in customize mode. So I could go into modify mode of the card container, but than I modify all instances of that conatiner which doesn’t make sense in this case.
Okay, with cards it would be managable somehow. You will have more than 3 or 4 cards in a row rarely.

But I have other similar cases. One more complex example would be this element:
Screenshot 2023-09-26 082557
I built this as a cwicly component (At least I tried to built it as a component). Each flag is a component with properties like Text but also Orientation and Position. Currently it is not possible to add them as descendants in the Container with the image. But this is important because position and size need to be relative to the image in the background.

Is there anything on the road map for adding decendant components this?

I would propose a special cwicly block called “component content” or “content placeholder” similiar to the cwicly “post content” block, which can be added inside the html hierarchy in the component (1 or more times) and will be visible in the hierarchy on the outside of the component in customise mode so that blocks or other components can be added in there:
Modify:
ComponentSubblocksModifyState

Customise:
ComponentSubblocksCustomiseState

Thanks for your time looking into it!
Jan

:joy: I just found the “Inner block” element which is exactly what I’m asking for.

It’s really funny, since days I’m scrolling through the docs and the live stream to find a solution and now that I write a feature request I see it by accident in the blocks in the editor. Crazy :partying_face: And GREAT :star_struck:

grafik

1 Like

Yup not in the docs jet.

For reference: https://youtu.be/YZrSP8uXlAE?t=5362

1 Like

Hi @jan,

Thank you for your kind words, the team and I appreciate it :slight_smile:

I was about to point this out! :laughing:
Glad you managed to find it.

As @T-low, pointed out, @Louis did demonstrate the use of Inner blocks.

Rest assured, the docs for Components are in progress and Inner blocks will be explained in greater detail as soon as possible.
Thank you for your patience.

1 Like

I watched the whole stream and still forgot about that point. Probably because it took a while until I came to that problem during my testing and building. Still…a little spookey :ghost:

I’m quiet new to WordPress and PageBuilders and from my testing of page builders Cwicly is the best solution because it is not opinionated and really gives me the raw control over the HTML / CSS in a visual editor. And with components I have full power and control for me as a developer without going into HTML/CSS files but can also create opinionated components constraining the content management and editors to the design guidlines and giving them an easy editing experience. I really hope you can keep that DNA for the experts who still like to have a visual way of editing. There are enough other opinionated solutions out there :pray:

1 Like