How to Hide Alt Text Captions on Gutenberg Image Blocks

Earlier this week, I was optimizing a post with the new Gutenberg editor in WordPress, trying to improve the search engine optimization.

I added alt text to the image blocks. To my surprise, the alt text automatically appeared as a caption under the images:

This next image shows where I was entering the alt text. To be honest, I don't need the caption. All I need is the alt text to make my posts more accessible and more search engine optimized.

My solution was to add some custom CSS to our site. This CSS will hide many of the captions from your images:

.wp-block-image figcaption {
   display: none; 
}

Depending on your site's theme, you may also need to add !important; to make sure this CSS loads:

.wp-block-image figcaption {
   display: none !important;
}

I love using Gutenberg, but some some elements are confusing. We’ve written about adding GIF images, showing code in Gutenberg and re-arranging metaboxes. None of those tasks are particularly easy until you know the workarounds.

PS. If you do want more options for your image blocks in Gutenberg, check out the Advanced Gutenberg plugin. In addition to adding some really cool blocks, it allows you to show or hide blocks for some users.