Skip to content

Block gap does not work for groups in classic themes #47386

@carolinan

Description

@carolinan

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:

.wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

CSS applied to paragraph two:

.wp-block-group.wp-container-1.wp-block-group.wp-container-1 > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
	margin-block-end: 0;
}

CSS applied to paragraph three:

.wp-block-group.wp-container-1.wp-block-group.wp-container-1 > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
	margin-block-end: 0;
}

Twenty Twenty: The block gap does not work on the default group.
CSS applied to the inner container:

wp-block-group.wp-container-2 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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:

wp-block-group.wp-container-2 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

Paragraph one, Paragraph two, Paragraph three:
No wp-container-2 CSS is applied.

Twenty Sixteen ( tested for comparison )
CSS applied to the inner container:

wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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:

wp-block-group.wp-container-1 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

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

Metadata

Metadata

Labels

CSS StylingRelated to editor and front end styles, CSS-specific issues.Needs DevReady for, and needs developer efforts[Block] GroupAffects the Group Block (and row, stack and grid variants)[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions