[wp-trac] [WordPress Trac] #59879: Twenty Twenty Two - Pullquote block have difference in editor and frontend.

[WordPress Trac]

#59879: Twenty Twenty Two - Pullquote block have difference in editor and frontend.
------------------------------+------------------------------
 Reporter:  nidhidhandhukiya  |       Owner:  (none)
     Type:  defect (bug)      |      Status:  new
 Priority:  normal            |   Milestone:  Awaiting Review
Component:  Bootstrap/Load    |     Version:  6.4
 Severity:  critical          |  Resolution:
 Keywords:  has-patch         |     Focuses:  css
------------------------------+------------------------------
Changes (by nightnei):

 * component:  Bundled Theme => Bootstrap/Load
 * severity:  minor => critical


Comment:

 I am positive that this specific case is just **the tip of an iceberg**,
 and the issue is not CSS related, it's actually big core issue.


 **Consequences of the issue:**
 "Twenty Twenty two" theme has the opportunity to make CSS customization
 with the help of `theme.json` file. `core/pullquote` component by default
 has `border-width: 4px;`, but for this theme we override it with
 `theme.json`:
 {{{#!php
 "core/pullquote": {
         "border": {
                 "width": "1px 0"
         }
 },
 }}}

 But these changes in `theme.json` don't have any effect on the result - we
 still see the border width as 4px on a website.

 **Actual issue:**
 If we inspect the page we can notice that we have both `1px` and `4px`,
 but `1px` is located below the 4px (should be vise verse, to make the
 actual override):
 [[Image(https://cdn-std.droplr.net/files/acc_1259748/3D0XEZ)]]
 Also if we view source code we can notice that there are two `<style>`
 components which are rendered in the wrong order:
 [[Image(https://cdn-std.droplr.net/files/acc_1259748/ziWPg7)]]

 **Possible solutions:**
 1) Working solution - Default core styles should always be the first, to
 have opportunity to override them via theme.json
 https://core.trac.wordpress.org/attachment/ticket/59879/12345.diff
 2) But it would be better to flip custom and default styles at the
 beginning of handling them, instead of the end, as mentioned in the
 solution above. I tried to do it, but there are relative issues with it,
 take a look the another diff, maybe you could help with finishing it:
 https://core.trac.wordpress.org/attachment/ticket/59879/67890.diff

 **So in a nutshell, I think that we should change the order of rendering
 styles to avoid similar issues with other default CSS-styles of
 `pullquote` or other core components.**

 **And also, since theme.json is the modern way of writing styles for
 themes - we should definitely fix this core issue, instead of using
 workarounds via old way with `style.css`file, like proposed before:
 https://core.trac.wordpress.org/attachment/ticket/59879/59879.diff. **

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