How to Test Your Theme for Gutenberg?

One way to know if your current theme is Gutenberg ready, is to test it in a safe environment. Once you cloned your live site or copied it to a staging area, you can use below process and see how a set of standard blocks display in your theme. You might be surprised, how little tweaks need to be made before you can start using Gutenberg on your site.

We created a bunch of Core-Blocks, and used the HTML/Code view to make the set available as a text file on Github. This way site owners and administrators can save considerable time.

In theory, Gutenberg blocks should render without any problems in current WordPress Themes. In below video, you see how the example blocks  render in the Twenty-Fifteen Theme without any modification on theme files or css.

View of Core-Blocks in Twenty-Fifteen

Before you test make sure you do these three things:

• Create a copy of your site or spin up a new WordPress site
• Install & activate the Theme to be tested
  
• Install the Gutenberg plugin 

How to place the Blocks into a post?

• Add a new Post
• Change to Code Editor
• Copy / Paste from this text file
• Go back to Visual Editor
• Safe as draft and preview it (Sometimes you have to actually publish the post)

You can follow along with this video 

Grab the preset Standard Blocks from our Gist on Github. The full list is on display on the following pages.

Happy Testing. If you have questions or suggestions feel free to comment or send me a note via email to birgit.pauli@nptechprojects.org

Update July 3, 2018 A couple of days after I finished this post, Rich Tabor published a plugin called Block Unit Tests for Gutenberg and it’s available in the WordPress Plugin Repository. Once installed and activate, it’ll create a “Block Unit Test” page will all possible common Gutenberg blocks available, too. Read more about this plugin also on the WPTavern 

Photo by Chau Cédric on Unsplash

Common Blocks / Formatting / Layout Elements / Widgets and Embeds

• Images (Single image, cover image, gallery 
• Pull Quote / Quote
• Verse
• Button
• Columns    Text (only) columns / Columns experimental
• Paragraph 
• Audio 
• Video
• Widgets
• Lists
• Table
  
• Embeds