What problem does this address?
There currently isn't a way to easily share the styles of an inner block with other blocks of the same kind. For example, if you have an Accordion block, you likely want all Accordion Heading inner blocks to be styled the same, with the same color, typography, and border settings. At the moment, you have to manually style each block individually. This is tedious and error-prone: adding a new item to an Accordion means re-applying all the same styles by hand, and it's easy for items to get out of sync.
The same problem affects Tabs (tab labels, tab panels), Navigation (submenu items), and any other block pattern where sibling inner blocks should look uniform.
Navigation currently has a one-off custom implementation for styling navigation links and submenu items, but it's tightly coupled to that block and isn't reusable by others.
What is your proposed solution?
Add an option to sync the styles between inner blocks of the same kind, scoped to the parent block. This could likely be achieved through a new block support API that a block can opt into.
This is similar to #73933 and #72579, and I'm hopeful we can come up with a solution that addresses both of these. It would be great if this solution could also replace the Navigation's custom implementation.
Based on the above, ideally we could use this solution on the inner blocks of:
- Accordion
- Tabs
- Navigation
And potentially:
- Buttons
- Social Links
- Form inner elements
- Query and Comments pagination
- Columns
But also allow any parent block to opt in where appropriate.
What problem does this address?
There currently isn't a way to easily share the styles of an inner block with other blocks of the same kind. For example, if you have an Accordion block, you likely want all Accordion Heading inner blocks to be styled the same, with the same color, typography, and border settings. At the moment, you have to manually style each block individually. This is tedious and error-prone: adding a new item to an Accordion means re-applying all the same styles by hand, and it's easy for items to get out of sync.
The same problem affects Tabs (tab labels, tab panels), Navigation (submenu items), and any other block pattern where sibling inner blocks should look uniform.
Navigation currently has a one-off custom implementation for styling navigation links and submenu items, but it's tightly coupled to that block and isn't reusable by others.
What is your proposed solution?
Add an option to sync the styles between inner blocks of the same kind, scoped to the parent block. This could likely be achieved through a new block support API that a block can opt into.
This is similar to #73933 and #72579, and I'm hopeful we can come up with a solution that addresses both of these. It would be great if this solution could also replace the Navigation's custom implementation.
Based on the above, ideally we could use this solution on the inner blocks of:
And potentially:
But also allow any parent block to opt in where appropriate.