Social Icons Block hidden by AdBlockPlus Chrome Extension in the editor

[aurooba]

Description

If users have a ad blocker of some kind installed (in my case, AdBlocker Plus) it'll hide the Social Icons block if they have the preference Block social media icons tracking or similar activated (which is usually active by default). These extensions typically are looking for classes and element names that include social-links or social-icons etc.

Changing the class names would break styling and such for folks targeting this block, so I'm not sure what the easiest fix is here, but it took me a few minutes to realize what was causing the block to not appear in the Editor for me.

Step-by-step reproduction instructions

1. Use a browser with AdBlocker Plus installed
2. Ensure the Block social media icons tracking setting is turned on in AdBlocker Plus preferences
3. Open up the Block Editor and try to add a Social Icons block

Screenshots, screen recording, code snippet

Here's a little video where I add the Social Icons block, then turn off the social icons tracking preference, and come back and voila! It's there now! https://user-images.githubusercontent.com/6925260/151424784-427e168b-7776-4404-b848-1b37701988ec.mov

Environment info

• Gutenberg is not installed
• WordPress 5.9
• Theme: Twenty Twenty Two
• No plugins installed

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

Interesting 🤔. For those using an Ad Blocker, wouldn't this be the intended result though? The website is "advertising" social links 🤷‍♂️

I am at a loss how we would solve this internally. Changing the class names is likely a non-starter at this point.

[aurooba]

@ndiego Right, but most people wouldn't know that by choosing not to be tracked by social media icons, they can't even add any links to social media profiles through their editor. Changing class names would definitely be a non-starter, and I have no other ideas. But blocking this kind of tracking using the class method is fairly common, and it sucks that it affects the block inside the actual editor.

I'm not convinced that most people would realize their adblocker was causing this.

[ndiego]

I am not familiar with Ad Blockers, does it strip the content from the page, or just do something like display: none?

[aurooba]

Yep, in the case of AdBlock, it targets the following classes, which includes wp-block-social-links. I've been playing around with selector priority to bypass it specifically in the editor, but haven't found a winner yet. Will experiment more as time permits!

[SIlverPippin]

I am not familiar with Ad Blockers, does it strip the content from the page, or just do something like display: none?

With my site I get {display:none;} Would be nice to find a workaround, anyone an idea how-to?

[wanderingstarr]

Thank you for identifying this! I would have never guessed this was the problem. I'll work on it and reply if I find a solution. Thanks Again!