Using the WordPress block editor has elevated the way I write my blog posts.
I switched to the block editor back when it was first introduced and never went back. It did have a ton of bugs and options missing but it was still an improvement from the classic editor, for me. It has come a long way since then.
Today, I’m going to convince you to switch to the WordPress block editor, also called the Gutenberg editor, and never look back. To help, I’ll also give some good tips. Let’s go!
5 Reasons Why You Should Switch to the WordPress Block Editor
- It makes writing blog posts easier
- It takes care of spacing for you
- The ready-made blocks are a godsend
- It follows the basic guidelines of design principles
- Posts are easier to format with the block editor
- Bonus reason: updates!
1. It Makes Writing Blog Posts Easier
A popular notion about the block editor is that it makes writing blog posts harder because it involves a little extra work compared to the classic editor.
Let me to hit you with the hard truth: it’s only difficult because you’re used to the classic editor.
One of the principles when designing user interface is to not start with bad design, even if it means delivering the product faster. That’s because users will become used to bad design, even if it actually hinders their work.
Humans resist change and we easily pick up things that are familiar to us. Look at all the apps you use. There are some very common design aspects among all of them which ensure that if you do try out a new app, it won’t be too hard to use because you are familiar with how notification alerts look and what different icons mean.
The block editor may be difficult to use because it is new but if you let yourself actually play around with it and get familiarized with it, you will realize that it is a much better tool to use.
Here are some specific points on how it helps the process:
- Blog posts are easier to outline with blocks. You can quickly place things and set the overall flow of the post. You can also play around and rearrange blocks easily to figure out what works best.
- The classic editor doesn’t allow placing a set structure which you can later edit parts of. The block editor lets you put blocks for images and quotes without actually putting the specific content in, and doesn’t let your writing flow break with formatting requirements.
- It is convenient once you get used to it. Sure, figuring out the shortcuts and how change properties of different blocks takes time. But once you do? Nothing can stop you. My fingers barely leave the keyboard, and I don’t even notice the small bits of formatting that I do when writing.
2. It Takes Care of Spacing For You
In any article, spacing is very important. The content is the core of the article, but you also have to let the post breathe and give some space to separate different points. Blank space in articles can be compared to negative spaces in art.
With the classic editor, YOU have to worry about the spacing between paragraphs and between media. After writing the content and adding everything in, you have to go back and make sure that there is enough “breathing” space.
When I used the classic editor, I was always annoyed by the spacing between paragraphs. Hitting enter (going to the next line) once was not enough and hitting enter twice was a little too much.
The block editor is magical for me because it takes care of the spacing between different blocks. And the spacing is perfect. I know that no matter what theme I use, the spacing between blocks will be fine because the block editor takes care of it.
And the best part? It takes care of appropriate spacing on ALL screen sizes. You don’t have to worry about it AT ALL.
(Look at me, geeking out over spacing and dedicating an entire point for it lol. It may sound trivial, but it’s actually very important.)
3. The Ready-Made Blocks are a Godsend
One of the main features of the block editor is the array of block options. From normal blocks like headings and paragraphs to complicated blocks like columns and galleries—the block editor has it all available at your fingertips.
The block editor basically says “let me handle the HTML, you focus on the content.”
I’ll be honest, I used to struggle with HTML. Not because I didn’t like it or didn’t know it—HTML is honestly quite easy and a lot of it is available on the internet. But I did not like spending time on HTML when I wasn’t not in the mood for it. Also I’m quite lazy.
But when using the classic editor, it was not optional. Every post required HTML editing and formatting in order to look aesthetic.
With ready made blocks to embed any sort of social media posts to different sizes of columns, the block editor gives an easy interface to make your post look better without fiddling with HTML yourself.
How ready-made blocks help:
- They save time. You don’t have to go searching for the right HTML codes and you don’t have to spend hours tweaking until everything is just right.
- Reusable blocks save even more time.
- You can easily play around using the interface and be confident that nothing will break. Especially when it comes to complex blocks like galleries and columns, which would take quite some time on HTML.
- The automatically adjust according to screen sizes. Depending on the device and screen dimensions, blocks rearrange themselves appropriately. You don’t have to worry about it.
- They encourage you to try new things. I definitely would not have tried “click to tweet” or columns without the block editor. But I did because it’s easy to use and manipulate.
The best part about blocks, though? If you do want to take care of the HTML yourself, you can. You can easily switch from the visual editor to the code editor (either using the three dots on the top right corner or using the shortcut ctrl+alt+shift+m) and play with HTML.
You can also localize the customized area to a specific block by using the “HTML block”. This lets you add in your own HTML code only in one place and let the rest of the post be.
Some interesting blocks that I recommend playing with:
- Image Gallery
- Image Compare
4. It Follows the Basic Guidelines of Design Principles
A lot of people complain about how the block editor is restricting. But that’s because it makes you follow good design principles.
The people at WordPress have done their research and have incorporated basic guidelines into the block editor, and discourage you from breaking those guidelines (by making it slightly restricting) so that your post will be good.
Instead of taking the restriction as a something the block editor fails at, consider it as the block editor trying to save you from lowering the quality of your posts.
By using the block editor, your post already follows some guidelines due to which your post is already better.
If you still want to break those rules, you can use HTML to tweak as usual. But in most cases, I suggest using it. At least, consider why the block is hard to change, and carefully consider whether changing it’s format will actually elevate your post.
For example, I saw someone complaining about how the star rating block stands alone and that they can’t put the stars in a line with words. I would say that the block editor is right. The stars don’t stand alone, they stand out. If you put them with words in a line, they don’t stand out as much.
Here’s a comparison of both so you can see what I mean.
My rating: ★ ★ ★ ★ ★
The words “my rating” also take up space and attention. Why add them when the intention of the stars is clear? If it is not clear, yeah text is required. But if you’re using it in a review, it is assumed that it’s a rating.
If you want another way to do it and still keep the design intact, here’s a suggestion.
The stars here still stands out.
If you’re skeptical about my point that the block editor’s design is good (and, honestly, works for everyone), play around yourself and see. Write a post and make two versions of it. One following what the block editor allows and another with the design that you want or with what the classic editor allows. I assure you, you’ll be able to see the difference.
5. Posts Are Easier to Format With the Block Editor
The block editor has a ton of features, and one of the main goals is to make formatting easier.
With the classic editor, I barely used to format because it took a lot of time and multiple trials before I was happy with the result. Formatting with the classic editor involved me shuffling text and images using copy-and-paste, trying many variations to add quotes such that they will stand out and look sophisticated, making sure there is enough spacing everywhere, and confirming that the content still flows properly at the end.
Now, with the block editor, I have found a formatting scheme that works for me and easily apply it throughout all my posts with little variation. In fact, I sometimes bulk format* while listening to an audiobook because formatting doesn’t really require me to use my brain much.
*format multiple posts at the same time. This is possible because all the content is already read and just formatting is left.
Specific reasons why formatting with the block editor is easier:
- All the frequently used formatting actions are easily accessible through the interface hence you don’t have to trouble yourself with HTML. Things like changing text sizes, text colours, background colour, and creating HTML anchors in the post required use of HTML before. Now it’s as simple as clicking buttons on the sidebar.
- It already does a ton of the formatting for you. For example, the star rating blocks are ready-made and easy to use. They’re formatted for both outlined and filled looks. Another such block is the buttons. It takes care of the border radius, margins, padding, and spacing between buttons. All you have to do is change the colour, if you want to.
A lot of bloggers detest formatting blog posts because it involves a lot of work. With the block editor, your work is largely reduced. With the time you save using this editor, you can further elevate your posts by using some fancy blocks available.
Bonus reason: Regular updates & new features
The classic editor did not get updated at all. It’s features and look stayed the same.
The block editor regularly gets updated with new tools and features based on feedback from users.
There is an entire feedback program (which is currently full) where users just give ideas and suggestions to improve the block editor. You can be sure that if something is broken/missing, it will be fixed/added.
To me, this is the BEST part of the editor. And the biggest reason you should start using it. You should always prefer tools that get updated than ones that stay consistent through changing times.
I started using the block editor back when it was first introduced and was still optional because I was intrigued. Since then, this editor has come a long way and includes many more features. I’ve literally witnessed it’s growth. And it’s going to continue growing.
If you had tried it sometime in the past and never tried it again because it didn’t look better, try it again now.
General Tips To Use The WordPress Block Editor
- Play around with it.
This is the most important tip. Everything else will come with it.
You can’t switch to something new and expect that it will be smooth sailing right from the start. Whether it a new phone, a new pair of shoes, and especially a new tool like the WordPress Block Editor.
Take out a couple hours during your weekend or on holidays and simply play around with the editor. Open a blank post and just try out the different blocks. Especially the common ones like paragraph, headings, image, quotes, and embeds. You can also write a small post to try it out.
Another way to familiarize yourself with it is to convert an old post and format it using the block editor. That will help bridge the gap between the classic editor and the block editor for you. You will also understand what blocks you are most likely to use, and you can focus on that.
- You don’t have to use all the features.
The editor has to be versatile and include a variety of blocks because people who use WordPress have many different kinds of websites. Hence, the block editor has tools for regular bloggers, professional bloggers, business websites, catalogs, and more.
Just because it has all these options doesn’t mean they all have to be used. Many people feel like using things simply because they’re available. Don’t do that. It will turn out to be another headache for you.
Figure out what blocks will work for you and stick with them. Ignore the rest. If you want to use the others sometimes, that’s fine. But make sure they will actually help and that they fit your blog/website.
- Use ready-made blocks and customize instead of starting from scratch.
The block editor has all kinds of blocks for you to use. Don’t waste your time starting from scratch to set up something. Look for a similar existing one and customize it using HTML. Customizing requires less effort compared to doing everything yourself.
Sometimes when customizing, the block editor might not accept it and can tell you to revert back to the original. As I said earlier, this is to help you stick to the design guidelines.
But if you’re sure about your change, it’s easy to disregard the editor’s alerts. Simply convert the block to a HTML block, and it won’t bother you anymore. You can check the final output using the post preview option.
For example, I customize my “click to tweet” blocks so that they match my theme. It took me a couple tries to get it right and figure out the kinks, but now it’s super easy for me to do. Here’s a short video showing how I do it. P. S. since I’ve played around with the look and HTML code, I’m using a HTML code saved elsewhere for reference.
Text explanation for the above video: choose a click to tweet block. Add the account that should be tagged when the Tweet is shared in the username box. Enter your Tweet text inside the block. Choose the option to edit the block as HTML. Edit the HTML code with whatever you want to change (I’m changing colour, border, margin, and padding). If the block editor flags the block as “this block contains unexpected or invalid content” before you’re done editing, choose the 3 dots and say convert block to HTML. Continue editing. See the final product through the post preview option.
Important note: when you convert a block to HTML block, the editor will stop interfering with the block. Hence, it will not do any automatic formatting for it. It will also not show the preview in your editor, so you’ll have to select the preview button on top to see the final product.
For my “click to tweet” blocks, I have to manually change the URL and reference link inside the HTML if I change it for the post. The editor will do it for me if I don’t do any customization and let it handle things. But if I tell it stop interfering, I have to take care of everything myself.
Specific Tips To Use The WordPress Block Editor
I’m calling this specific tips because it includes specific functions and how-tos for the Block Editor. I’m adding in whatever I can think of and was asked to add by other blogged on Twitter. If you have any other functions that you struggle with and want me to show how to do them, let me know and I’ll add it in!
P. S. I’ll try to help through both text explanation and visual tutorial for everything so that this post is accessible.
- Adding a picture next to text.
Or: including pictures side by side with text.
This is something that I used to struggle with, and one I’ve seen many complain about. The feature to do this wasn’t actually there in the beginning. The WordPress team added it in one of the updates, presumably after hearing feedback about it.
Add an image block first. After it, add a paragraph block (with at least one word in it so the editor recognizes it as a text block). Now click on the image block and in the mini toolbar that appears, there is an icon for “change alignment” in the second column. Click on it. You will get a mini pop-up menu with options “align left” and “align right”. Once you choose either options, the editor will automatically rearrange the image along with the paragraph block below it.* You can drag the edges to resize the image.
Align left -> image should be to the left of text.
Align right -> image should be to the right of text.
*for CSS nerds: it basically changes the “float” property of the block.
Here’s a short video showing how to do the same.
“Align center”, “wide width”, and “full width” options are to change alignment/presentation of the image alone.
- Align embeds to the center.
Embeds are things added into the post from other places. Basically, Tweets, Instagram posts, Pinterest pins etc. inside a blog post are embedded in the post.
I don’t remember how it was with the classic editor because it’s been so long since I used it, but aligning embeds in the block editor is technically impossible. I’ve tried using the alignment option but it doesn’t center the embed. They always stay to the left.
After fiddling around with things, I’ve figured it out! Here’s how you can align embeds to the center.
Add a “columns” block, choose one with 3 columns. For Pinterest embeds I use the 33/33/33 one and for Tweets and Instagram posts, I use 25/50/25 since pins are narrower. If you want to embed an Instagram post, choose the Instagram block to go in the middle column. Leave the left and right columns empty. Paste the link of what you want to embed, and voilà! The embed is perfectly centered.
Here’s a video showing the same.
- Make page jumps.
Page jumps are links which lead to another section within the same page i.e. jumping to another area in the page. This is done through HTML anchor tags. Before, I used to do them through HTML code and fiddle around with spacing because it never jumped how I wanted it to.
Now, it can be done easily through the user interface. (I even did it for this post, if you noticed the index at the beginning)
Select the block you want to jump to. On the sidebar of the editor, expand the “Advanced” section. There is a box titled “HTML anchor”. Give a name for the anchor. It should be unique within the page, because it will act like a unique link. Once that’s done, go to the block you want to jump from. Select the text which should act like a link. Click the link button in the small toolbar, and add the HTML anchor name you had given. If the name you gave was “anchor-tag”, the link should be “#anchor-tag”. Done!
Here’s the video tutorial:
Note: the page jump will not be visible through the preview option within the editor. Choose “visit the site” so that the preview opens in another tab, then you’ll be able to try it out.
Bonus tip: the page jumps to the point after the block’s starting point. So if you want to jump to a block which is small (like headings and short paragraph blocks), give the anchor tag to the block before it. This way they’ll be seen on the screen. You can play around and check out what you like best, but this is what I do.
I hope that you’ve gleaned some new information and help from this post!
If you liked this post, please consider sharing it or pinning it to Pinterest using the embed below. This post took me several days and too many hours, so I’d really appreciate any boosts.
Other helpful posts that you might like:
1. Make Blogging Easy: 5 Steps to a Great Blog Post
2. How To Consistently Blog Without Tiring Yourself Out // Blogging Tips
3. 10 Things I Learnt from 5 Years of Blogging
Do you use the WordPress block editor? How has your experience with it been?