Block Editor Overview

Reading Time: 5 minutes

WPW_08.12.20

With a WordPress site, it’s so simple to add content to your site, and anyone can learn to do it! We want to walk you through the basics of adding pages and posts to your site and arraying your content in a pleasing way.  The editor in WordPress is easy to use and functions similarly to other tools and apps you might already be familiar with. In this post, we’re going to walk you through the basics of accessing and navigating the page editor.

Getting Started with a New Page

To create a new page, hover over “Page” on the left-hand navigation menu in your WordPress dashboard and then select “New.”

The editor will automatically add two blocks to a new page (or post), which are the title and a paragraph block. You’ll see “Add title” where you’ll enter the title. Simply add the cursor to the title field and start typing. Once you’ve added your title, move to the next block “write your story” to begin writing content for the page. Again, simply move the cursor to the field and start writing. When you stop typing, a toolbar will appear above the block. The toolbar includes basic settings like block type, paragraph alignment, styles, hyperlinking, and more.

“Add Title”

You’ll notice that there are two areas on the editor page which contain your options for displaying and editing your work – one on the top of the page, to the left, and another down the right-hand side of the page. Let’s walk through those options, one menu at a time.

Adding Blocks

The first icon in the top left corner of the WordPress editor is the “plus” sign, which will add a new block. When you click on the plus sign, a small window pops up with your options for the next block, such as heading, image, quote, etc. Simply click on the name/icon of the type of block you want to add, and WordPress will add it as the next block.

The next two icons, to the right of the plus sign are the “undo” and “redo” edits arrows, which can be used to “rewind” or “fast forward changes” with each click.  The next icon is an “i” with a circle around it. Click the i to show the structure of the content on the page. This is a new feature will tell you how many words, headings, paragraphs, and blocks are on the page.

Add a New Block
Undo, Redo, and Information

Viewing and Publishing Your Work

Once you’ve completed working on the page, you can preview changes before publishing it to your website by clicking on the “Preview” button, which appears on the top right. When you’re confident your page is ready to go live, click the “Publish” button to push the page to your site. Later, if you decide to make a change on this page, when you re-enter the editor, that button will display as “Update,” as the page has already been published. “Update” saves and publishes revisions you make to the page.

To the right of the preview and publish buttons, the “Settings” button (the little gear) appears, and it controls whether the setting sidebar to the right of your editor, appears while you are working in the editor. Click it to hide the sidebar when you prefer a clutter-free writing space. When you click it a second time, the sidebar will reappear.

The settings menu

Additional Page Controls

The button on the far right of the top bar – the three dots – is for additional page controls. The first set of controls allows you to adjust what your writing interface looks like. The “unified toolbar” places a fixed toolbar at the top of the page, so it’s always there for easy access.

Additional Page Controls

Next, you have the option to shift into spotlight mode, which accomplishes two things. First, it fades all blocks except the one you’re working in for greater focus. Second, it reveals a block specific toolbar directly above the block you’re working on.

As with before you can stop typing or click into a blog to reveal toolbar options. Full screen mode creates a distraction free writing space by hiding the default WordPress sidebar from the left side of the screen.

The second set of controls allows you to adjust the editor mode. “Visual” shows how you’re building blocks of content in a way that closely reflects how they will appear on the live site. “Code” editor allows you to work with HTML for advanced customization.

The third set of controls contain a variety of tools that you might need, including keyboard shortcuts you may want to use for common actions. “Global” shortcuts enable you to adjust the editor settings, “selection” shortcuts enable you to quickly add or change blocks, and “text” formatting enables you to quickly apply toolbar settings to paragraph blocks. To close the dialog when you’re done retrieving the shortcuts you want to use, simply click “Close.” A final action you can use from this set of controls is to all content, which will save everything to your clipboard for use elsewhere.

Right Sidebar Tools

There are two kinds of settings you can adjust from the right sidebar, “document” and “block.” In document settings, you can adjust status and visibility settings, which includes public or private visibility. Next, you’ll see settings for the published date, a checkbox to show whether the page or post is pending review, and the author assignment. You can even put the entire page in the trash from here!

Finally, you can also set a featured image, allow comments for discussion, and set the order under page attributes. When creating posts, you also have options for categories and tags in the section.

Discussion Settings

Block settings may also be adjusted from the sidebar. However, in order to reveal block settings, you have to click into one of the block elements you’ve created in the editor to bring up your options. These settings include attributes specific to the type of block you’ve selected.

Wrapping Up

Now that you know your way around the editor, you can start playing around with creating (or editing!) pages and posts. Stay tuned for more specific tips for working with blocks in the WordPress Editor!

Leave a Comment