Twenty Twenty Two - Pullquote block have difference in editor and frontend.

[nidhidhandhukiya]

Steps to reproduce :-

1. Activate Twenty Twenty two theme.
2. Take Pullquote block.
3. Now check the both the side editor and front-end.

You can able to see a difference in border.
I have attached video for better understanding.
Video URL :- ​https://share.cleanshot.com/ywqg9pb5f0kJ857RTGct

[nidhidhandhukiya]

#59878 was marked as a duplicate.

[adamwood]

This is being addressed in ​https://github.com/WordPress/wordpress-develop/pull/2944

[adamwood]

Previous comment was incorrect, that PR does not cover twenty twenty two.

[ivanottinger]

Apply border-width of 1px to the Pullquote block

[ivanottinger]

The proposed diff fixes the issue by matching the front-end Pullquote block border style to the same width as is already specified in the existing theme.json (1px).

[nightnei]

Default core styles should always be the first, to have opportunity to override them via theme.json

[nightnei]

This solution is much better, but we expect to have the first item as our custom styles in the code, so I am afraid to break something else if I make changes in the condition

[nightnei]

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:

"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):

Also if we view source code we can notice that there are two <style> components which are rendered in the wrong order:

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 (previous solution). 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.cssfile, like proposed before: https://core.trac.wordpress.org/attachment/ticket/59879/59879.diff.

A bit more additional information:
I also decided to check other core components, and the issue is reproducable only for some components, and some components works a bit another way, for example core/post-title - I added color: red; to the component (via node_modules), and also added color to theme.json as "color": { "text": "blue" }, and there is no such issue for this component, actually it totally works another way - we have only 1 <style> component and default styles for this component is rendered correctly - before custom (theme.json) styles:
.
So, one more thing for consideration - maybe there is a different build process or some approaches of storing/parsing/handling styles, maybe core/pullquote has an outdated environment and that's why works incorrectly. Here necessary more knowledge of WP-core and much more time to make the investigation. Maybe some of you know something about it and my investigation so far can help you to quickly fix the issue.