WordPress.org
Get WordPress

Making WordPress.org

Opened 2 years ago

Closed 22 months ago

#6424 closed defect (bug) (wontfix)

Possible css conflicts in pattern preview of themes directory

Reported by: wetah's profile wetah Owned by:
Milestone: Priority: normal
Component: Theme Directory Keywords:
Cc:

Description

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:
Pattern preview, correct.

And this is how it is shown now:
Pattern preview, wrong.

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:

Code highlighting: 

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:

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


Attachments (2)

theme_pattern_ok.png​ (43.7 KB) - added by wetah 2 years ago.
Pattern preview, correct.
theme_pattern_error.png​ (42.2 KB) - added by wetah 2 years ago.
Pattern preview, wrong.

Download all attachments as: .zip

Change History (12)

@wetah
2 years ago

Pattern preview, correct.

@wetah
2 years ago

Pattern preview, wrong.

#1 @wetah
2 years ago

Uhm... turns out that the first problem may be a Gutenberg issue, apparently fixed in 13.8: ​https://github.com/WordPress/gutenberg/issues/42616

#2 follow-up: @dufresnesteven
2 years ago

Hi @wetah!

I think you're correct about the second issue. It appears to be fixed. Can you validate?

In terms of the first issue, this is where the theme preview differs slightly from the editor. The theme preview shows you what the pattern looks like active in the theme, not in the block editor. So the pattern previewing done in the theme directory is closer to the end-user experience. The 'circling' of the social media icons is done by Gutenberg and goes back a few years it appears:

​https://github.com/WordPress/gutenberg/blob/a175df35b1f16499e8dde403d153a38fb66568fd/packages/block-library/src/social-links/style.scss#L75

Based on my testing, if a user were to install your theme, add that pattern to a page and preview the page, they would be circled, as you see in the preview, and not as blocks as you see in the editor preview.

Are you seeing different behavior?

#3 in reply to: ↑ 2 ; follow-up: @wetah
2 years ago

Hey @dufresnesteven thanks for checking this out.
Replying to dufresnesteven:

I think you're correct about the second issue. It appears to be fixed. Can you validate?

Yeah its fixed! Good to see this :)

Replying to dufresnesteven:

Based on my testing, if a user were to install your theme, add that pattern to a page and preview the page, they would be circled, as you see in the preview, and not as blocks as you see in the editor preview.

Are you seeing different behavior?

Unfortunately yes, even in the published, theme-side I see everything square on my usage. The rounded CSS seems to win over my theme.json settings only in the Pattern Preview.

#4 in reply to: ↑ 3 @dufresnesteven
2 years ago

Unfortunately yes, even in the published, theme-side I see everything square on my usage. The rounded CSS seems to win over my theme.json settings only in the Pattern Preview.

Okay, thanks for confirming, I'll try to reproduce.

#5 @dufresnesteven
2 years ago

I am able to reproduce both scenarios.

The reason why the Pattern Preview styles are overriding your border-radius: 0 style is because that website (the preview is generated by a website) has the Gutenberg plugin specifically installed as a plugin. As a result, the Gutenberg styles are being queued after your inline CSS styles. Since this is a common scenario, I think it's probably better that you make sure your inline styles are always queued later or add !important to that declaration.

You can reproduce by doing the following:

  • Activate the theme in your environment
  • Add pattern to a page
  • Verify that the pattern looks correct on the page
  • Install the latest version of Gutenberg as a plugin
  • Verify that the pattern is now rounded on the page

#6 follow-up: @wetah
2 years ago

Uhmmm you got it @dufresnesteven!

I wonder if this is not the case of:

  • Opening an issue in the Gutenberg repo;
  • Discussing if the website should use the default WordPress Gutenberg instead of the plugin;

I would go by the second one because in the end, theme previews should look like what most end users will have.

Sadly, the !important is not a good alternative for me because my border-radius is coming from a theme.json setting instead of a .css file.

#7 in reply to: ↑ 6 ; follow-up: @dufresnesteven
2 years ago

I would go by the second one because in the end, theme previews should look like what most end users will have.

I don't know that this is necessarily the case although I currently have no stats to substantiate this either way.

Sadly, the !important is not a good alternative for me because my border-radius is coming from a theme.json setting instead of a .css file.

I'm pretty sure that you can add !important to property values in your theme.json. Give it a try!

#8 in reply to: ↑ 7 @wetah
2 years ago

I'm pretty sure that you can add !important to property values in your theme.json. Give it a try!

Uhmm, you are correct, that is possible. I don't think it is the best alternative considering that one day we might have controls to set this via block settings, so the !important would win priority over the user settings. But in terms of our theme, it does solve the issue. :)

#9 @dufresnesteven
2 years ago

There would be ways around that, but I understand what you mean. It definitely is not ideal.

In terms of switching off the Gutenberg plugin, I can inquire about that (I wasn't around to set this up), but in the end, there are 300,000+ active Gutenberg installations, which means that there's a fair chance others will run into this with your theme as well. For consistency, it may make sense for you to figure out a solution either with how your theme applies styles or how Gutenberg does it. Modifying the pattern preview environment is probably just a band-aid solution.

#10 @dufresnesteven
22 months ago

  • Resolution set to wontfix
  • Status changed from new to closed

Closing as WP.org won't be making any changes here.

Note: See TracTickets for help on using tickets.