[Quote] Unable to change width of left border for both left and right alignments

[kjellr]

It's possible to set the width of the quote block's borer from within theme.json like so:

"core/quote": {
  "border": {
    "width": "0 0 0 1px"
  }
}

This works great when the block is in its default left alignment state. In the editor, this border disappears when you choose center or right alignment:

In the front-end though, the original, un-customized border is present for right alignment:

At a minimum, we should be sure to clear that from the front-end so that the appearance matches the editor. But a more complete solution would be to allow themes to customize the border width and then have that applied to the left when the text is aligned left, or to the right if the text is aligned left.

---

Tested with Gutenberg 12.1
Related: WordPress/twentytwentytwo#278

[kjellr]

If a theme specifies the width like this, it works correctly in the editor:

"core/quote": {
  "border": {
    "width": "1px"
  }
}

.... but the front-end is still incorrect:

[sabernhardt]

#59457 reduced the selector specificity with :where() in theme.scss, but the global styles also reduced specificity and Twenty Twenty-Two still has the thicker border for Quote blocks aligned right.

/* quote/theme.scss */
:where(.wp-block-quote).has-text-align-right {
  border-left: none;
  border-right: .25em solid;
  padding-left: 0;
  padding-right: 1em;
}
/* theme.json global styles with Twenty Twenty-Two */
:where(.wp-block-quote) {
  border-width: 1px;
}

The border width seems correct in left-to-right languages when the stylesheet has &:where(.has-text-align-right) too:

gutenberg/packages/block-library/src/quote/theme.scss

Line 13 in 39ae1d4

&.has-text-align-right {