Skip to content

Add .has-inner-blocks selector to blocks with InnerBlocks (e.g. Group, Column, Cover) #38677

@Luehrsen

Description

@Luehrsen

What problem does this address?

With the reduction of DOM elements and the removal of the __inner-container div it is very hard to style blocks that hold an unstructured set of inner blocks.

As per definition: For me an "unstructured set of inner blocks" is every case, where InnerBlocks is used with a (nearly) unrestricted block inserter. Examples for these would be core/group, core/cover or core/column. A structured set of inner blocks would describe a use case like core/columns, where the contents of InnerBlocks are clearly defined and are not set with the block inserter.

In a classic and hybrid theme you would want to target these blocks and their unstructured set of inner blocks to apply styling, gaps and to influence alignment. (One example would be the stack, that is also used with the blockGap.)

You could solve this by addressing every block individually, but that would lead to a lot of duplication and redundancy in the stylesheet.

Although my personal usecase does not involve FSE (yet), the amount of duplication for default styles in the current twentytwentytwo-theme leads me to believe that having a common selector to apply default styling to would be beneficial in that case too.

Bildschirmfoto 2022-02-09 um 18 53 15

The proposed selector would act similar to selectors like .has-background-color and .has-color, as it describes the current state of a block.

What is your proposed solution?

Add the .has-inner-blocks CSS selector to every block that holds an unstructured set of <InnerBlock/> elements.

This could either be done by hand, or by surfacing an API that identifies blocks with InnerBlocks and applies that selector with a filter. If there is interest I could open a PR with a prototype.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Developer ExperienceIdeas about improving block and theme developer experience[Feature] Nested / Inner BlocksAnything related to the experience of nested/inner blocks inside a larger container, like Group or P[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions