Block gap does not work for groups in classic themes #47386
Labels
[Block] Group
Affects the Group Block (and row, stack and grid variants)
CSS Styling
Related to editor and front end styles, CSS-specific issues.
Needs Dev
Ready for, and needs developer efforts
[Status] In Progress
Tracking issues with work in progress
[Type] Bug
An existing feature does not function as intended
Description
In https://core.trac.wordpress.org/changeset/55067 in preparation for WordPress 6.2, appearance-tools theme support was made available
With the theme support, but without theme.json, the block gap setting does not work with the group block, because the CSS is only applied to the inner container div, the
wp-block-group__inner-container
, not the inner blocks.Update February 3: This affects both classic themes and block themes with the above condition.
(The block spacing works with the row and stack variation as these do not have the inner container)
I do not know if there is an easy CSS fix for this.
I am thinking that the easiest solution maybe to revert the change in 55067 to include the appearance tools minus block gap,
but then users will not be able to take advantage of this feature for other blocks.
Block Gap Testing Instructions
Enable the appearance-tools theme support in your test theme.
In the block editor, add a group block with three paragraphs.
In the Dimensions panel in the block settings sidebar, set block spacing to seven.
Take note if the space between the paragraphs changes.
Save and view the space on the front.
Testing results:
In emptytheme (block theme), the block gap correctly increases the spacing.
CSS applied to paragraph one:
CSS applied to paragraph two:
CSS applied to paragraph three:
Twenty Twenty: The block gap does not work on the default group.
CSS applied to the inner container:
Paragraph one, Paragraph two, Paragraph three:
No wp-container-2 CSS is applied.
Twenty Twenty-One: The block gap does not work on the default group.
CSS applied to the inner container:
Paragraph one, Paragraph two, Paragraph three:
No wp-container-2 CSS is applied.
Twenty Sixteen ( tested for comparison )
CSS applied to the inner container:
Paragraph one, Paragraph two, Paragraph three:
No wp-container-1 CSS is applied.
Hello Elementor ( tested for comparison ): The block gap does not work on the default group.
CSS applied to the inner container:
Paragraph one, Paragraph two, Paragraph three:
No wp-container-1 CSS is applied.
Screenshots, screen recording, code snippet
No response
Environment info
WordPress 6.2 Alpha
Tested with and without Gutenberg current trunk.
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
The text was updated successfully, but these errors were encountered: