Featured Image block: applying styles globally resets the border changes in the editor

[annezazu]

Description

When using the apply globally feature with the featured image block, some style options are reset and not properly pushed globally. In particular, it seems border isn't properly moved over but there could be others. This was initially found as part of the FSE Outreach Program's twentieth call for testing:

When making changes to a block, e.g., Featured Image Block, and going to the block setting -> Advanced and choosing “Push changes to Global Styles,” the changes I applied (such as a border) are removed from the Site Editor, but it applied on the live Posts.

Step-by-step reproduction instructions

1. Open Appearance > Editor.
2. Click "Edit" to edit the home template.
3. Edit a featured image block and add various styling options, including duotone and border changes.
4. Notice that the duotone options stick around but that the border option is reset both in the editor and on the front end, despite showing as having changes to border in the Styles interface.

Screenshots, screen recording, code snippet

border.reset.mov

Meanwhile, in Styles, there are border changes listed for the post featured image that aren't appearing:

Environment info

• WP 6.2-beta1-55308
• Both with and without GB 15.1 installed
• TT3

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

[t-hamano]

This problem may not be limited to a particular block or a particular style.

I have tested it with a group block that has a lot of support. When applied to global styles, I see the following pattern:

• Style moves to the global style, block's style settings are reset, and block's style is maintained.

  • Font Appearance
  • Line Height
  • Letter Spacing
  • Text Decoration
  • Letter Case
  • Padding
  • Margin
  • Min Height

• The style moves to the global style, the block's style settings are reset, but the block's style disappears.

  • Border Color
  • Border Width
  • Border Radius

• The style moves to the global style, but the block's style remains set.

  • Text Color
  • Background Color
  • Font Family
  • Font Size

• Style doesn't move to the global style.

  • Block Spacing

588e594e2f25e888eb434fefe165303c.mp4

[t-hamano]

From what I have found, this issue is a bit complicated. I would like to use a group block as an example.

You apply a border width to one group block. At this time, the following inline style is applied to the block wrapper:

element.style {
	border-width: 10px;
}

Border isn't displayed unless the border-style property is explicitly set. The reason why border is displayed here is that the following common styles exist:

gutenberg/packages/block-library/src/common.scss

Lines 134 to 148 in bc7ac22

	html :where([style*="border-width"]) {
	border-style: solid;
	}
	html :where([style*="border-top-width"]) {
	border-top-style: solid;
	}
	html :where([style*="border-right-width"]) {
	border-right-style: solid;
	}
	html :where([style*="border-bottom-width"]) {
	border-bottom-style: solid;
	}
	html :where([style*="border-left-width"]) {
	border-left-style: solid;
	}

Now apply this style globally. The border style of the group block is moved to the global style and the following selector is generated:

.editor-styles-wrapper .wp-block-group {
	border-width: 10px;
}

However, since the group block no longer has the inline style, the common style (border-style: solid) no longer applies.

If you change the border width by even 1px in the global style, the following selector will be generated so that the border will appear again.

.editor-styles-wrapper .wp-block-group {
    border-top-style: solid;
    border-top-width: 11px;
    border-right-style: solid;
    border-right-width: 11px;
    border-bottom-style: solid;
    border-bottom-width: 11px;
    border-left-style: solid;
    border-left-width: 11px;
}

---

ccing @andrewserong @aaronrobertshaw To explore the best approach to fix this problem🙏

[aaronrobertshaw]

Thanks for investigating this issue @t-hamano 👍

The reason for the behaviour you noted, where changing the border in global styles resulted in a visible border, is due to some additional global styles logic to ensure a border-style found here.

The additional logic to set the border style and therefore generate the extra CSS rule was required because we otherwise don't have anything to select by e.g. the inline style.

Once I took a look at the Push to global styles code, I found a few other bugs. I've put together a PR that fixes those along with this issue: #51621

It fixes:

1. Pushing a default border style when only a border color or width has been selected
2. Pushing the border color correctly to Global Styles
3. Clearing the block's preset style attributes