Wordpress came out with Gutenberg for awhile now, but a lot of people hasn't made the switch yet or are still transitioning from their old page builder mindset. I listed out five tips that would help anyone improve their Gutenberg workflow, and build a site faster with the already fast Gutenberg.
When building out pages it's more likely that you're duplicating certain blocks multiple times in order to convey information in your content - save time clicking and memorize this keyboard shortcut to improve your workflow.
Ctrl + Shift + D on Windows,
Cmd + Shift + D on macOS)
It's best to use the keyboard shortcut in order to retain your level in the Gutenberg tree when removing multiple blocks.
Alt + Shift + Z on Windows,
Control + Option + Z on macOS)
Gutenberg comes with the concept of reusable blocks - do you have a block that is re-used the same way on several pages on your site? It would be best to save this as a reusable block, that way it's easy to reuse this block across the site.
Take note that for one to be an effective reusable block, the block must have the same content throughout the whole site. A good example of an effective reusable block is a row containing a newsletter opt-in form that you can use multiple times across the site - and usually the content of such element doesn't change per page.
If the block changes per instance, it might be better to...
Block patterns serve the exact purpose you think it would - it is a predefined block layout ready to be inserted and modified.
Instead of writing code to create block patterns the native way, there currently exists a plugin that adds
Block Patterns to the Wordpress admin menu. View Block Pattern Builder on the Wordpress plugin repo.
A lot of people are underwhelmed by Gutenberg because it looks barebones compared to existing Wordpress page builder solutions - but I believe this is an advantage that focuses on just having the right elements or blocks, and minimizing bloat.
One big feature that was missing for me at first was the
Row element/block - contrary to a WPBakery, Divi, etc. build where a row is a must when creating layouts - hell, even Bootstrap requires using a
<div class="row"></div> to use its grid system.
I found a workaround for this - I now use the
Group core block as my row element in Gutenberg. Basically, all elements that would semantically be in a row, I would wrap in a
The main big benefit is being able to control all outer rows via CSS, using the selector
.entry-content > .wp-block-group. This is especially helpful when you need to adjust the spacing universally for all rows.
Gutenberg maybe confusing at first but with these tips, it helps get Gutenberg closer to the existing page builder solutions. Modern Wordpress is going to this direction, and adopting Gutenberg to your workflow will help you improve as a Wordpress developer. Hope these tips help, and please share your tips in the comment section below!