Yay! After configuring some basic WordPress settings and giving Zip an email address, Gravatar, updating his user profile, and discussing the difference between a page and a post, we’re finally getting around to letting Zip write his first post! Right now, Zip finds that there’s already a default post called “Hello World.” He decides he can just leave that there. Heck no! That’s the epitome of slothery and Zip should either delete that post and write a new one or edit what’s there. We’re just going to delete it, so we can start fresh and take a tour through how to use the WordPress Gutenberg block editor to write a post. Note that this is pretty much the same for a page except for some of the differences noted in this post.
A word of warning: This post was written prior to WordPress 5.5. I’ve entered in updates with most changes to the block editor, but you’ll find the organization of blocks a bit different. All of the same blocks are present. However, now, instead of categories such as “Common Blocks,” etc., you’ll find that you can click “Browse all,” when adding a new block and a panel will open on the left. Then, the blocks are organized into the categories of “Text, Media, Design, Widgets, and Embeds (plus sections for whichever plugins have added blocks.) For reusable blocks, you’ll find a separate tab.
What should Zip write about in this first post? Right now, he aims to get a post written and introduce his new website, while my goal is to introduce the block editor, not to go into post topics. Still, it might be worth it, as he’s launching his blog, to consider what it’s going to be about instead of just “a blog about sloths for sloth-loving humans.” What is he going to include?
Zip decides that the Slothverse can include all things sloth. He envisions: writing reviews of books about sloths (after all, he’s an expert), gossiping about appearances of sloths in the media, educating the public on sloth-related facts, promoting awesome sloth products, and, maybe just maybe, including an online shop and selling a few of his creations. But he’ll need to learn how to produce a product first, which can be difficult with three tightly-gripping toes. And he’ll need to overcome inertia, which can be even more difficult. He envisions himself writing opinion pieces and ranting about his belief that sloth should be removed
d from the list of deadly sins. Either move to a list of six or replace it with something else!
Navigating this Dreadfully Long but Chock-Full-O Information Post
This post is long. So here’s a list of links so you can jump to the part of the post that you want.
I’m not going to list every one here. These blocks embed everything from Animoto to YouTube.
Gutenberg: Or How I Learned to Stopped Worrying and Love the Block Editor
The name “Gutenberg” seemed to imply that the new WordPress post editor was the greatest thing since Gutenberg invented his press around 1440. While it didn’t entirely cause a revolution in the written word that the printing press did, the release of 5.0 with its new “Gutenberg” editor did mark a significant change to how we wrote and edited posts in WordPress.
Before WordPress 5.0, the WordPress editor consisted of an open field with a toolbar with some editing buttons at the top. You could edit visually or edit the HTML from the text tab.
Gutenberg, however, features a “block” editor — you add content to your post or page via blocks of different types: heading blocks, paragraph blocks, image blocks. There are blocks for columns if you want to format, gallery blocks. It turned the WordPress editor into a pagebuilder, essentially.
As with anything, change doesn’t always come easy. Not everyone liked this new editor. I was not too fond of it! It felt less like a word processor and more like, well, what I just said — a pagebuilder. Some avid WordPress users decried it as an attempt to appeal to non-techies. But is that necessarily a bad thing? Those criticisms seemed, to me, akin to some elitist diehard MMO gamers complaining about their favorite game world being “dumbed-down” for “noobs.” Isn’t accessibility a good thing?
But I finally tiptoed into using the block editor and found that I liked it once I truly gave it a chance. I’ve finally disabled my classic editor plugin.
How to Write a Post in the WordPress Gutenberg Block Editor
Wait! Should you compose your post directly in WordPress?
As with most things, that’s an individual decision.
When I write blog posts, my process depends on what I’m writing (and, sometimes, my mood.) Here’s what I do, for what it’s worth:
- “How-to” type posts like this one that include lots of headings (great for SEO) and images I tend to write directly in WordPress and write and revise as I go.
WordPress will auto-save, but I don’t always trust that, so I make sure I save my draft frequently if I’m composing a post directly in the WordPress editor.
As I’ll say again later in this post, it’s helpful to outline and plan out your post structure before you start to write.
- Essays, however, are a different matter. I’ve found that I find being in WordPress distracting if I’m trying to write an essay. I tend to make some handwritten notes for those and then do much of my composing in Word with my web browser closed unless I need to access the internet for research. I also like Scrivener as a tool. 1
I can then copy and paste the text into WordPress, and then add images and revise as appropriate.
For this tutorial, Zip will be writing his post right in WordPress.
Quick Reference for the Components of the block editor (except the blocks)
These images are a “quick guide” to various areas in the post editor. Clicking on a highlighted area will open up more information about it underneath the image
You need to define some clickable areas for your image.
You need to define some clickable areas for your image.
Add a New Post (Or Edit an Existing One)
In the WordPress admin, if you go to Posts< All Posts, you’ll end up on the screen in the picture above.
Hover over the post title (Hello World! in this case), and you’ll see some links. If you want to edit this post, click “edit” to open the editor for that post. However, we’re going to start over with an entirely new post, so we’re clicking “trash” to delete this post.
Then click Add New to add a new post and open the post editor.
Let’s Write a Post in the WordPress Block Editor
When you first open the block editor (and sometimes, it seems, after that), you’ll see a little tutorial popup. After you close that, you’ll see a screen much like the image above. The styling may be a bit different, depending on your theme, and various plugins may add their own areas to the WordPress editor.
The free version of Yoast SEO came preinstalled on Slothverse.com when Zip auto-installed WordPress, so you’ll notice some areas that plugin has added. We’ll be coming back to Yoast another time, so, for now, we’re going to ignore it.
Add a Title
Right at the top of the page, you’ll see the Add Title Area.
Since this is just a welcome post, Zip just writes a welcome title here.
But what’s the best way to title a post? I often don’t follow my own best advice because I love long, fancy titles. The best title for a blog post is usually the short and descriptive one, but I often don’t follow my best advice here.
Fortunately, if you’re using an SEO plugin like Yoast, you can give that post a different title in the search engines than the main title for your post.
Saving Your Post
Before we go over anything else let’s cover something important: saving your post.
At the top of the editor, you’ll see a link to “Save Draft.” WordPress will autosave your post occasionally, just in case anything goes awry so you might be able to rescue it. However, you must save your draft before you quit. It also doesn’t hurt to occasionally press this button as you go, just in case.
Since we’re here, let’s go over the other buttons in this area: Preview will open up a new tab so you can see how your post will look on the front end of your website.
And, of course, Publish. I love to hit Publish. But make sure that post is ready before you do so. I keep the double-check option enabled so I have to confirm a second time that I want to publish.
After you’ve published your post, this button will change to Update and will be what you use to save any changes to your live post.
The Settings Panel: Document Settings
Before we get to block and composing, we need to talk about that panel on the right.
If you don’t want to see it, you can close it by clicking the gear symbol that’s by the Publish button. But this panel is VERY important.
At top, you’ll notice two tabs: Document and Block.
The Document tab configures settings for your entire post, while the Block tab has settings for whatever block you have selected at the moment. The settings you’ll find in the Block tab differ between types of blocks, and we’ll get to them later when we go over blocks.
Let’s go over the basic Document settings right now.
Status and Visibility
This section allows you to confgure:
- Post Visibility: The default here is public — everyone can view it. But you can set it to either private, which will only be visible to admins and editors or password-protected. Zip, for now, is keeping his post public, but it’s good to know he can enable a super-secret password if he only wants to share a post with Practical Possum and not with Grumpy Gopher.
- Publish: You can set your post to publish right away when you hit “Publish,” or you can schedule it to go live at a later time by clicking the link here and then using the mini calendar, choosing a future date. If Zip writes a bunch of posts but then only wants one to publish every Tuesday, for instance, this can be very handy.
- Stick to the top of the blog: Check this for that post you want everyone to see, for whatever reason. By default, posts in WordPress appear in reverse chronological order — newest ones on top. However, if Zip wants everyone to see his Welcome post first, he could check this option.
- Pending review: If you have multiple authors (or if you want to mark it this way for yourself for some reason) you can change the status of a finished, but not published, posts to mark it for review.
- Move to Trash: This one speaks for itself. When I was an angsty teen, writing that I wanted to destroy went out in a fiery blaze of glory. Unwanted writing now ends with not a bang but a whimper. A sad little click of a sad little button can quietly wipe away all you’ve written in a second. Make sure you truly want to delete it. Though in WordPress, depending on your configuration, you can rescue things from the trash if you make a mistake.
The permalink is the link to your post. When we went over the setting up permalinks in the settings menu, Zip chose to use the post name as the permalink.
And, by default, that’s what the permalink will be. However, you can change that to whatever you want to here without changing the title of your post. Just make sure to separate the words with dashes and that there are no special characters.
We’ll go over some SEO tips in another post, but if you’re going to any specific keywords, definitely consider including them in your URL slug.
And, there at the bottom, is the URL where you’ll be able to view the post when it goes “live.”
Zip will consider the organizational structure for his blog later. You can find, in your admin area, under Posts, a specific area for categories where you can configure each category.
But you can add categories on the fly as you write a post.
By default, you’ll start with only one category: Uncategorized.
To add a new category, just enter the name for the new category you want, and click the Add New Category button.
If the category you want is already here, just check its box.
If you want the category to be a subcategory of another one, you can use the dropdown to assign a parent category.
For instance, Zip could make a parent category called Famous Sloths and then subcategories for Book Sloths, Movie Sloths, and Sloths of Instagram.
Tags are another way to help people find content on your WordPress website. You might want to make categories broader areas of content that you list in your menus, while tags can narrow down the content a bit.
For instance, if Zip wants to write a review of The Little Book of Sloth Philosophy, he might want to use Book Reviews as a category, but then he could use the terms “Philosophy,” “Nonfiction,” and, perhaps, the author’s name as tags.
To enter a tag here enter a word, and either press enter or comma-separate your terms.
If he writes other posts in the future with the tag “Philosophy,” then someone could click the link for that tag and would be shown all of the posts on the website that include that tag.
As with categories, there’s a menu in the Posts are in admin to add and configure tags as well.
Click on the Featured Image box to open a Media Library panel where you can either attach an image you’ve already uploaded or upload a new image.
For a more detailed explanation about working with the WordPress Media Library click here.
The featured image is going to be the primary image for your post: the one that may appear at the top of your post, on posts lists such as your blog page, that might get shown in search engines. Make it eye-catching, illustrative of your post, or, hopefully, both.
What size should Zip use for a featured image?
Various themes use various image sizes. However, I’ve found that the most convenient size to use for a featured image in a basic WordPress blog post is the Facebook Ad size of 1200px x 628px. But, as I said, that depends on your theme and what you’re doing. On another website of mine, I sometimes like to write book reviews, and I’ve customized a template that shows the featured image in portrait orientation so I can add a cover as the featured image.
For now, I’m letting Zip borrow my Canva subscription for cute sloth graphics. Can I draw sloths myself? Yes! It turns out I can, and I may start making my own sloth graphics at some point. But I’m more into writing, and it’s much easier to use preexisting stock graphics.
The excerpt is a summary of your post that will show in some lists of posts on your website.
It will also show in RSS feeds if you’ve chosen to show the excerpt instead of the full content.
It says here that it’s optional — and it is — but I’d advise you to get in the habit of writing an excerpt for your posts.
Do you want to allow comments on your post? While you can set your default choice for comments for your entire website in Settings, you can enable or disable comments, pingback, and trackbacks, on a per-post basis, here.
Right now, all that’s here is a drop-down that allows us to change the template. This default theme has just three templates: the default, a cover template, and a fullwidth template.
The fullwidth template with be sans-sidebar. We’ll stick with default for right now.
Areas not appearing in this post:
The above document settings in the post editor are just the basic ones you’ll find when you first install WordPress and have the default theme enabled.
As Zip changes themes and adds plugins, he’ll find more settings to configure in this area. For instance, he might find:
- A short analysis via the Yoast SEO plugin.
- Radio buttons allowing you to choose from various post formats (video, link, audio, quote.) This depends on your theme.
- Settings from a caching plugin for speed optimization.
- Sidebars. This basic theme does not have any sidebar settings. Zip may want to add a sidebar after he changes his theme.
Using blocks to compose your post
You’ll note where it says, “Start writing, or type / to choose a block”? You can start writing, and you’ll be working with the paragraph block. If you hit / it will open up a list of other blocks you can choose.
However, I usually like to hit that little + symbol you see to the right if you look at the photo below. That will open a menu of all of your available blocks — and it’s searchable if you have many blocks and want to find one fast.
WordPress 5.5 Update:
The block editor looks and workds a bit different now, but it’s still pretty intutitive. You’ll see the same type of menu as in the image above, but you’ll see the option to “browse” at bottom.
If you click that, it will open a menu in the left-hand panel where you can browse all of the blocks.
If you click the “patterns” tab, you’ll see a bunch of options for convenient patterns like two buttons (great for a hero cover image.)
And WordPress 5.5 also introducted a nifty new feature: the block directory. From the search feature, you can search for new blocks to add and developers can add their own blocks.
When you install plugins, you’ll find that many add their own blocks. You can end up with a lot of blocks to choose from, so this search feature can be beneficial at times.
Core Blocks Available in Gutenberg
I’ll gradually be adding information about each block in the glossary, but what follows here is an explanation of all the core blocks in WordPress.
If you look at the menu that we opened with the + symbol, you’ll note that the ones at the top are the most used. WordPress conveniently will show you the blocks here that you use most often, and it will change if the way you use blocks changes.
Scroll down, and, you’ll note that the list is organized into sections, which make it easier to find the blocks you want.
Let’s go over the core blocks available in the WordPress block editor section by section:
This section includes the most frequently used, basic blocks. We’ll go through each one by one.
You need to define some clickable areas for your image.Hint: you can click on the icon to drop down to information about the block.
This will be the block you use most often: the block where you enter text.
Just type into the block to enter your text. When you hit Enter, you’ll open another paragraph block where you can keep typing. If you want to start a new paragraph within the SAME paragraph block, hit Shift and Enter.
At the top of the block, you’ll see some controls. If you click the Paragraph symbol, you’ll open a menu where you can change your paragraph block to some other types of blocks:
- The alignment dropdown lets you align your text left, right, or center.
- To bold or italic your text, you can either select the appropriate button before you type the text but, more commonly, I select all the text I want to bold, for instance, and then click the B button.
- Select the text you want to turn into a link and click the link button to add a link. You’ll see that you can choose to switch on some extra settings here: to open the link in a new tab (helpful if you want to encourage your visitor to not navigate away from your page), to nofollow links, or to mark the link as a sponsored (paid) link.
- The dropdown next to the link box will allow you to select text and give it a different color, insert an inline image directly into your paragraph block ,
add some code,or select some text and
cross it outstyle it with a strikethrough.
Paragraph Block Setttings
In the block settings panel on the right, you’ll find settings specific to the Paragraph block when you have it selected. You can:
- select the text size
- Flip a switch to show a drop cap (a large first letter for that block – only recommended for the first block in your post.)
- Under color settings, you can choose text color and background color for the block if you want something other than the default.
- Under “Advanced,” you can set additional CSS classes for the block. That is more advanced, and we’ll leave it blank for now, but know that it can be conducive to customizing styling on your website.
You have three choices here: upload a new image, choose one that’s already in your media library, or insert a URL from an image elsewhere. For more detailed information about uploading images to the Media Library, read this post.
One word about inserting images from other URLs: Use with caution. It’s OK to do if it’s your image, and you’re choosing to host your images elsewhere for some reason. But don’t “hotlink” to other people’s pictures on their websites. The image may be copyrighted and, even if it’s public domain, you are using their resources to show that image.
If you click on the little picture icon in the upper left corner of the Image block, it will open up a menu where you can make your image round, or transform it to one of a selection of other block types.
You can also click below where it says “Write Caption” and type in any caption you might want. If you leave it blank, it won’t show anything on the front end of your website.
The next icon over will open up a dropdown of choices for aligning your image.
Replace will allow Zip to change his mind when he decides not to represent himself with this image of a baby sloth.
And, you can choose to make your image link to something by using the link button, just as you did with the Paragraph block.
WordPress 5.5 Update
WordPress 5.5 added some additional features to the image block. You can now crop, set the orientation of the image, zoom in, directly from the block as seen in the video below:
Image Block Settings
When you have an image block selected, you’ll see these settings in the block tab in the right panel.
- The Styles settings will do what we already did: choose between a squared or rounded image.
- In Image settings, you can enter Alternative Text, which will describe the image when read by a screen-reader and may confer some SEO benefit if you add some keywords.
- You can choose from some of the existing sizes for this image by using the dropdown, or specify exact dimensions or percentages of the original image size that you want to apply for this image.
It is best, as much as possible, to use the exact image size. Images load much slower if they need to be resized down in your browser.
For instance, if you want to use a 300px Medium Sized Image here, choose the Medium size. Don’t select full size and then specify 300px or 25% in the settings here, which will size that large image down.
- Advanced will let you add a title attribute. Doing so is optional, but may show up as a tooltip when someone hovers over the image on the front end of your website.
- Additional CSS classes: again, this is for styling. You’ll notice that the class is-style-rounded got automatically added here when we chose a rounded style for our image.
The Heading block allows you to organize your post with headings.
Some things to know about headings:
- You should generally only use H1 on your post or page title. Search engines read H1 headings for information about your post or page.
- Using some SEO keywords in your headings is useful for search engine rankings (but don’t overdo.)
- Organizing your blog posts with headings makes them much more readable to an online audience that may just be scanning for information.
The buttons at top for links, italics, and such work the same way that they do in the Paragrah block.
Heading block settings
In the settings panel, when the Heading block is selected, you’ll see some limited settings:
- The heading level you want, from H2-H6. Note that you can only choose headings between H2 and H4 from the Heading block itself.
- Color Settings: This lets you choose a different color for your heading.
- Advanced: Again, we can designate an additional CSS class, but there’s an exciting feature specific to this block:
- HTML Anchor: If you’d like to make navigation through your long post (like this one) more manageable, you can set an anchor here so you can link to it and allow your reader to jump right to the section they want. You can read more about creating anchor links here.
Just as with the image block, you can choose to upload images or use existing images from your Media Library. But, instead of a single image, you get to add a bunch of them.
Zip has selected some images that represent different aspects of himself, but he looks strangely different in each of them. Oh well…let’s see what happens when he uploads them to the gallery block.
But Zip starts getting confused because all that he sees is ONE image as he presses upload each time, and it doesn’t look like a gallery at all.
That’s because the images are being uploaded to the Media Library. He just has to take another step: He still has to click the Media Library button and then select each image he wants to add to his gallery and then click the Add to Gallery button.
After he does that, he’ll go to the Edit Gallery screen where he can add a caption to each image and drag and drop to sort the order of the photos in his gallery.
And after saving, he can see his gallery in the post editor:
Gallery Block Settings
But what if Zip doesn’t want his images arranged in a grid? Over in the block settings on the right, you’ll see a slider labeled “Columns.” Dragging that will automatically reorder the number of columns in the gallery. For instance, if Zip pulls the slider to 4, his gallery then looks like this:
Zip has his gallery “Crop Images” toggle on here, but it doesn’t make much of a difference as all of his images are perfectly square. If you have rectangular or different-sized pictures and have this on, it will crop your images to keep them in a nice grid. If you don’t want your images cropped, you can turn this off, but sometimes it results in odd-looking layouts.
You’ll also note there that you can choose to link to something — your choices are either the attachment page for the image, or to just the media file (which will only show the image itself in the browser if someone clicks on it.
Zip finds that, right now, it’s behaving the same for either setting (to change this, he’ll need to edit his settings) and decides not to link the images.
And, he can also set image size. But he finds that it doesn’t’ seem to resize the images at all! What this can do is allow you to select a smaller image size so that you aren’t resizing a large image down in your browser, which can make those images load very slow. You probably don’t want to select a smaller image size (the thumbnail, for instance) than is shown in your gallery because if a smaller image gets enlarged in your browser, it’s going to look crappy.
If you are listing things out, having a numbered or bulleted list is great for formatting and readability. The list block does just that. You can choose, on its top bar, between a bulleted or numbered list and whether you want your list right or left-aligned.
The list block doesn’t have any extra-special settings in the settings panel to the right; it’s pretty straightforward.
Zip decides that he wants to add a quote about Sloths. Lucky, him, there’s a common block just for that. The quote block formats your quote nicely — usually, it will feature a bar on the side depending on what you choose for your text alignment. Formatting changes from theme to theme and, as usual, you can customize it with CSS. At the bottom, there’s a space just for entering the source of your quote. On the top bar, you can choose whether to align the text center, right, or left.
Quote Block Settings
There’s not much to choose from in the quote block settings (unless your theme adds something here).
Here, Zip can choose from regular or extra large text.
Here’s his quote center-aligned (you’ll notice it’s missing the bar when it’s center-aligned) and in large format:
Suppose that I wanted to make a “Hero” type section: I want a background image with some text in the foreground. Something like that would be great for a header. That’s where the cover block comes in. Zip decides to try to use the cover block and use the quote block in the foreground. You can choose from several types of blocks to format the text in your cover block.
Here’s what he gets:
As you can see here’ he can add additional blocks here if he wants.
Cover Block Settings
The cover block has a number of settings in the right hand panel:
- You can choose a fixed background for a “parallax” effect where the image will remain fixed while the user scrolls. But be warned, you may need to resize your image. Zip thinks it looks a bit creepy when he enables this:
- You can choose position settings to position your background image.
- You’ll notice that the background image has an overlay to make the text more visible. You can change the color of the overlay, or even a gradient if you chose a custom color. Zip decides upon a rainbow effect:
- You can also choose to make your background image more or less opaque with a slider.
Want to share music or sound effects? The audio block allows you to upload a sound file — .mp3, .wav or .ogg file formats — or insert an audio file from its URL.
Upload your file and you get a nice audio player like this:
Audio Block Settings
There aren’t too many settings to configure for the audio block. If Zip wants to be obnoxious, he can choose to switch on autoplay as well as switching on the loop so he can inflict his calming jungle sounds on visitors to his page whether they want to hear them or not.
Preload controls how much of your audio file gets automatically loaded:
- Auto: The audio file gets downloaded automatically. Auto doesn’t mean that your sound file starts to play automatically — it just gets downloaded with the loading of the page, which means it will begin playing quicker if someone hits the “play” button. However, this can make your entire page load slower.
- Metadata: This just automatically downloads the information about the audio file and saves downloading the audio itself if someone hits “play.”
- None: The audio file only gets loaded if someone pushes the play button.
The video block looks pretty much like the audio block before you add a video. This block is for uploading your own video vs. embedding a video from YouTube or Vimeo, though you can insert a video from a URL.
In general, I prefer to put videos on YouTube if they are at all lengthy. But sometimes I might want to just upload a small video clip for a demo — this would be the block to use.
You’ll end up with a nice little player like this:
You can even give your video a caption.
Video Block Settings
The video block has several settings to choose from. Some, you’ll recognize from the audio block settings.
- Autoplay: Again, Zip can choose to annoy his website visitors with a video that plays itself.
- Loop: Show that video again and again in a neverending loop.
- Muted: Mute the video by default. At least you won’t startle your visitors with a video that suddenly starts playing music. Or jungle noises. Or sloth sounds. I might not mind that — but most videos I see autoloaded include obnoxious and loud music that startles the hell out of me.
- Playback controls: You want your visitor to be able to control the video, don’t you?
- Play inline: Here’s something that confuses me. What play inline, I believe, is supposed to do is play the video right where it is and not opening to fullscreen. But on Slothverse.com, the video plays in place regardless of whether Zip has checked this or not.
- Preload: this works the same as in the audio block.
- Poster Image: Do you want to add a cover to your video, perhaps with some descriptive words? Upload an image to serve as a cover image for your video!
The file block pretty much looks like the last couple of blocks until you upload a file. You can either upload a file or choose from a file in your media library here. This block is an excellent one to use if you want to add a file that people can download like a .pdf or .doc file. Note that it does NOT embed the file and made it viewable directly on your page.
Zip makes a handy infographic about “Four Sloth Facts to Know,” and uploads it. Afterward, he ends up with a description and download button like this:
File Block Settings
The file block doesn’t have too many settings. You can, as with the image tab, link to a media file or the attachment page. You can choose whether you want the file to open in the same browser tab, or have it open in a new tab to keep visitors on your page.
And you can choose whether or not to show the download button. I like to include the download button as a visual cue that you can download the file.
The formatting blocks to what they say: format stuff. The formatting blocks include:
You need to define some clickable areas for your image.
Are you ready, poets? This block is the one for you. I actually never used the verse block, but will if/when I start writing poetry or posting song lyrics. Heaven help us when that happens!
At first glance, the verse block looks kind of like the paragraph block and offers some of the same options. While my poetry-writing skills are dubious, Zip’s poetry writing skills are nil. He quickly composes this in the verse block:
So how does this differ from the paragraph block?
What it does is allows you to format your verse on subsequent lines just by pressing enter. If you write all on one line, what you’ll end up on the front is a horizontal scroll bar, which is weird. But press enter while you’re in the block and it will drop you to the next line so you end up with a nicely formatted poem.
It may offer some styling of its own. The only option in the settings block here is to set a custom CSS class, but that will allow you to add some unique styling to show off your wonderful poetry to the world.
But this poem makes no sense on Zip’s blog post, so he writes another bad sloth-related poem instead.
The code block might seem like it would be the place that you place codes you get from ad or affiliate programs, or shortcodes, which we’ll get to later. It is not.
The code block is a great block to use if you want to share code with others. If you stick code in the paragraph block, it will get formatted. If you put it in the HTML block, it will try to execute your code. This block will keep your code as-is, so someone could copy and paste it if they wanted to.
Here’s an example. Say I have an ad script from somewhere. But I don’t actually want to use it to show the ad — I want to show the code itself so other people can see it and comment on it. If I stick this code in the HTML block, it’s going to show the ad. Stick it in the paragraph block, and it will add formatting. But if I stick it in the code block, it will show the code as-is on the front of the website. If you see code examples on this website, I’m usually using the code block.
The code block doesn’t add any extra settings (except for the usual custom CSS class option) in the right panel.
Zip is trying to include every single Gutenberg block in his new post. This is something I would NOT recommend that he ever do again! But he’s wondering how he could include the code block in his post. And then, a lightbulb goes off! He could create a simple ad for his new website to which people could link!
I help him create a medium rectangle sized ad image and create some code to link to it, he inserts it in the code block and gets this:
Now someone can come along, copy the code, paste it on their website to show a nifty Slothverse.com ad!
The classic block is for us “oldies” who used WordPress before December of 2018 when Gutenberg was released. It resembles the classic WordPress editor, which includes a large text field with a bunch of buttons (TinyMCE buttons) at the top. Some plugins you install might add their own buttons here as well, just as they may add some extra blocks.
The buttons are pretty self-explanatory if you’re familiar at all with word processing, and if you hover over one, it will give you a tooltip telling you what it does.
Why use the classic block anymore? I rarely do, but do sometimes. It can be helpful if you’re importing content from a pre-Gutenberg post. On my website that has an event calendar, it places events posted by community contributors into the classic block. Or maybe you’re a WordPress boomer who’s just tiptoeing into the block editor, and this is your safety raft. There are also a few TinyMCE buttons inserted by various plugins on the classic block that I can’t use in any of the other blocks.
You can designate heading styles right within the block — but the won’t have the same options (easy anchors, for instance) that the heading block will have.
The classic block has no extra settings in the stellings panel to the right.
Custom HTML Block
If you want to add custom HTML, without formatting, that will show on the front of your site, this is the block to use.
This is the block if you, for instance, want to place ad code on your page. You can also place shortcodes here, but there’s a block just for that, and many plugins that use shortcodes will add their own blocks allowing you to insert their shortcodes.
There aren’t any custom settings in the settings panel for this block. The block itself has a preview button to give you a heads up on if your HTML or scripts will display the way you expect.
Zip doesn’t have anything like Adsense, this being a new blog but, as I’m helping, he does have access to an affiliate ad code via moi.
He puts his code in the HTML block, presses preview and sees that his code is working:
The preformatted block displays the text on the front exactly how you enter it — in a monospace font with even spacing between letters.
The only setting in the right bar here is a custom CSS class, but adding one would allow you to format the text to match your theme.
Here’s what it looks like on the front:
But, wait! It didn’t look like this on the back end — it looked like it was formatted into a nice, square text…but on the front it has a scroll bar.
He pasted this text in…and didn’t press enter to add any new lines. He’ll need to format it in the block as he goes, pressing enter when he wants to go to a new line. Now he gets:
Wait! Didn’t we already see a quote block?
Here we have another block for quotes. You’ve seen in magazines where they draw attention to a quote from the text by pulling it aside? That’s the function of the pullquote block.
Again, we have formatting options left, center, right, and now we have a fullwidth option if we want our pullquote to extend across the page.
Let’s see what happens when we add a left-aligned quote.
Wow. We see that in this theme, a left pullquote is pulled out to the far left side of the page, outside of the main text column, and, as it’s at the end of the post right now, it got pulled to the right of the author credit. We don’t want it there — but we’ll come back and move it later when we get to moving blocks around.
Inserting a table is one of many things that Gutenberg made easier. The table block allows you to add a table to display your data. You create it by designating how many rows and columns you want in your table and hitting the “Create Table” button.
After you create your table, you can enter your information right in, and if you need more rows or columns, you can easily add them by clicking the button in the block:
Here’s a formatting block that has settings. For the table block, you can choose plain or stripes; you can make the table cells all the same with, or add a header section to describe your columns.
You can also add some colors (limited colors here) to your table.
After adding some styling options here (stripes, green color, and header section), our table of facts about the two-toes or three-toed sloth looks like this on the front end:
The blocks in layout elements do just that — they offer things like ordering your content in columns, adding buttons, separators, etc.
You need to define some clickable areas for your image.
The page break block separates your post into multiple pages. Use it in cases where you don’t want to load everything on one page. Readers can navigate between pages by pagination links at the bottom of the post:
This is a simple block; you won’t find any special settings in the right settings bar for this block.
When I started using the block editor, one thing I loved was the button block, as it made inserting decent-looking buttons much easier. Just add the button block, write your text right into the button, use the link button to add your link, and voila! Button!
At the top bar, you can choose from a filled or outlined button, and you’ll find a bunch of settings in the right bar to customize the appearance of your button:
- Styles: This is exactly like on the top bar of the block — you can choose between solid and outline.
- Background and Text color: Here’s where it gets fun. You can customize your button colors, or even choose a gradient for the background.
- Border settings: Use the slider or set a number manually for your border-radius — to make your button more square or more rounded.
- Link settings: Flip the switch if you want your link opened in a new browser tab.
You can also enter a “rel” value here. If you choose to have your link opened in a new tab, noreferrer noopener will be introduced here by default.
If you don’t want search engines to follow the link, add nofollow here. If it’s a paid link, you can add nofollow sponsored here.
Zip decides to make a rainbow button linking to this post:
You can see the column block used often in the post you’re reading right now, at least if you’re reading it on desktop.
The column block is useful for many reasons: if you want to arrange your text in columns, if you want an image kept to the left on desktop but will stack on desktop. This block is handy in arranging your post layout.
You can choose an arrangement of columns to start, but you’ll be able to “tweak” it later in the settings area for the block.
Within each column, you can insert just about any other type of block. Here, Zip decides to add an image of the infographic he created about sloth facts that he entered, in PDF form, into the file block, with a text block and the file block inserted on the right.
Columns Block Settings
In the settings for the column block, you can drag the slider to add additional columns.
You can also choose a different background and text color for the block as a whole.
If you click to select a single column in the block, you’ll find a slider to control the width of that column. It would be helpful if there were a setting here to give a single column a different background color. For now, the way to do that would be to give that column a specific CSS class and then write some CSS to customize its color.
WordPress 5.5 added some additional gradient features to the block.
A nice thing about columns is that they will stack on mobile devices. So three across on desktop will turn into one column on mobile.
WordPress 5.5 Update
In WordPress 5.5, you’ll notice that you now have the option of some preset options when you search for the columns block.
The group block allows you to insert a bunch of other blocks into it to treat those blocks as a group. So you can move all of them together, apply similar background settings or additional CSS, etc.
But what if I’ve already entered blocks and later decide I want to group them? Easy. Select one block that you want to group, press Shift, and then select the other adjacent block(s) that you would like to group with it.
Then click the button at the top of all the selected blocks that has three dots and choose “Group.” You have a group!
If you ever want to ungroup those blocks, you’ll now find an “Ungroup” link in the same place that you found the “group” link.
The settings for this block allow you to choose colors or insert an HTML anchor for the group.
It’s a useful block, but one of my frustrations is clicking in the correct spot to reselect the entire group after I’ve left it.
Media and Text
The media and text block allows you to easily format a two-column area with an image on one side and some text (including a headline and body text) on the other. You could achieve something similar with the columns block, true, but this is nice for some things.
The buttons at the top of the block allow you to control the alignment of the block and whether the image is on the right or the left.
Media and Text Settings
Here, you can choose to show your image and text side by side or stack it on mobile devices, or you can crop your image to fill the entire column.
If you choose to crop your image, you can choose the position for the crop so you can center the image how you want.
Enter some alt text for your imge, and you can also set some color settings for the block.
The more block just enters a type of divider that does one thing: everything above it will show as the excerpt on the archive pages.
You’ll only find one thing in the settings for the more block: a toggle for whether you want to show the excerpt on full content pages — that is on archive pages that show the full content.
The separator block adds a divider line. All you’ll find iin the settings for this block are a choice of divider styles and the ability to set a color for your separator.
This block does what it says: adds some space. I’ve found that, at times, some blocks seem too close to each other. If you want to ad some space between some blocks, add a spacer. You can then set the height of the spacer in the settings column for this block (in pixels.)
You need to define some clickable areas for your image.
While we haven’t got to widgets yet much in this series, know that the widget blocks add many of the same things as you can find in the default widgets from a search form to a tag cloud — only you can add them to a page. So with the implementation of Gutenberg, you can now easily add a tag cloud to the page (if you want.)
Let’s go over these one at a time as Zip adds them to his post.
Use the shortcode block if you want to insert a shortcode into your post or page easily. Note that you can also do this using the HTML block, but this one is made especially for shortcodes. You’ll only see the shortcode on the back end. The result will be visible on the front of your site.
It’s pretty straightforward, and there aren’t any additional settings. But Zip’s website is new — he doesn’t yet have any plugins that add shortcodes yet. But if he did, he’d put the shortcode in here with the brackets .
This block does exactly what it says: shows the latest comments. Right now, Slothverse.com is new, and Zip doesn’t have any comments. But if he did, they’d show here.
Latest Comment Settings
The Latest Comments block has a few toggles in the right-hand settings panel. You can choose whether or not you want to show the user’s avatar, display the date, or display an excerpt. You can also control the number of comments you want to show.
The RSS block is a way to show the latest posts from an RSS feed on your website. Enter the URL of the RSS feed that you’d like to show. I don’t know why you’d want to display a feed of your own posts on your own website but, generally, the feed URL for a WordPress website will look like this:
Just a note: be sure you are authorized to post this content on your website!
Here’s Zip decided to show the posts from this series about his progress on the blog, so he’s going to use a category feed here.
And here’s how it looks:
You’ll note that you can’t see any images here, even though I’ve configured the RSS feeds for this website to have a featured image. But you can choose from some settings to choose how you want to display the feed:
RSS Block Settings
Here, you can choose:
- the number of items in your feed
- the number of words in the excerpt
- whether or not you want to display the excerpt at all
- whether or not to display the author and date of the post
The social icons here are social follow icons, not social sharing icons. You can click on each one to add the URL to your social profile. If you click the plus button, you’ll open a ginormous list of additional social icons you can add here.
You can set the alignment for the block in the top bar for the block by selecting the entire block.
Social Links Block Settings
If you select the entire block, you can choose from three styles for your social icons: the default round icons, the logos only with no background, or pill-shaped icons.
Select the individual icons, and you’ll see a block where you can add a label for the icon. Note that this label is for screen reader users. It’s not shown in a tooltip when you hover over the icon or anything like that.
But Zip doesn’t have any social accounts yet, so he decides to enter the social accounts for this blog for now.
This block shows the archives of your posts by date.
There is a right-hand settings panel for this block, but it only has two toggles. You can choose to display the archives via a dropdown (as is shown here) or as a list, and you can choose whether to show the post counts for each date.
Slothverse.com, of course, does not yet have any archives, but when it does, they’ll show up if Zip uses this block.
The calendar block shows a calendar where people can click the date to view posts for that date. Slothverse.com doesn’t even have any posts at the time of this writing, so no calendar shows there. Therefore, I’m going to include the actual block in this post instead of an image.
There aren’t any special right hand panel settings for this block.
Again, Zip’s website doesn’t yet have any categories. So I’m going to show the actual block here instead of an image:
Settings for the categories block
The categories block settings offer a few toggles:
- Display as dropdown is enabled above. Otherwise, you end up with a list of bulleted categories — which can be extremely long if you have a lot of categories.
- Show hierarchy. We’ll get to categories soon in another post, but turning this on shows nested categories and subcategories as shown above.
- Show post counts (of course) shows the number of posts in each category.
Again, I’ve included the “live” block here as Zip’s site has no posts as of yet. This block does just what the name implies: shows your latest posts.
- Sloth Sets up Google Site KitZip has installed Google Analytics and also configured it via Google Tag Manager. Let’s take a look at Google Site Kit, its advantages and disadvantages, and how to install it.
- Sloth Sets up Google Search ConsoleZip has installed Google Analytics, now I’ve recommended that he follow up by installing Google Search Console. Here’s how.
Latest Posts Block Settings
The latest posts block is a nifty feature; display your latest posts easily. One thing that’s missing: you can’t show your posts in a masonry grid style. One nice thing: if you want, you can show your posts in reverse chronological order.
The posts in this category have a chronological sequence. So, I’ve chosen, in some places, to list them from oldest to newest. While I’m using my theme, and not the latest posts block to do so, this is a feature I appreciate because it used to be more challenging to choose a reverse order for your posts.
Other toggles for this block:
- You can show no post content (title only) by turning off the toggle. If you have it on, you can show just the excerpt or the full post content. And you can choose the number of words if you’ve decided to show the excerpt.
- Display the post date, or not.
- You can display the featured image, choose the size of the image, and where to display it. In the block above, I’ve chosen a square thumbnail image and have it left-aligned
- You can choose how many posts to display.
This is a simple block that inserts a search form so visitors can search your website. It has no additional settings.
Again, Slothverse.com has no tags yet as this is Zip’s very first post. So here’s a tag cloud for this website:
#BLM aging analytics animation Black Lives Matter block editor Book Reviews Books Buddhism Cartoons Comics crafts Cricut CSS Snippets Design Divi DIY Extra funny GA4 Google Analytics Google Analytics 4 Google Tag Manager Gravatar Hueman Media Settings Meditation menu Page Plugin Reviews Plugins quotes sewing Snippets Social Media Television themes TV Video Video Posts WordPress WordPress Settings WordPress Tutorials Writing Zen
It shows a word cloud of tags on your website sized according to the number of times the term is used. And you don’t even need to use tags! A dropdown in your settings panel allows you to choose to show categories as well. You may also be able to choose from some custom post types’ taxonomies.
You need to define some clickable areas for your image.
You need to define some clickable areas for your image.
You need to define some clickable areas for your image.
Each embed block looks pretty much the same: insert the appropriate URL for the block and press the “Embed” button. Insert a plain URL here. If a website has given you an embed code, either stick that in the HTML block or finding the sharing link and putting that in here might work. But don’t stick code in here.
Let’s look at the appearance of all of these blocks. Please note that I’m skipping the “Embed” block here as I never use it. I could use it to embed a post from my website, for instance, but it only embedded with the title and link. There are so many specific embed blocks that I’m not sure why you’d need this one.
But one more thing before we go through all of these blocks: when your website needs to fetch content from outside sources, your page will take longer to load. How long depends on that other website. If you put a bunch of embeds all on one page, it can slow your page’s loading time down significantly. Yet, Zip is going to do just that on his first post.
There’s also a chance that the content you embed will go away at some point. And once, someone somehow changed the video that I had embedded into something unrelated.
Show a Meetup event.
There aren’t any Meetups for sloths! I wonder why.
So Zip has chosen to show an event to help humans chill out.
Enter the URL for a Tweet here to show it on your post.
Enter the URL of a YouTube video and show it on your post. Note that this is different than the video block in which you upload a video.
You can’t preview a Facebook embed from the the back end of your website. This is a preview from the front of the site.
To find the embed link for an item on Facebook, click the three dots at the top of the post and choose Embed. That will take you to where you can see the embed link for the post.
Zip can embed his favorite sloth influencers with this block.
This embeds content from a WordPress.com blog. This is an adorable cloth felted sloth pocket. But, unfortunately, no categories or any featured image imported along with it.
Embed a track from Soundcloud. Here, Zip has entered some soothing jungle sounds.
Enter more soothing jungle sounds (or your favorite music) with the Spotify embed block.
Embed an image fom Flickr. Make sure you have rights to use it.
Embed a video from Vimeo.
Animoto is a video website that offers a variety of templates for easy video editing. Just to try it out, Zip made a quick promotional demo for his new website using one of their templates.
Use this if you have made your own video on Animoto that you want to show on your site. Of course, unless you have a paid account, you;ll have their watermark on your video.
Oops. I lied unintentionally. Zip won’t be using every single block in his first post because Cloudup isn’t offering public signups and Zip does not have an account (and neither do I.)
Cloudup is a sharing site for photos, videos, documents, and more.
Crowdsignal lets you make polls, quizzes, surveys and ratings. Here, Zip made a simple poll to insert into his first post.
Use this block to embed a video from Dailymotion. Here, Zip has gone high-tech, and entered a video of the Slothbot, a slow-moving robot that monitors the environmement.
The Hulu embed block is a lie. You now can’t embed Hulu videos and I understand that it is supposed to be removed from WordPress 5.5.
Embed an image from Imgur.
You’ll notice that this is a longer image and the Imgur block has inserted a scroll bar to view the whole thing.
Issuu is a digital publication platform that displays in sort of a flipbook style. Many magazines use issuu for their publications’ online version.
Here, Zip found a copy of the children’s picture book Sloth & Smell the Roses.
Embed a Kickstarter campaign. Here, Zip has found some Sloth Boss Gamer enamel pins.
Embed a track from Mixcloud, another sound streaming/sharing service. More jungle sounds.
Insert something from Reddit. Here, Zip’s found some sloth bathroom art. Reddit’s like a box of chocolates…
Reverb Nation features both better and lesser-known artists. But sloth artists are grossly underrepresented. The first thing that comes up if you search popular artists for Sloth is the Doobie Brothers.
I’m also skipping this block. Screencasting software allows you to record a screen video. Supposedly, this block allows you to embed a screencast. But I’ve tried it with a couple of screencasting sites and nothing would embed.
If I need to show a screenshot in a post, I prefer to just use YouTube or upload a short video directly.
Embed a document from Scribd with this block and it shows with their nice navigation.
Embed a presentation video from Slideshare. Here, Zip found someone’s PowerPoint-type report about Sloths.
Embed photos from SmugMug with this block. You can’t preview SmugMug embeds in the post editor; above is how it appears on the front end of the website. Just the image (though I notice it says ‘no categories’ below)
Speaker Deck is another slide share type website. Presentations there tend to center around tech, design and education.
Zip couldn’t find a sloth-y presentation there, so I added a list of questions to ask clients about WordPress design projects because it’s general good advice and what I’ve done.
I once took a video of my spouse accidentally dropping a beer bottle on the foot of a living statue, but accidentally took it in portrait mode and then realized that it didn’t fit most video formats. 2 After that, when I saw people with their cameras in portrait mode, I’d think “that’s stupid.” Little did I know there would be a demand for portrait-oriented videos.
Zip is very offended that this sloth seems to be eating out of that girls mouth.
Embed a TED talk. Zip embedded one In Praise of Slowness.
Embed something from Tumblr. You can get the URL from the browser. Tumblr image links won’t work here.
Zip shared a cartoon from Slothilda.
OK, here’s another block Zip’s not adding.
VideoPress is a video hosting service which is a part of the WordPress.com universe and part of their paid plans.
Zip doesn’t want to sign up for a paid plan, so he’s not going to use this block.
WordPress TV has videos centered around WordPress and you can use this block to embed one.
Zip liked the Wapuu on this one.
Insert a link for a Kindle Book and this block will show an image with a link to share, preview, or buy the book on Amazon.
It actually works with Amazon affiliate links though, unfortunately, it does not seem to have the option to mark said links as nofollow and sponsored.
And one more type of core block: the reusable block. This is a very convenient feature for things you use over and over again. For instance, if you use affiliate links in your posts, you can create a paragraph block with some text for the disclosure and then hit the three small buttons at the top of the block and choose “Add to Reusable Blocks.”
Then choose a title for your reusable block and hit the “Save” button.
Oops! Zip made a typo. Let’s not be lazy and correct that before we turn it into a reusable block.
Now, if you click + to add a block, you’ll see an area at the bottom for reusable blocks and find your new reusable block there that you can add to save time.
The “manage all reusable blocks” link you see there will open up a page where you can view all of your reusable blocks and even add a new one in the same way you’d add a post.
Moving blocks in the block editor is not too difficult. On the left of each block, you’ll find an up and down arrow; Click the arrows to move the block up and down one space and hold and drag the center area to drag the block.
A Word About Organizing Your Post-Writing
Wow. Zip has “written” much of his first post, but…what a mess! Not only does he have blocks of every type, but they’re all over the place.
While this post intended to go over the technical part of writing a post in the block editor, I think a word about organizing your posts before and while you write is in order here.
Yes, you can move blocks. But to move them around in a long post is a pain in the butt.
It’s helpful if you plan out the structure of your post before you start to add things. You’ll do less editing before you publish.
We’ll go over post structure more later, but know that most blog posts do better with headings for areas of the post due to the way people read things online and for SEO reasons.
This bugs me sometimes, and I have a place where I’m letting myself ignore the SEO plugin feedback and write what I want to write without worrying about all the formatting…but do so at your peril.
Figure out what your headings will be before you start writing. What will your subheadings be? Use different heading levels (i.e., H2, H3, etc. for headings and subheadings — H1 should only be for your title) and then fill them in after you list the headings. Or write your post elsewhere and then paste it into WordPress and format it there.
Zip has the sad task ahead of him of organizing his post by having to move a bunch of blocks around. So sad.
Finishing Upon How to Write a Post in WordPress: Editing and Publishing
Well, Zip has finally moved his blocks around.
Time to edit. What? He was ready to push “publish!”
Time to reread and edit. Unless I’m in a hurry, I often like to let writing that I do sit for a bit — a day to a few days — and come back to it to edit. But I often don’t do this with blog posts as pressing “publish” is so immediate. But I think it’s a good habit. It gives you a bit of distance so you can come back and see what you’ve written with fresh eyes.
Also, when I’m tired, I find myself making typos and grammatical errors — and I know better. I’ve turned to tools like Grammarly to help — not foolproof, but it catches some of the mistakes that I may have missed.
But Zip’s in a hurry to get his post done. Really, his post isn’t very good.
He’s used almost every single block, embedded a ton of videos. It’s probably going to load slow. Plus, he’s made it difficult for anyone to read. In the future, I’d advise him to write shorter, more focused posts. He says to me, “you should talk.”
Time to Publish
So Zip thinks he’s ready to publish. Time to hit that button and share your thoughts with the world, o sloth!
Zip hits “Publish,” so excited to see his first post go live.
And he gets…
A double-check to make sure he wants to publish.
I am glad for this. It’s kept me from accidentally publishing a few times. If you don’t like it, you can disable it frmo the check box at the bottom.
Zip chooses to ignore the ugly frownie faces of Yoast (which he won’t in future posts) and presses “Publish” again and…
Zip can go to his post and view it live. It’s available for the world to see!
And it’s available on the front of the site as well. You’ll note that it cuts off and has a continue reading button where Zip put the “More” block.
So Zip has made progress on his blog. That sums up our post on the basic technical aspects of how to write a post in WordPress and using the WordPress block editor. Whew. Time for a serious nap. the next post won’t be so long.
We are sorry that you found this post to be like a weak cup of decaf.
Let us improve this post!
Tell us how we can improve this post?
- but mostly for my attempts at book writing (and do NOT ask me how that’s going!
- Sad for him that I caught a video of this. Lucky for him that I didn’t actually eventually post it to TikTok. My daughter doesn’t like to travel and thought watching him do that was the most “magical” part of our trip to Italy.