"Hide the ads" setting adds a CSS rule that needs more specificity

[dbowman]

Expected behavior

CSS injected into wp_head should be specific enough so that it doesn't affect UI from other plugins or other parts of WP.

Current behavior

When "Hide the ads" checkbox is enabled, this selector is added to the CSS in wp_head:

.react-tabs__tab:last-child

That selector currently matches tabs rendered by other plugins unrelated to Yoast.

Possible solution

Add a tiny bit of specificity to this selector to narrow its focus to only hide elements on Yoast pages.

Context

Discovered this by noticing a tab rendered by the Metabox plugin was missing.

[senlin]

Hi Doug, thanks for your report.

Can you tell me (or show a screenshot) of which tab from the metabox plugin goes missing exactly?

I installed the Meta Box plugin (https://wordpress.org/plugins/meta-box/) which does not come with any admin screen or settings, so a little clarity would be appreciated.

[dbowman]

Sorry for my own lack of specificity. Meta Box has quite a few extensions available, many of them premium. Builder is one of them that allows you to visually construct new meta boxes without code, similar to how ACF operates. Meta Box just released v4 of Builder a few days ago, which was rebuilt entirely in React. Thus this newly found conflict.

When creating a new Custom Field with Builder, and adding a new field item, there are two tabs rendered across the top: General and Advanced. It's the Advanced tab (matching .react-tabs__tab:last-child) that gets hidden when "Hide the ads" is checked.

screenshot of a new Custom Field screen from Meta Box Builder with "hide the ads" checked:
https://www.dropbox.com/s/yze5x16aapnc5oh/Hide_the_ads_activated.png?dl=0

screenshot of same with it unchecked:
https://www.dropbox.com/s/zy414c91ippmzwg/Hide_the_ads_deactivated.png?dl=0

If you'd like to poke around a clean dev WP install with Yoast, Hide SEO Bloat, and Meta Box with all relevant extensions installed and activated (and in isolation), just let me know where to send login credentials privately.

[senlin]

Hi Doug, thanks for clarifying.
Yes please send the login details to the email address in my profile here, so I can have a look for myself. I have to admit that I know next to nothing about React, so the easiest option probably is to remove the .react-tabs__tab:last-child selector from the plugin. That would mean that the question mark of the Yoast SEO Help Center will show, and so be it I guess.
People can also switch to another SEO plugin of course :)

[senlin]

As per our correspondence, I will remove the .react-tabs__tab:last-child setting from the plugin in an upcoming version. Many thanks for making the site available to dabble around in!

[senlin]

new version released on wp.org
thanks for your help Doug!
closing issue