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

Image block margin/gap is overridden in the backend [Gutenberg 14 RC2] #43618

Closed
slpy9 opened this issue Aug 25, 2022 · 5 comments · Fixed by #43813
Closed

Image block margin/gap is overridden in the backend [Gutenberg 14 RC2] #43618

slpy9 opened this issue Aug 25, 2022 · 5 comments · Fixed by #43813
Assignees
Labels
[Block] Image Affects the Image Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended

Comments

@slpy9
Copy link

slpy9 commented Aug 25, 2022

Description

Block gap is being overridden on the backend.

EDIT: I just corrected the order in which the styles are applied, sorry!

Backend styles:-

.editor-styles-wrapper .is-layout-constrained > * + * {
  margin-block-start: 80px; // <-- overridden
  margin-block-end: 0;
}
.editor-styles-wrapper .wp-block-image { 
  margin: 0 0 1em 0;
}

Frontend styles:-

body .is-layout-constrained > * + * {
  margin-block-start: 80px; // <-- working correctly
  margin-block-end: 0;
}
.wp-block-image {
  margin: 0 0 1em 0;
}

Step-by-step reproduction instructions

  1. Add a block
  2. Add an image beneath that block
  3. Check there is a top margin on the image block in the editor
  4. Check if the margin exists on the frontend

Screenshots, screen recording, code snippet

image

Environment info

  • WordPress 6.0.1, Gutenberg 14 RC2, Twenty Twenty-Two / Blank Theme
  • Chrome / Firefox
  • Desktop with Windows 10

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

@slpy9
Copy link
Author

slpy9 commented Aug 25, 2022

I just refreshed my memory a bit on selector specificity.. I believe the issue is that this .is-layout-constrained > * + * has the same specificity as .wp-block-image, and since the .wp-block-image rule is applied later in the document, it's overriding the block gap margins.

@talldan talldan added [Block] Image Affects the Image Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended labels Aug 30, 2022
@talldan
Copy link
Contributor

talldan commented Aug 30, 2022

Thanks for reporting this. I could reproduce it:
Screen Shot 2022-08-30 at 2 57 12 pm

@andrewserong mentioned that the margin is specified in the block.json of the image block:

"__experimentalStyle": {
"spacing": {
"margin": "0 0 1em 0"
}
}

@slpy9
Copy link
Author

slpy9 commented Aug 30, 2022

Hey thanks, I'm glad you found where it's coming from, I tried searching through the repository but gave up in frustration.

I think there are some other blocks affected by that style too.

@jasmussen
Copy link
Contributor

I shared some additional context in #41689 (comment).

@scruffian
Copy link
Contributor

Proposed fix here: #43792

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Image Affects the Image Block Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants