Gravity Forms Breaks Wordfence Admin Menu Link

Hi @jetxpert, thanks for getting in touch and investigating this issue.

As Gravity Forms is a paid plugin, I don’t have a test site running it. However, if you would be happy to troubleshoot a little further, opening the inspector in the developer tools of your browser will allow you to see the styles applied to the logo/sidebar element for Wordfence.

Most likely Gravity Forms is loading an additional stylesheet with CSS that interferes with the layout for the Wordfence icon hence the lack of errors.

We should be able to identify the conflict from inspecting the styles in-use and either request a CSS update to prevent affecting it, or we could possibly add a more specific override from our side if it’s feasible to do so.

Thanks,

Peter.

Hi @wfpeter,

As always, thank you so much for your assistance.

Attached please find all screenshots associated with our inspection of your plugin’s logo/sidebar element. Each screenshot displays three sections (left, center, right)

In each screenshot (center section), you will also see a blue, highlighted line. That is the inspected line. The corresponding style is shown on the far-right section of the screenshot.

Hope this helps. A very strange phenomena indeed ??

Looking forward to hearing back from you and/or Dev Team.

Cheers!

———————————-

https://ibb.co/5TgRwnf
https://ibb.co/R283RcP
https://ibb.co/QKGBZTD
https://ibb.co/mSFSnYC
https://ibb.co/HVMBLHK
https://ibb.co/fxT8R2n
https://ibb.co/GphF66G
https://ibb.co/QcPFr0p
https://ibb.co/kK1X0bC
https://ibb.co/wSnpkq6
https://ibb.co/sRr7D1B
https://ibb.co/gTRY30K
https://ibb.co/7VBBTWv
https://ibb.co/mqhGp3W
https://ibb.co/NVHHbGj

@wfpeter,

Just though of it, we will also contact Gravity Forms’ Dev Ops to find out if they’re aware of this.

Since your plugin is free, they should be able to perform the same test.

Meanwhile, your evaluation of our above information (and possible solution) is appreciated.

Stay tuned.

Cheers!

Follow Up From Previous Post:

Here’s the Gravity Forms Community Topic we created to report this finding.

Cheers!

Hi @jetxpert, thanks for the extra information.

We’ve taken a look and it looks like the following styles are missing, which is why the icon is not displayed correctly:

#toplevel_page_Wordfence .wp-menu-image img {
    max-width: 16px;
    max-height: 16px;
}

These are included in wordfence/css/wf-adminbar.<build-number>.css, which looks like it could be not loading on that page.

This stylesheet is enqueued in the admin_enqueue_scripts hook if the current user is an admin. We don’t see any reason this shouldn’t be triggered here. This also enqueues wordfence/js/wfdashboard.<build-number>.js.

You could check in the “Sources” tab in developer tools and see if either of the scripts mentioned above are loading. It is possible this is a caching issue reading files from before Wordfence was installed for example, so purging/clearing caches and cache plugins could be worth a go.

Thanks again,

Peter.

@wfpeter,

Thanks for the info. Yes, the CSS code you provided is in our file and loading properly.

By the way, we discovered that by clicking on the SG Optimizer Admin menu link, the Wordfence icon is also affected. Click here for details. No other icon in our menu, beside the Gravity Form’s “Forms” link, affects Wordfence’s icon.

The good news is, we may have found the cause of the issue with your icon and SG Optimizer’s. Here’s what we did and what may be triggering the issue:

(1) We inspected both the Admin Menu WordPress and Plugin icons.

(2) All of WP’s icons (dashicons) did not present any issues. Examples:

WP Appearance Icon (Dashicon): https://ibb.co/Y25BpNt
WP Media Icon (Dashicon): https://ibb.co/6bcDR3v

(3) Plugins that use their own dashicons or use a Base64 coded SVG did not present any issues. The Base64 coded SVGs also had “!important;” added at the end to prevent re-scaling, etc of their image. Examples:

Analytify Icon: https://ibb.co/RvMqsh3
Gravity Forms Icon (Base64 SVG): https://ibb.co/D7LpDyD
MailPoet Icon (Custom Dashicon): https://ibb.co/9bkJRXw
Rank Math (Base64 SVG): https://ibb.co/rQLVbmT

(4) Only Wordfence’s and SG Optimizer’s icons are standard SVG images and did present issues as confirmed before. Also, we noticed that these are the only images that “re-scale” (i.e., resize or distort) automatically for no apparent reason. Specifically:

SG Optimizer Icon (Standard SVG): https://ibb.co/wgcz1Qm
Wordfence Icon (Standard SVG): https://ibb.co/JcXN2hf

In conclusion, we believe that if Wordfence creates its own dashicon or Base64 coded SVG, the issue will be fixed.

And in case you’re wondering, as part of our additional troubleshooting, we reinstalled WP 5.8, reverted back to a WP theme, cleared all cache, and ensured our .htaccess and wp-config.php files did not have a code that could affect your icon. The issue still continued.

Perhaps your Dev Ops Team can confirm our finding or trend and implement a new type of icon.

Hoping the above helps you a bit. Beyond this, we can’t think of anything else that would fix the issue.

Again, thank you.

Cheers!

Hi @jetxpert,

Your original screenshots (specifically https://ibb.co/GphF66G) show that the styles are not present, which is why the original issue where the icon was scaling up occurred. Also note that in the same screenshot, the other SVG icon for SG Optimizer is displayed correctly.

The mailpoet styles are actually overriding the intended max-width of the Wordfence icon (seen in https://ibb.co/JcXN2hf).

The difference in behavior is not due to being base-64 encoded, but that they are used as background images as rather than standard images. Also note that the CSS explicitly sets the size of the background image to 20px. There is not an issue with using an SVG image tag as opposed to a background image in this context.

The issue is still that either styles are missing, which definitely appears to be the case in the first round of screenshots, or are being overridden causing the sizes of the icons to change.

If you can show us a screenshot with the styles for the Wordfence icon img tag and the issue occurring, we can investigate further. If those styles are present there, you may have made changes since the original issue to try to get it working, which I appreciate may be the case with something such as this while it has been investigated.

Thanks,

Peter.

Hi @wfpeter,

First of all, can’t thank you enough for your patience and support on this. You rock.

Both of us have “bigger fish to fry,” so much appreciated.

If you can send us info requested below, it might help us troubleshoot the issue a bit faster:

(1) A screenshot of the “official” styling assigned to the img tag for the icon.

(2) In what Wordfence file(s) is the styling defined for the icon? We can extract those files from the plugin (repo) and override our existing, installed files with them.

I hope you don’t mind, but this might be faster.

Again, thank you!

Just wanted to pipe in to say we are also seeing this issue with Gravity Forms and WordFence.

I checked the wordfence/css/wf-adminbar.<build-number>.css file and the CSS you posted is in there, so it must be an issue of being overridden.

Hi @jetxpert, thanks for your patience also.

(1) Screenshot of styling: https://snipboard.io/nDMNHV.jpg

(2) The above styling for the icon is specified in wordfence/css/wf-adminbar.<build-number>.css and is shown (although cropped due to length) as the source in my screenshot.

Peter.

• This reply was modified 3 years, 2 months ago by wfpeter.

Hi @wfpeter,

Very helpful. Thank you. In response:

(1) Yes, that is the CSS Styling we get when the following plugins are not installed on our website: Gravity Forms, Mailpoet, and SG Optimizer.

Screenshot (No Other Plugins Installed): https://ibb.co/ncZJd8b

(2) When we install any of the above plugins, the Wordfence Menu Icon is distorted when we click on any of those plugin’s links in the WP Dashboard Menu.

Screenshot (Gravity Forms): https://ibb.co/YRLhMws
Screenshot (Mailpoet): https://ibb.co/G3Q30KK
Screenshot (SG Optimizer): https://ibb.co/MgcgTp4

If you haven’t already, can you kindly install both Mailpoet and SG Optimizer to confirm what we’re getting? After you install these plugins, just click on their main WP Dashboard link, then view/inspect Wordfence’s menu icon.

We could be wrong, but believe the key issue is between the above plugins (they are overriding Wordfences’s code) and the way Wordfence has set up their icon (via the SVG file and associated Base64 Code). If you can ask your developers to change the menu icon to a standard format (custom dashicon and gray color) like all other plugins that might fix the issue.

Hopefully, you can reproduce the issue. We tried everything (yes, everything) and could not find any condition other than reported above that could be causing this icon display issue.

Beyond this, if you can’t replicate the issue (apparently others like @a47danger can), we’ll just have to let this one go.

Thank you!

I have submitted this info to our development team to take a look into. Again, I cannot comment on the free forums any timescales that testing or possible changes will take but our channels for escalating requests such as these are always used.

I appreciate all the information given and investigation you have gone to in order to make the nature of the issue (and reproduction) clear.

Peter.