WordPress Blocks Editor Guide for writing Content

For vintage WordPress users, the new Gutenberg blocks editor can be overwhelming (to say the least). Since it is a radical change – starting with blocks can be an uncomfortable experience (change isn’t easy, right?).

Even when I tried blocks editor for this first time, nope this is not for me. I installed the classic editor plugin to disable the blocks editor and got back to the ‘normal’ working in the classic editor. This has been the story for a lot of WordPress users. However, soon the blocks editor will be the new ‘normal’ for the majority of WordPress users.

For existing users: its about the mindset

For existing WordPress users, it’s all about the first step that requires the most effort ‘mind-wise’ to get into blocks comfort zone. The first attempt of working with blocks editor is like this so confusing, too many button and options – I am out of it.

Guess what, you need to revisit it 2-3 times to get over the initial discomfort. Soon, the comfort level will rise and mind (and heart) will begin to like the blocks editor.

Comparison: Classic Editor vs Blocks Editor

The classic editor just has a single editor window where you write all the content. The whole thing is restricted to “one block” of content. The buttons toolbar at the top of the editor box is used for customizing contents, adding images, and so on.

Whereas blocks editor contains multiple blocks which can work independently within the whole content layout. For example, the main content elements are all independent blocks like headlines H2, H3, images, videos, paragraph text, and much more.

#1 In blocks editor, you can easily move any element say an image with simple drag and drop action. Whereas in the classic editor it is all manual copy-paste.

#2 The content layout in blocks editor can have different width like a few content sections can be full width, less width, in multiple columns. In the classic editor, everything is the same width restricted to one boxed look.

#3 Blocks editor opens up the ability to add more variety of elements into post content like social sharing buttons, email sign up boxes, styled content boxes without the need for additional plugins. In classic editor, we usually end up using shortcodes generated by external plugins for such implementation.

Main components of the Blocks Editor

Blocks editor works for both posts and pages (and even for custom post types). In WordPress dashboard, go to Posts / Pages and click add new option to get started. Whole block editor can be visualized into 3 areas for a better understanding of features and functionality.

Area 1: Top with Toolbar & Buttons

The top area house a lot of options in the form of small icons (and buttons). The whole top can be visualized as two sections: top left section and top right section.

The top left section has a big WordPress icon which on clicking goes to “all posts” or “all pages” screen in the WordPress dashboard. This is followed by icons which house majority of blocks action elements.

1. The + button opens a panel displaying all the available blocks. To make things easy, blocks are arranged into different sections like most used, common blocks, formatting, layout elements, widgets, embeds, and more.
2. This is followed by curved arrows for undo and redo action for any activity you do in the blocks editor.
3. Then we have i (information button), which on clicking tells you the status of your content in terms of the number of words, paragraphs, headlines, blocks and the document outline.
4. Then we have block navigation button which allows you to quickly jump to a specific block by clicking on a block in the list.
5. The last button is for tools (you won’t use this much) to toggle between edit and select mode for specific blocks.

The top right section has all the action buttons for content preview, publishing, and other settings to customize your blocks editor panel.

1. The first ‘save draft’ button is for saving current content as a draft and not making it live (not publishing it yet).
2. This is followed by the preview button, clicking it will open a new tab displaying the preview of your current post or page.
3. Then we have a publish button to finally publish content created using the blocks editor.
4. Next is the gear icon which is activated by default. Clicking it will remove the floating right sidebar. This is handy for distraction-free writing.
5. The last icon with three vertical dots brings up a lot of options categorized under sections like view, editor, tools.

Area 2: Right Sidebar with Options

The right sidebar has two tabs which holds all the options you would need while using blocks editor. The default document tab has all options for the document (post or page) in question. While block tab displays options for the currently selected block.

The document tab display options that is applicable to the whole post or page that you are creating using the blocks editor. Spend some time and go through each section one by one. It has status & visibility, permalinks, categories, tags, featured image, excerpts, discussion, and post attributes.

You can also enable or disable any of these by click three vertical dots icon at the top right and then ‘Options’ at the bottom. Then check or uncheck the specific option you want to display or hide.

The block tab options will change depending on the currently select block in your blocks editor. Like for paragraph block you would see settings for font size, colours, and CSS classes.

Area 3: The main Blocks Editor

This is where you will write all the content along with image and other media elements. Unlike classic editor, this is a big white space to allow easy focus and drop & drop of blocks as per content requirements.

To get started, go to pages or posts and then ‘add new’ to start a new page or post. Alternatively, you can also edit an existing post or page.

1. By default, you will see ‘add title’ on the screen. This is the place to add post or page title and this section cannot be moved. Also, this has limited customization options (as against other headlines that you can add further down).
2. After adding the title, you can just start typing under it and it will automatically add a paragraph block.
3. If you want to add something other than paragraph text, then click + icon to add a specific block. You also press backslash / key to quickly access most commonly used blocks.
4. You can move blocks by clicking the top and down arrow keys or just press the middle button to drag and drop to the required place.
5. Click to select a specific block to access the block level settings to the top part and more under the ‘block’ tab on the right sidebar.

To access settings of additional plugins like Yoast SEO or any other SEO plugin, scroll to the bottom of the blocks editor or click their respective icons at the top right part of the screen.

Columns Layout in Blocks Editor

Besides the usual text formatting blocks like headline, paragraphs – blocks editor allows you make specific columns layout to organized content in more elaborate format as against simple one column boxed layout.

1. Click on the + icon and then check the ‘Layout Elements’ section.
2. It has a variety of blocks like page break, columns, spacer, group, buttons, media, and more.
3. For example to split your one-paragraph text into two columns paragraph, click the columns blocks and select 2 columns layout. Then add paragraph block in each column.

Layout blocks option opens up blocks editor to design page layouts. With the help of more options via third party Gutenberg Blocks Editor Plugins you can design a complete website (almost) using blocks.

Should I start using Block Editor

As of today, I only use blocks editor for blog post content. Even this post was written using blocks editor. Of course, the next use case would be using the blocks editor for website layouts. A lot of non-geeky users will find layout building with blocks difficult as of now.

However, with blocks editor getting better with more user-friendly enhancements and the third-party blocks addons ecosystem flourishing, the blocks party has just started!