Tired of remembering which page on your site is the one where you go to get a shortcode for what is a pretty complicated component? Does this actually stop you from editing your site? Is site editing too cumbersome and you have to offload this to someone else? If so then there is clearly a problem and most likely the problem lies not with yourself but with the content editing system itself. Let’s look at the WordPress Gutenberg system as a possible remedy.
Why Gutenberg?
Writing engaging content is time consuming. Getting the right tone and flow that keeps my audience entertained, engaged and informed takes a lot longer to achieve than it does for the reader to consume your work.
Your content is valuable and you want it to be as easy to read when it’s on the site as possible. How that content appears on screen is just as important. Since I’ve spent the time crafting this article, why let it down by allowing the visual aspect of my work to appear in a horrible format? Lacking headings and correct spacing, images where appropriate, maybe an interactive map to assist people in finding a specific location, are some of the elements that all too easily go wrong when crafting a post. With Gutenberg, however, these worries are a thing of the past.
Gutenberg & WordPress
Text layout and extra media additions are easy for me to handle as a web developer, but if everyone writing online needed an understanding of web code then the internet would be a dangerously dull inaccessible place. Luckily, content management systems like WordPress give techies and non-techies alike equal power when it comes to making their content visually ‘sing’. With the ability to add tools to edit layout and styling, components such as data feeds, videos, maps and more, the WordPress editing suite handles the complexities of working with the look, feel and functionality of your content in a nice neat way.
So what’s the benefit?
Everything became blocks, building blocks to be specific, which might sound cumbersome. But they actually help encapsulate associative input fields and settings that may be required to get content onto the screen. This is way nicer than having a large text editor and numerous separate plugin setting pages where you’d create a component, generate a shortcode and paste that into your editor and hope it looked fine on the post preview.
The gutenberg editor aims to look more like your actual site, giving you a better visual representation of your actual content. For example, you could use a Gutenberg block to add a Tik Tok feed by simply pasting a user’s handle into a text field which then loads up the actual feed in front of you. It then appears in the editing area, rather than the old way of pasting the shortcode into the text area which did nothing except look like the following:
| It’s become hugely popular on Tik Tok, which you can check out here: [tiktok-feed id=”2″] |
It’s safe to say, this will save you from the update and preview cycle that you’d otherwise be stuck in.
What about developers?
As for developers, Gutenberg basically allows us to offer up anything that could be deemed useful to content creators. You can deliver up low level atomic components such as titles or paragraphs but we can go way further and offer up an entire header section or contact details block. The content creator doesn’t have to remember where details are stored on the site. They can stay within the same screen using the same interface that is more aligned with the styling of their site.
How can I get Gutenberg on my WordPress site?
From WordPress 5 onwards, the default content editor got an upgrade and went from a tired looking WYSIWYG editor to the new Gutenberg block based system. So to get hold of Gutenberg you don’t have to do anything, Gutenberg is already baked into WordPress making it your default editor.
You’ll already have a standard set of blocks that include paragraphs, images, quotes and galleries. The full list of the standard blocks that are shipped as standard with WordPress can be found on the official website. Though, WP Beginner has a great starter guide: How to Use the New WordPress Block Editor (Gutenberg Tutorial).
New Gutenberg blocks, however, need to be added to your site via plugins. Two examples of plugins from reputable sources that do this are WooCommerce blocks and Genesis blocks. These simple installation blocks are some of the most helpful, and most used, for business.
I’m not ready for Gutenberg!
If your site was built before Gutenberg then there is a chance that it is not compatible and some functionality gets lost. If that is the case then it is worth installing the classic editor plugin, written by the WordPress team, that helps you switch back to the classic editor, hiding all the Gutenberg functionality. But if everything is working fine, then I highly recommend getting your hands dirty with this editing gem.
