How to Show Code in Gutenberg Blocks
The Gutenberg editor delivered a lot of cool improvements for WordPress users. One of these is that it's now much easier to add code your WordPress posts.
I'm going to show you two ways to add code in Gutenberg. The first option allows you to add whole blocks of code. The second option allows you to highlight code inside paragraphs.
Option #1: The Code Block
The “Code” block is the simplest option. It is best used when you want to display a chunk of code together, separately from any other text on the page.
Option #2: Use tick characters
One way to quickly enter code is to type tick or backtick characters on either side of your code. This will provide a code display for you.
Option #3: The Paragraph Block
This option gives you a little more control. For example, you can highlight only some text in a paragraph and mark it as “code”.
First, add a new “Paragraph” block in Gutenberg:
Next, add a little text or code to your new block:
Select the code with your cursor:
Use the toolbar above your block and look for the small down arrow. Click “Code”.
You'll see that your code is now formatted with a grey background:
Publish your post and your code will appear with some basic formatting.
I was surprised to see this extra Code display option in Gutenberg, and I've been using Gutenberg for nearly a year now!
Finally, it's worth noting that it will help to have the unfiltered_html permission if you want to add code to WordPress.
Although Gutenberg is a step forward for WordPress, some features are definitely confusing. We’ve written about how to hide image captions, the problem of adding GIF images and rearranging metaboxes and hiding blocks. And don't forget that if you really don't enjoy using blocks, there are multiple ways you can turn off the Gutenberg editor.
Long-term, we're very positive about Gutenberg. I love some of the cool features in the core and in extra plugin such as the Advanced Gutenberg plugin. In addition to adding some really cool blocks, PublishPress Blocks allows you to show or hide blocks for some users.
We're also looking forward to cool new features such as collaborative editing that will arrive with Gutenberg Phase 3.
Get the PublishPress plugins
The Pro versions of PublishPress plugins are ready for Gutenberg. They packed with extra features to help you manage your content. Get a PublishPress membership today for full access:
