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

Making WordPress.org noreply at wordpress.org
Thu Jul 28 14:21:36 UTC 2022

#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:

 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:

 And this is how it is shown now:

 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
 #!div style="font-size: 80%"
 Code highlighting:
   a:not(.wp-element-button) {
      color: inherit;
      text-decoration: solid underline var(--wp--preset--color--primary)
 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:
   .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

More information about the wp-meta mailing list