The latest major WordPress update saw the introduction of Gutenberg. Gutenberg is WordPress’ out of the box answer to drag-and-drop website builders like Weebly and Squarespace. Previously, WP users had to install plugins like Elementor or WPBakery to achieve this functionality. An educated guess says it will replace the need for plugins in the future, though at time of publishing it’s not quite there. I still recommend Elementor for more in-depth page design, though for your standard blog posts, Gutenberg works fine.
In any case, whether you use a page builder or not, it’s worth getting used to Gutenberg now. I have faith that Gutenberg will be robust enough to replace the plugins one day. Additionally, I hope that it will become a front-end editor for viewing your changes in real-time. In any case, I’m a big believer in getting comfortable with it now and saving yourself some grief later.
Side note: you can still install a plugin to take you back to the classic editor, but I really recommend trying to get used to Gutenberg!
Familiarise Yourself with Gutenberg
When you click on Add Post, you’ll find the new editor. Gutenberg will ask you to add a title and start writing your post. To the right, you’ll see a collapsible menu with all the options for editing your slug, adding a featured image and selecting categories. If you can’t see this menu, click on the cog in the top right to toggle it on and off.
Be sure to click through these and familiarise yourself with the options. Note you now have the ability to add an excerpt; something previously only available with certain themes and plugins.
At the top of this collapsible menu, there’s an option to flick to “Block”. Click on this and then click where it asks you to start writing. Now the Block menu will show you the options you have for this block. Where you're typing is called a Paragraph block; you can select your text size and colour and even add in extra custom CSS that will apply only to this block. If you hit enter while typing, the next paragraph will be in a new block. Hit Shift+Enter for a line break instead of a whole new paragraph.
When you're working in your Paragraph block, the rich text options box will hover above it. Can't see it? Just wiggle your mouse a little bit! If you click on the Paragraph symbol (the "P") a menu will dropdown giving you the option to transform the block to a different type. "Heading" is probably the most common one you'll use!
Changing the Block Type in Gutenberg
Hitting enter will keep adding more Paragraph blocks. You can change these blocks to other block types based on the content you’d like to include. Do this by clicking on the plus sign on the left, next to the block. Take a look through all the different block types you can add to your post and familiarise yourself with the options. This is the true beauty of Gutenberg; all these content types at your disposal, and not a single line of code to learn.
For the purposes of this exercise, let’s add an image block.
Upload an image or insert one from your media library. Once the image has loaded, the block menu to the right will transform with your new options. Here you can update your alt text and adjust your image size and dimensions. Click out of the block to finish with the image. You can always return to it and adjust these settings by clicking on the image again.
An exciting addition is the ability to add columns. Insert some columns into your post now. You can edit the number of columns by using the slider that appears in the right menu. You can start typing if you want columns of text, or click the plus buttons to change the block type. This is a useful block for aligning images side by side (as I've done below for my Pins!)
The other option for adding multiple images side-by-side is the Gallery block. I don't like using this option because it doesn't perform properly in mobile with my theme. As always, make sure you're always previewing your pages in mobile before publishing to make sure everything looks right.
To easily preview posts in "mobile" click Preview (next to Publish) and then Restore Down your browser window (the squares next to the 'X'). Drag the edges of the now smaller browser window so that it's as small as you can get it. This is what your page will look like when viewed on a mobile device.
Using Reusable Blocks
Do you have content you frequently use over and over again throughout your website? Perhaps it's your contact details, or a block of text with your favourite affiliate linked products. For me, it's the image at the bottom of my blog posts urging people to sign up to my newsletter!
Once you've got a Block exactly how you want it, complete with images and links (whatever you need), click on the three dots in the rich text hover box. Select "Add to Reusable Blocks", choose a memorable name for this Block and click Save. You can then add it as a Block like you have above: click the plus symbol, scroll down to find your Reusable content and click the one you need.
To make changes, click on the Reusable Block and click "Edit". Make any changes you need then click Save again. Any changes you make to your Reusable Blocks will populate wherever you've used that block across your site. Super handy for when you change your Twitter handle, or update a graphic! Note that this block will also be available to anyone else who edits your website, whether they're other Administrators or a content Editor. Perfect for consistency across big organisations or for an entrepreneur managing lots of freelancers.
Sign up for Laura's Letters
Editing and Arranging with Gutenberg
If you need to change the HTML of a block, click on the three vertical dots above the block and select “Edit as HTML”. Click on the dots again and click “Edit visually” to switch back. Gutenberg will tell you if there’s an issue with your coding, which is handy but not always accurate, I’ve found. In this case, it will give you an error “This block contains unexpected or invalid content”. You can either choose to Resolve or Convert to HTML. If you’re sure your HTML is correct, select Convert to HTML. This will cause the block to act like a HTML block instead of a Paragraph block (or whatever block it was), which may look strange in your back-end. Preview the post to confirm it acts correctly in the front-end.
Click on the up and down arrows to the left of the block to arrange your blocks in the preferred order. Between the arrows, there’s an icon with 6 dots which allows you to click and drag the blocks up and down (though I've found this to be a bit hit and miss).
To insert a new block in between two others, click on the plus symbols above and below each block and select the required block. You can also click on the three vertical dots again and select “Insert Before” or “Insert After” to add a new block in either direction.
When Your Document is Ready
Once your new post is ready, click back to the document menu on the right side. Click through each collapsible menu to make sure you’ve selected categories, tags and uploaded a featured image. Status and Visibility is where you can schedule your post for the future, or return it to a draft if needed. And then simply click Publish! Easy done.
Ready for a website that reflects who you truly are?
Gain clarity in your digital presence, be confident in your messaging and save time in your business, with website design that engages users and reflects who you truly are.
My Website Design package will give you a beautiful, functional website that allows you to feel confident in your brand and build a real connection with your audience.
There you have it. Whatever your feelings about Gutenberg, the new block editor is here to stay. Save yourself some trouble in the long run and take the time to familiarise yourself with it now!
What do you think of the new editor? Let me know!
Cheers,
Laura x
[RELATED] How to Use WordPress for Beginners
[RELATED] Essential Plugins for WordPress Beginners
[RELATED] How to Insert Headers and Footers in WordPress
Pin it for later!
