If you’re trying to design WordPress theme (like I am), and need to see a ton of variations of Gutenberg blocks for styling, I’ve got some solutions for you.
Sample Content Post for Testing Gutenberg
by Mai Knoblovits – ArtisanThemes.io
This post contains a large section of code you can just paste into the code editor area of the WordPress block editor (the default is the visual editor – you click the three circles menu thing on the right to select the code editor).
At the end of the post there are a few examples of how these blocks look with one of Artisan Themes’ themes; inspiring!
What’s cool about doing this, is you get a first hand look at how simple the Gutenberg block syntax can be while you are copying and pasting all of the blocks over in the code editor view. This feels like something I could easily configure and update to my liking in the future, if necessary.
Block Unit Test for Gutenberg
Preparing WordPress themes for Gutenberg with the Block Unit Test – This article breaks down how to use this plugin – and it’s not hard. Simply…install and activate, and you’ll have a page with a whole variety of blocks and variations to look at and theme.
After installing this, I had some banners at the top of my admin page telling me that I could also Unit Test CoBlocks, a collection of blocks with more options than the regular WordPress blocks
Maybe a plugin like this, where we could easily create a page with almost every variation of every block plugin, could be cool. There’s a lot of them and I feel like that would be super convenient…at least for someone like me who cares to test that sort of thing…anyway
This plugin is easy to use. You can just search it right from your dashboard. Activate it. And it installs a page with blocks and variations. And get theming
Theme Unit Test Content Import
I first found out about this from a Lynda.com tutorial called “WordPress Content Blocks: Working With Themes.” by Morten Rand-Hendriksen. I get Lynda for free with my library card, and I just went to see if they had anything Gutenberg related, and this theming tutorial is EXACTLY what I needed.
To install all of these posts with blocks, You can just view the raw xml file here. Save it. Go to your wordpress backend and use the wordpress importer to import it (from your downloads folder or wherever you saved it to). and then go to your front page and start scrolling down. Amazingly useful!
This one is official, has great hints, and is, once again, easy to install. This is how they review themes at WordPress, and this is a great way to test your theme to that standard even if you aren’t submitting it to be in the theme repository.
A starting point.
2 goals for tonight – first goal is to get a nice and ready Gutenberg-first version of JointsWP themed up tonight – because it and the Foundation framework are probably the tools I’m most familiar with.
Second, I’ve been working in Figma on a style guide / jointswp wordpress theme designer for Gutenberg template (something like that). Once I get the base JointsWP and Gutenberg’s styles aligned, I can finalize that and hopefully start designing some sites.
When it comes to designing Gutenberg sites – Gutenberg basically gives you control of where the page or post content would go – what is represented by <?php the_content(); ?>.
So i have to design a header, a footer, siderbars, and anything that isn’t where the page or post content goes.
Bonus: Here is a Sketch file from Automattic with all of the Blocks in it – I was able to import it into Figma!
Soon, Gutenberg will work on those other parts too. This is definitely the future of WordPress.
Anyway, hopefully installing some of this starter block content is useful to you when buildling or styling Gutenberg sites.
Back to watching that Lynda.com tutorial and updating my starter theme.