Twenty Twenty-Two: The Quote block border width is thicker on the front end than in the editor

[viralsampat]

I have reviewed the "Twenty Twenty-Two" theme and found that the "Quote" block left border is a little bit thin on the editor side as compared to the front-end side.

Here, I have attached screenshots:

Front-end: ​https://share.cleanshot.com/nrs9S26xD0lD5TtkFqFH

Back-end: ​https://share.cleanshot.com/R8FM4WlYgNFNp5rwQRDp

Thanks,

[viralsampat]

I have checked above mentioned issue and resolved it. Here, I have added my patch.

[sabernhardt]

Twenty Twenty-Two set the border width at 1px years ago, and it should stay that thickness in both the editor and the front end. Unfortunately, a Gutenberg change packaged with WordPress 6.3 rearranged the order of block styles so that the opinionated theme.scss styles print after styles from theme.json on the front end. (The editor still has the 1px border.) The sequence needs correcting to prevent problems in other themes too.

WordPress 6.2 with Twenty Twenty-Two 1.4

<style id='wp-block-quote-inline-css'>
 /* from block-library/src/quote/style.scss */
.wp-block-quote{
  box-sizing:border-box;
  overflow-wrap:break-word;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)),.wp-block-quote.is-style-large:where(:not(.is-style-plain)){
  margin-bottom:1em;
  padding:0 1em;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)) p,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p{
  font-size:1.5em;
  font-style:italic;
  line-height:1.6;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-large:where(:not(.is-style-plain)) footer,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer{
  font-size:1.125em;
  text-align:right;
}
 /* from block-library/src/quote/theme.scss */
.wp-block-quote{
  border-left:.25em solid;
  margin:0 0 1.75em;
  padding-left:1em;
}
.wp-block-quote cite,.wp-block-quote footer{
  color:currentColor;
  font-size:.8125em;
  font-style:normal;
  position:relative;
}
.wp-block-quote.has-text-align-right{
  border-left:none;
  border-right:.25em solid;
  padding-left:0;
  padding-right:1em;
}
.wp-block-quote.has-text-align-center{
  border:none;
  padding-left:0;
}
.wp-block-quote.is-large,.wp-block-quote.is-style-large,.wp-block-quote.is-style-plain{
  border:none;
}
 /* from Twenty Twenty-Two theme.json */
.wp-block-quote{border-width: 1px;}
</style>

WordPress 6.3 with Twenty Twenty-Two 1.9

<style id='wp-block-quote-inline-css'>
 /* from block-library/src/quote/style.scss */
.wp-block-quote{
  box-sizing:border-box;
  overflow-wrap:break-word;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)),.wp-block-quote.is-style-large:where(:not(.is-style-plain)){
  margin-bottom:1em;
  padding:0 1em;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)) p,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p{
  font-size:1.5em;
  font-style:italic;
  line-height:1.6;
}
.wp-block-quote.is-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-large:where(:not(.is-style-plain)) footer,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer{
  font-size:1.125em;
  text-align:right;
}
 /* from Twenty Twenty-Two theme.json */
.wp-block-quote{border-width: 1px;}
</style>
<style id='wp-block-quote-theme-inline-css'>
 /* from block-library/src/quote/theme.scss */
.wp-block-quote{
  border-left:.25em solid;
  margin:0 0 1.75em;
  padding-left:1em;
}
.wp-block-quote cite,.wp-block-quote footer{
  color:currentColor;
  font-size:.8125em;
  font-style:normal;
  position:relative;
}
.wp-block-quote.has-text-align-right{
  border-left:none;
  border-right:.25em solid;
  padding-left:0;
  padding-right:1em;
}
.wp-block-quote.has-text-align-center{
  border:none;
  padding-left:0;
}
.wp-block-quote.is-large,.wp-block-quote.is-style-large,.wp-block-quote.is-style-plain{
  border:none;
}
</style>

[poena]

@isabel_brison Hi! what is the loading order of the block styles, including the theme.scss, starting from WordPress version 6.5?

The summary in #60280 sais:

The order of loading should now be:

Block library styles
Base global styles (element styles, etc)
Block-specific global styles

Where in this order is the theme.scss?

[sabernhardt]

Apparently this has been fixed for 6.5. The border is 1px in the editor and on the front (with Beta 2).

<style id='wp-block-quote-inline-css'>
<style id='wp-block-quote-theme-inline-css'>
...
<style id='global-styles-inline-css'>

[sabernhardt]

1px border in editor

[sabernhardt]

1px border on the front in WordPress 6.5 Beta 2

[isabel_brison]

Yes, this was fixed by #60280!

Previously, the block-specific global styles were being added to <style id='wp-block-quote-inline-css'>, which comes before <style id='wp-block-quote-theme-inline-css'>, so the theme.scss styles were overriding the global styles.

After #60280, all global styles are added to <style id='global-styles-inline-css'>, which comes after both those tags, so the styles are no longer overridden.