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.
1. Memorize keyboard shortcuts
Duplicate block
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)
Remove block
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)
2. Utilize Reusable Blocks
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...
3. Utilize Block Patterns
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.
4. Create blocks easier through ACF Blocks
Similar to block patterns where the native way to create them is to write code, there is a solution that lets you create Gutenberg blocks without heavy Javascript knowledge, one that mainly uses PHP - and this is ACF Blocks. It is a fairly new feature of the plugin Advanced Custom Fields for the Gutenberg editor, and has been an amazing solution to create custom blocks for site builds.
5. Use the Group block as a row
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 Group block.
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.
Conclusion
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!
Top comments (0)