Blocks that create nested areas

Developing with Concrete
1

I’ve been looking for a way to create design patterns that contain Areas (like Containers), but allow the site editor to choose behavioral or appearance settings.

For example, this Responsive Float web component would make a great block, but I’d like the floated object to be a block instead of just an image. An editor might want to float a video, or table of contents, or card, etc.

So, I built an “Auto Grid” block as a proof of concept — Github Repo. The readme there covers all of the details.

Check it out and let me know what you think!

1 Like
2

Also, here’s a quick video of the block in action:

1 Like
3

Thanks for this. I have always wondered why it’s not possible to change a layout once it’s created. There’s a ‘Layout design’ but that doesn’t allow you to change the number of columns. If you want to do that, you have to delete the layout and build another one. The containers are also not flexible enough so what you have built is really helpful. Thanks again for making this available to the community.

4

A related issue, swapping containers.

5

One problem when removing existing areas easily is that references to the blocks inside it remain in the database.
So remove one of the cells without deleting the blocks first and then add it again and the blocks will still be there.
That might create weird behavior in the long run.

6

These would be considered orphaned blocks right? So at least that new feature would help with this.

7

I’d love to be able to create user-configurable options for sub-area structures — the whole purpose of this block concept. But it really does seem like I’m coloring pretty far outside the lines in regards to the system design intent. Do you all agree?

It seems like the ability to add block-like settings to containers would be more in line with the system design intent, but it also seems like it would be a bigger task to implement. Blocks already have the necessary backend infrastructure. What do you think? Would block-like “container settings” be more appropriate?

8

Note: This block creates a unique handle for each area it creates. I’m not sure if this alleviates or exacerbates the issue you’re referring to!

9

I’m not really sure if it’s a real problem or not since I haven’t played around with it enough but could the ‘abandoned’ blocks be handled upon saving the block if/when a column is deleted? Perhaps ask if the person wants to save the blocks or delete them. I can see where an editor might want to keep those blocks around as they test out different layouts but at some point might want to delete them. Perhaps offer the ability to save those blocks to the clipboard upon saving the block. Just spit ballin’.

10

Looks like all of my posts that contain links were “flagged by the community” and hidden. Should I message a moderator? Anybody else know what to do? I couldn’t find any way to address this.

11

I have enabled your posts that were not duplicates.

12

Layouts and Containers are both a special kind of block that contain sub-areas. Using the same mechanisms for your sub-areas would likely be the most core-consistent way of progressing this idea.

For orphan blocks and zombie areas, there are many pitfalls discussed in GitHub issues.

13

That seems very encouraging to me. I imagine a block-like code structure:

application/
└─ themes/
    └─ your_theme/
        └─ elements/
            └─ containers/
                └─ fancy_container/
                    ├─ view.php         ← Renders the container markup and areas
                    ├─ controller.php   ← Handles settings logic (like a block controller)
                    ├─ db.xml           ← Defines fields for settings (e.g. spacing, bg color)
                    ├─ form.php         ← Edit UI for configuring container settings
                    ├─ icon.png         ← Optional: shown in the container picker
                    ├─ view.css         ← Optional: front-end styles
                    └─ view.js          ← Optional: front-end JavaScript (e.g. toggles, animation)

I did some spelunking through the Github issues and found “Container customizations #12276” which exactly describes what I’m looking for:

have a edit form to control some variables in the template and implement some logic

And I’m also encouraged to see that that issue has been added to the v10 milestones (though its current status is “On Hold”).

What can I do to help?