Long-time bloggers (and really anyone) spent time figuring out how to make the old editor work. Or for more complicated post layouts, you installed a page builder such as Elementor, Divi, Beaver Builder, etc. With WordPress Gutenberg, you can build similar posts without an extra plugin!
WordPress Gutenberg is a big change with a bit of a learning curve. You may need to make a few adjustments to your blog post workflow to fit the new editor. It's also possible that you may not need to make as many adjustments as you think because of there'a few features that require a quick introduction. Once you know about them, they should be quick and easy to use.
Let's take a look at a few features that are not as obvious when you first start using Gutenberg.
Move your cursor between blocks (paragraphs) with your keyboard arrow
With the introduction of “blocks”, there seems to be a perception that they are little islands stacked on top of each other. For the most part, think about blocks really as paragraphs with little toolbars that show up when you move your mouse or click into a paragraph to “activate it”. The toolbar hides while your typing to limit distractions and give you a better view of the content you're writing, especially if you write your post directly in WordPress.
Use your keyboard shortcuts to format your text
For bloggers that also have a long history with Microsoft Word, Google Docs, and other text editors, you may also be very familiar with the keyboard shortcuts.
- Bold text with Control+B (or Command+B for Mac)
- Italicize text with Control+I (or Command+I for Mac)
- Copy and paste highlighted text with Control+C, Control+V (or Command+C, Command+V for Macs)
- Break long paragraphs with a “return/enter” key press.
- Or merge short paragraphs with a press of delete at the beginning of the second paragraph.
There are at least 3 ways to move around blocks
If you're writing directly into WordPress or working editing an existing post, you may need to reorder your paragraphs so a better content flow.
- Copy and paste the content
- Use the arrow handles that appear on the left of an active block
- Drag and drop blocks where you need them
Copy and paste the content from its original space to where you need it. This is useful when you need to move the text into an existing paragraph.
Use the arrow handles that appear on the left of an active block. When a block is active, aside from the mini toolbar, handle icons how up on the left. The little arrows let you shift that paragraph up or down one position.
Drag and drop blocks where you need them. In between little arrows is a six dot icon. Click on that icon with your mouse. While continuing to hold down your click, you can drag the entire block into position. Tip: While you're moving your mouse, keep it about halfway into the text area so that you see a blue line. That blue line tells you where the block will drop if you let go.
Add new images to your post with drag and drop
This tip was one I didn't catch originally when I started with Gutenberg until I saw a posting on the WordPress forums complaining about the extra clicks to add an image to a post.
There are two options to add a new image to your post:
- Create a new image block and select the image
- Drag and drop the image from your computer directly into the post.
Create a new image block and select the image
You can create a new block (return key or the plus icon), choose block type of image. Then make a selection from your media library or use the upload feature.
Note: If you're using an existing image, you should follow these steps. Or, consider creating a reusable block if it's an image you'll use in multiple posts.
Drag and drop the image from your computer
Find the new image you want to add in files on your computer. Click on it and drag it onto the text area of your post until you see that thick blue line. That tells you where it will drop.
By dragging-and-dropping the image, WordPress will upload the image to your blog and give you options to format the size and position. This will usually position the image in between existing paragraphs.
To add the image into a paragraph so that you have your text on the left or right with the image on the opposite side, simply drag-and-drop the image where you need it. Choose the alignment icon to move it to the right or left. By choosing a smaller image size, the text can flow next to the image.
Editing the post permalink is hidden
This is a big one for anyone that spends time optimizing content for search engines (SEO). To edit the post permalink, you need to first save the draft of your post, click on the post title and slug edit button shows up above the post title.
And two quick notes as of the writing of this post:
- Sometimes the post title is positioned under the top bar. A small bug hiccup. If this happens to you, save and exit the post.
- Avoid editing the permalink and then editing the post title again while still in draft. On a few occasions, I've seen then post title reset to the permalink. Once you publish the post, the slug is set so you don't have to worry about this potential hiccup. It only applies to drafts based on my experience
Over to you. What other tips have you found while working with Gutenberg?
Gutenberg is a big change for bloggers. If you worked with page builders, many of the same concepts will look familiar. Over time you'll see more block types as plugin developers start to create new features.
Not everything with Gutenberg is completely obvious a the first moment when using it.
Or what other changes are you having with Gutenberg?
And don't forget to pin this for later