Quote block: Border added through theme.json removed on alternate styles

[ryelle]

In my custom theme, I've added a border to the quote block in theme.json. It works fine with the default style, but if "Plain" or "Large" is selected, it creates a difference between frontend & editor. The border exists in the editor, but disappears on the frontend. Since I intentionally added a border in theme.json, I expect it to be there on all quote styles.

This also happens if the quote has text alignment = center, but I noticed that after taking my screenshots :)

Snippet from theme.json

"core/quote": {
  "border": {
	"color": "var(--wp--preset--color--blue)",
	"style": "solid",
	"width": "0 2px"
  },
  "color": {
	"background": "var(--wp--preset--color--sky)",
	"text": "var(--wp--preset--color--navy)"
  },
  "spacing": {
	"padding": "var(--wp--custom--spacing--horizontal)"
  }
},

In the editor, the theme.json rendered styles win, but on the frontend, the quote block's theme.css styles win.

Editor	Frontend

Note that this is technically happening in Twenty Twenty-Two, but since the theme.json there only defines a width, the border: none means it's trying to render a 1px "none" border in the editor, so the editor & frontend appear to match.

Editor	Frontend

Might be related to #35740?

Screenshots from Gutenberg 12.2.0 on WP 5.9-beta4-52422.

[dashkevych]

The similar issue was posted here: #37198

[mrleemon]

I don't know if my bug is related to this, but I've added the following code to my theme theme.json file but in WP 6.0 RC3 it's completely ignored on frontend (no problems on backend):

"core/quote": {
    "color": {
        "background": "transparent",
        "text": "var(--theme-secondary-text-color)"
    },
    "border": {
        "width": "3px",
        "style": "solid",
        "color": "var(--theme-secondary-text-color)"
    },
    "spacing": {
        "margin": {
            "bottom": "1.6em"
        },
        "padding": {
            "top": "0",
            "right": "1.5em",
            "bottom": "0",
            "left": "1.5em"
        }
    },
    "typography": {
        "fontSize": "1rem",
        "fontFamily": "Georgia, \"Times New Roman\", \"Bitstream Charter\", Times, serif",
        "lineHeight": "1.4"
    }
},

[carolinan]

If am not sure what we can do except:

1. Removing the style (Which I do not recommend since there were issues after removing the large style)
2. Renaming the style to "No border" and enforce the style in the editor and front even if theme.json is used.
3. Deregister the style for any theme that styles the quote block
4. Encourage theme authors to deregister the style if they don't want it in their theme.

[carolinan]

There is a similar issue with the button block outline style option:
#35438
#42097