[wp-meta] [Making WordPress.org] #6424: Possible css conflicts in pattern preview of themes directory

[Making WordPress.org]

#6424: Possible css conflicts in pattern preview of themes directory
-----------------------------+--------------------
 Reporter:  wetah            |      Owner:  (none)
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:
Component:  Theme Directory  |   Keywords:
-----------------------------+--------------------
 Hi!

 I am one of the developers of the Tainá theme
 (https://wordpress.org/themes/taina/). While the patterns preview feature
 is awesome, we're facing some css conflicts that might be a bug in the
 themes directory. I have two examples in our "Paddingless Card" pattern:

 This is how it is supposed to be in the theme:
 [[Image(theme_pattern_ok.png)]]

 And this is how it is shown now:
 [[Image(theme_pattern_error.png)]]

 As you can see, there are two problems. First one is the button text
 color. In the themes repository, this is being caused by this line of
 code:
 {{{
 #!div style="font-size: 80%"
 Code highlighting:
   {{{#!css
   a:not(.wp-element-button) {
      color: inherit;
      text-decoration: solid underline var(--wp--preset--color--primary)
 2px;
   }
   }}}
 }}}
 Which does not seems to exist outside of the theme directory.

 Second one is the social icons that remain rounded. This is a rule that is
 winning over the theme rule, which is set in `theme.json` to have `border-
 radius: 0px;`. If you inspect the pattern preview page, you will see that
 the order in which the assets are enqueued makes the theme settings lose
 over the default:
 {{{
 #!div style="font-size: 80%"
 Code highlighting:
   {{{#!css
   .wp-block-social-link {
      border-radius: 9999px;
      ...
   }
   }}}
 }}}

 I am not 100% sure if this aren't issues that I could solve in the theme
 code, so forgive me if I'm wrong.

 Also, would this be a good moment to propose URL-friendly links directly
 to the pattern preview so we could show situations like this easily? :)

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/6424>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org