WordPress Block Editor: So far, you’ve learned that publishing online encompasses much more than just writing good texts. Great content needs to flow. It needs to have structure, sophisticated layout, and elegant design. And, in Module 2, you’ve seen how easy it is to create content with blocks.
In the previous lessons, we worked on creating a post in the back end. In this lesson, we will move to the front end and see some examples of posts made in the block editor. First, we’ll take a look at the post we worked on in Module 2.
Next, we’ll check out a post that Joost de Valk, the Yoast founder, and CPO, published on his blog. Finally, we will show you something a little bit different: a digital story made with the block editor. It is called Diversity, inequality, and prejudice; a sociological exploration.
A Digital story made with the block editor.
We, at Yoast, made it, and we are proud of it! So let’s start. In Module 2, we worked on creating a post. So, what did it end up looking like? Let’s go to the front end of our site and see. Here it is. Looks good.
There are many elements:
- Paragraphs
- Headings
- An image
- An article
- Lists
- A button
- FAQ
Yet, putting all of it together required no special effort. All we needed to do was use the appropriate blocks. Let’s scroll down to the bottom. We have the FAQ here; it looks quite nice. But it’s much more than just a nicely structured text.
What is Gutenberg | Block Editor Plugin for WordPress
As you saw in the last lesson of Module 2, when we discussed the Yoast SEO blocks, it also contains structured data, which leads to improved search results. And we have the block editor to thank for that. There’s an even better example of the kind of things you can do with the block editor on Joost’s blog.
Let’s take a look at his post “CMS market share: November 2019 analysis”. Specifically, let’s pay attention to the layout, flow, and design of the post. Take a look at this part. There are many elements here: a paragraph, a table of contents, a heading, a link with a preview, a list, and a box with some important information.
All of these elements are ordered so neatly. It is effortless for a user to navigate them. The quick access to additional information also adds to the quality of the post. When we scroll down, we see that the post features prominent and easy-to-read graphs.
Some Important Information about the Plugin
Also, whenever there is some important information, we get it packaged in attention-grabbing boxes. So, you see that this is much more than “just writing.” This post is a composition, a seamless blend of different elements that reinforce each other.
You know the best part. Yes, it was made with the block editor. It looks like it required a lot of effort. Maybe some designer skills, some coding. But, in reality, nothing fancy was needed. Just the block editor and its blocks. You may notice that the style or colors in Joost’s post look different from the post we made.
That’s just because Joost used a different theme. And that is another benefit of using WordPress. There are so many themes to choose from. And a lot of them feature layouts that, combined with the block editor, allow you to make great posts and pages.
If you want to learn more about themes, check out our WordPress for beginners’ training. We saved the best for last – the Yoast digital story, titled “Diversity, inequality, and prejudice; a sociological exploration.” Before we go into that, let’s explain what a digital story is.
In the context of online content publishing, it is a story you tell using a combination of media. For example, our digital story includes text, images, articles, animations, and interactive elements such as quiz and trivia cards. For the most part, in creating it, we relied on the default WordPress blocks.
As you can see, each section of the story stands out with a different background color. We were able to do this using a combination of blocks. You notice that some parts of the story contain a combination of images, articles, and texts.
Digital Story Parts in Block Editor
For some digital story parts, like the interactive sections, we used some extra plugins and some CSS. We used Advanced Custom Fields, a plugin that lets you add custom fields in WordPress to make the quiz cards.
How to Use WordPress Block Editor and Publish Post
Could you imagine publishing this kind of content before the block editor? It used to be quite hard. Big companies with big budgets could spend money on design, layout, and user-friendly posts in the past. The block editor has changed the game and made it possible for anyone, including you, to make rich, engaging, and useful posts and pages.
Let’s conclude. Whether you are a beginner, or a skilled writer and developer, the block editor offers a sea of possibilities. Although it is still relatively new, it is already changing the way online publishing works. So, we encourage you to go ahead and apply what you learned in this course. Experiment, play around with it, and create content people will be eager to read!