Recently, WordPress released it’s new Gutenberg Editor. So far, I’m not impressed, and, judging by what I’ve seen on the interwebs, neither are many other bloggers.

I’ve noticed that some of the html tags that work in the classic editor do not play well with Gutenberg. One glaring example being the tags used to hide Pinterest images. I have found a remedy for that situation and am sharing it with you!

For those of you who are unfamiliar with editing CSS, this may seem a bit intimidating. In the long run, this will be easier than adding code to every image you wish to hide.

Trust me…if I can do it, so can you. Ready? Let’s go!

ADD YOUR HIDDEN PIN IMAGE

Add an image block. Click the “+” sign to add a new block.

Choose an “image” block

Upload or insert your Pinterest image into the image block.

On right side of the editor window, click on “Advanced” and, in the “Additional CSS Class” text box, type a unique name for the class.  The name isn’t important, just make sure it is something easy to remember. I’ve used “pinterest-hidden”.

**Save your post!

ADD CODE TO HIDE PIN IMAGE

Next, you’ll need to add a short bit of code in the customizer that will recognize the CSS class that you created.

It is important to note, that while most themes have the Additional CSS code section in the customizer, your theme may not.  If yours does not, check with your theme’s documentation to see if it is in another area of your dashboard.

Go to Appearance > Customize

Click on Additional CSS

When the Additional CSS box is open, add this code:

/* Hide Pinterest images with the pinterest-hidden class */
.pinterest-hidden {
display: none;
}

Click the Publish button

IMPORTANT NOTE: If you’ve named your CSS class something other than “pinterest-hidden”, you will need to replace “pinterest-hidden” that name in the code above, or it will not work. 

FYI: The first line of the code is just a note to help you remember why the code is there.  Anything between the /* and */ will be ignored.

Now, whenever you want to hide a Pinterest image using Gutenberg, you only need to add the Additional CSS Class “pinterest-hidden” (or whatever you’ve named your CSS class) to the image.  No other coding will be necessary.

Gutenberg is being updated all the time, but, as of this posting, this method worked for me. Only time will tell if or when things may change again.