[wp-trac] [WordPress Trac] #60484: Twenty Twenty-Two: The Quote block border width is thicker on the front end than in the editor (was: Twenty Twenty-Two: The quote block border width is thin on the editor side as compared to the front end.)

[WordPress Trac]

#60484: Twenty Twenty-Two: The Quote block border width is thicker on the front end
than in the editor
---------------------------+------------------------------
 Reporter:  viralsampat    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  6.3
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  css
---------------------------+------------------------------
Changes (by sabernhardt):

 * version:  6.4.3 => 6.3


Comment:

 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>
 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/60484#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform