Component Based Editor Mode with InnerBlock Equivalent

Feature Requests / Improvements
1

With the upcoming release of components, I’d love to see this feature allow for a better editor mode within the Bricks Builder.

Imagine if a components could have insertion points that would allow for the addition of nested components from a pre-approved, limited list, or category, similar to Gutenberg’s InnerBlocks.

You could create components and a builder experience that are very flexible, with options restrictive enough to focus the editor on the content and maintain the overall style of the site.

2 Likes
2

Good open question.
I think that the first iteration of bricks “component” will be an improvement of current Bricks Element “Template”, with possibilities to create “slot” for content.
For example you can create a “Hero” component and expose these “slots” :

  • title
  • description
  • button text
  • button link

Then a non admin user can open the Bricks builder and update these slot without the complexity (and risk of breaking a site) of navigating through the structure panel and find the correct Bricks element (heading, button,…) and perform edit of content.

But this is only one implementation.

—-

You idea requires that the creator of the component define a whitelist of allowed inner Bricks element , and then define the CSS for every possible combination.
This is a good idea , and that CSS would be probably placed in the custom CSS of the root element instead if direct manipulation of bricks style controls.
This means that only sho can write CSS can create these advanced components , and I like it.
Bricks is developer-first, so it makes sense.

Great open question here.

3

In my experience defining the CSS for every possible combination doesn’t really come up if you focus on styling at the component level.

There are a few exceptions I’ve noticed when coding similar setups:

  1. When the user can control the background of an item, some content items may need an inverted style for contrast. CSS variables might be the answer here.

  2. The spacing between items needs to be defined, but often this can be done on a global level with consistent spacing.