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

In 12.3.0, the blockGap for each block set in styles.blocks in theme.json is disabled. #37786

Closed
iidastudio opened this issue Jan 7, 2022 · 5 comments
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Question Questions about the design or development of the editor.

Comments

@iidastudio
Copy link

Description

In 12.3.0, the blockGap for each block set in styles.blocks in theme.json is disabled.In 12.2.0, if you set the blockGap for each block in styles.blocks in theme.json, the value will be reflected, but in 12.3.0, the blockGap set in styles.blocks will be ignored and the global blockGap set in default or styles will be reflected.

Even blocks without gap, such as post-date, will affect margin-top.

Step-by-step reproduction instructions

  1. set the blockGap to styles.blocks.core/navigation in the theme.json of twenty twenty two
  2. check the gap in navigation in both Gutenberg version 12.2.0 and 12.3.0
  3. check other blocks as well

Screenshots, screen recording, code snippet

The following is an example of a navigation block
This problem occurs not only in the navigation block, but also in various other blocks
blockGap
.

Environment info

WordPress: 5.8.2
Gutenberg: 12.3.0 <-> 12.2.0
Theme: TwentyTwentyTwo

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
Copy link
Contributor

carolinan commented Jan 9, 2022

Hi,
This change was made on purpose, as a "lesser of two evils", because no other solution was found:
#37360

@iidastudio
Copy link
Author

Thank you @carolinan
Am I understanding the following correctly?
・The global blockGap affects the margin-top between blocks.
・The blockGap in each block affects the gap or margin-left in the block and the margin-top between blocks.
In 12.3.0, it was disabled to eliminate this margin-top effect.

If I want to change the gap in the navigation, is it correct to put it in the css file?
Also, if I want to change the margin-top of post-date, etc., is it in a css file?

.wp-block-navigation__container,
.wp-block-navigation__responsive-container-content {
    gap: 4em;
}

div.wp-blcok-post-date {
    margin-top: 0.5em;
}

@carolinan
Copy link
Contributor

carolinan commented Jan 10, 2022

Yes, that is my understanding. But if you plan to continue to use the latest version of Gutenberg, using the CSS file will only be a temporary solution, since more changes will be made to different blocks.

@karmatosed karmatosed added Needs Testing Needs further testing to be confirmed. and removed Needs Testing Needs further testing to be confirmed. labels Jan 10, 2022
@annezazu annezazu added [Type] Question Questions about the design or development of the editor. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jan 10, 2022
@annezazu
Copy link
Contributor

Thanks so much for connecting the dots here, Carolina. Going to close this out as a result since this was an intentional decision.

@iidastudio
Copy link
Author

@carolinan
Thank you for your answer!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Question Questions about the design or development of the editor.
Projects
None yet
Development

No branches or pull requests

4 participants