Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
carolinan opened this issue Jan 24, 2023 · 0 comments · Fixed by #56130
Closed

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

carolinan opened this issue Jan 24, 2023 · 0 comments · Fixed by #56130
Assignees
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

Comments

@carolinan
Copy link
Contributor

carolinan commented Jan 24, 2023

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

@carolinan carolinan added [Block] Group Affects the Group Block (and row, stack and grid variants) [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. labels Jan 24, 2023
@carolinan carolinan changed the title Block gap does not work in classic group blocks Block gap does not work for groups in classic themes Jan 25, 2023
@carolinan carolinan added the Needs Dev Ready for, and needs developer efforts label Jan 26, 2023
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 26, 2023
@carolinan carolinan moved this to 🔎 Needs Review in WordPress 6.2 Editor Tasks Jan 26, 2023
@ndiego ndiego moved this from 🔎 Needs Review to 🏗️ In Progress in WordPress 6.2 Editor Tasks Jan 26, 2023
@carolinan carolinan moved this from 🏗️ In Progress to 🗣️ In discussion, needs decision in WordPress 6.2 Editor Tasks Feb 2, 2023
@ndiego ndiego moved this from 🗣️ In discussion, needs decision to 🦵 Punted to 6.3 in WordPress 6.2 Editor Tasks Feb 7, 2023
@ndiego ndiego moved this to ❓ Triage in WordPress 6.3.x Editor Tasks May 23, 2023
@ndiego ndiego moved this from ❓ Triage to 🏗️ In Progress in WordPress 6.3.x Editor Tasks May 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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
Projects
None yet
2 participants