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

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