Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#60484 closed defect (bug) (fixed)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: 6.5 Priority: normal
Severity: normal Version: 6.3
Component: Editor Keywords:
Focuses: css Cc:

Description

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,

Attachments (3)

60484.patch (399 bytes) - added by viralsampat 3 months ago.
I have checked above mentioned issue and resolved it. Here, I have added my patch.
2022-quote-6.5b2-editor.png (16.7 KB) - added by sabernhardt 3 months ago.
1px border in editor
2022-quote-6.5b2-front.png (8.2 KB) - added by sabernhardt 3 months ago.
1px border on the front in WordPress 6.5 Beta 2

Download all attachments as: .zip

Change History (8)

@viralsampat
3 months ago

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

#1 @sabernhardt
3 months ago

  • Summary changed from Twenty Twenty-Two: The quote block border width is thin on the editor side as compared to the front end. to Twenty Twenty-Two: The Quote block border width is thicker on the front end than in the editor
  • Version changed from 6.4.3 to 6.3

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>

#2 @poena
3 months ago

@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?

#3 @sabernhardt
3 months ago

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'>
Last edited 3 months ago by sabernhardt (previous) (diff)

@sabernhardt
3 months ago

1px border in editor

@sabernhardt
3 months ago

1px border on the front in WordPress 6.5 Beta 2

#4 @sabernhardt
3 months ago

  • Component changed from Bundled Theme to Editor
  • Milestone changed from Awaiting Review to 6.5
  • Resolution set to fixed
  • Status changed from new to closed

#5 @isabel_brison
3 months ago

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.

Note: See TracTickets for help on using tickets.