Image CSS Not Working Properly with New Gutenberg Editor

[etorabi]

Hello. I have been using custom CSS to create a border around images, however with the latest updates to WordPress and the introduction of the Gutenberg Editor, this simple code does not seem to be working.

The CSS code I have is:

.image-frame {
border: 1px solid rgba(0,0,0,0.075);
padding: 5px;
}

In order to have an image show the frame, I have thus far simply assigned the class “image-frame” to the image. However, now, the frame is appearing as a narrow frame just above the image.

Can you please help me update the code to fix this? Thank you.

[mldarshana]

Hi There @etorabi

Thanks for writing in! As I have tested this on Gutenberg, could you please try following the workflow below and see if that helps.

First you need to add an image block to your page or post.

Then set a desired image for it.

Then you can assign your CSS class to the advanced section of the block

Finally, you can add your CSS rule into your X -> Theme Options -> CSS area and it should render as follows.

If you have done it in the same way and if you’re still having issues, probably your custom CSS added to your site causing the issue. In that case, you need remove all of your custom CSS rules and re-test your issue further.

If you’re still having issues, then you need to disable your 3rd party plugins as well to test for a plugin conflict. If the issue is resolved, then you can activate your plugins one by one to see which plugin causing the issue.

Also please make sure to clear all caches before testing. You can refer to the following resource if required (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you cannot isolate the issue, provide us with an example page/post URL to your site to investigate this issue further.

Thanks!