3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

The Block Editor was launched late 2018 and is a major change to the Classic Editor that WordPress users used previously.

Block Editor Inteface
The WordPress Block Editor

The Block Editor uses a totally different method by moving to a block-based approach and each item you add to your post or page is a block.  You can add blocks for each paragraphs, images, galleries, videos, audio, list, tables and more.

Each block is its own entity that you can manipulate, move and edit.  Since each block is separate your can add things like custom backgrounds or text to specific blocks. The block editor displays visual elements how they look on your site.

The new Block Editor looks different from the Classic Editor but it does all the things you could do with the Classic Editor as well as build more complex designs than those achievable with the Classic Editor.

A list of blocks available as well as how to use them can be found here.

Switch to Block Editor

You can switch to the block editor as follows:

1. Go to Settings > Writing.

Writing Settings

2.  Select Block Editor.

Select Block Editor

3.  Click Save Changes.

By default, only admin users are able to switch between the classic editor and the block editor.  If you want editors, authors and contributors to switch between editors you need to select Yes.

Switch Editors

This adds an option to change default editor to Profile > Your Profile for your other site users .

Block Editor Video

Block Editor Interface

Below is an overview of the elements of the block editor interface.

Block Editor Interface
  1. Add new block
  2. Undo/Redo
  3. Content structure: overview of content structure in terms of the number of words, headings, paragraphs and blocks.
  4. Block Navigation: can be used to navigate between the different blocks.
  5. Preview/Publish: live preview your post or publish/update your post.
  6. Settings: hide/reveal editor’s right sidebar.
  7. More: to show more view options, Editor style and additional tools.
  8. Document Settings: for adding things like categories, tags, featured images, excerpts. Similar to the sidebar of the Classic Editor.
  9. Block: access to additional settings options for the selected block.
  10. Area where you work on your post/page content.

Add a block

By default, the block underneath the post/page title is a paragraph block which you use for regular text and is designed to allow uses to start writing straight away.

To add a new block you click on the + icon at the left of any empty block or at the top left of the editor.

Add new block

Then click on the block for the type of content you want to add.  For example, if you wanted to add a photo gallery you would click on the Gallery icon.

Choose the block to add

Blocks are organized with the Most Used displayed at the top and if you scroll down you will see sections for Inline Elements, Common Blocks, Formatting, Layout Elements, Widgets and Embeds.  Search for the block you want to add or check each section to find the block you want.

Block Sections
  • Inline Elements: contains a block for an inline image.
  • Common Blocks: basic building blocks such as image, paragraph, heading, quote.
  • Formatting: for more formatted content like pull quotes, tables, or the Classic Editor.
  • Layout Elements: for layout elements such as split text into two columns, button, separator, the “More” tag
  • Widgets: for adding shortcodes, latest posts, categories.
  • Embeds: Embed content from external sources such as Twitter, YouTube, Facebook, Instagram.

You can add a block above or below the current block by clicking on the three dots just above a selected block and selecting Insert Before or Insert After.

Inserting block above or below a selected block

Move a Block

You move a block by dragging the block around by clicking and holding the six-dot-grid near the top left corner of the block or using the up and down arrow to move the block in the direction you want.

Move a block

Configure a Block

Each block has its own block specific controls that allow you to change the block directly in the editor.  You reveal the block’s toolbar by selecting the block.

Below is an example of the Image block toolbar.

Image block toolbar

Toolbar varies depending on block type and have been streamlined to only include the formatting options required for the content type your adding/editing.

List toolbar
List toolbar
Classic Toolbar
Classic Toolbar

Block Settings – Toolbar

For additional options click on the three dots to the right of the block toolbar:

Inserting block above or below a selected block
  • Hide Block Settings: closes the settings menu.
  • Duplicate: creates a second block on the same page with the same content.
  • Insert Before/After: adds a new block before or after the current block.
  • Edit as HTML: switches the block to the HTML version of it so you can edit the HTML directly. When editing as HTML, this option changes to Edit Visually.
  • Add to Reusable Blocks: allows you to create a block that can be used on other pages that retains the content and styling of the block.
  • Remove Block: deletes the block from your page/post.

Block Settings – Sidebar

Each block has options in the editor sidebar that may provide extra customization in addition to the options found in the block toolbar.  Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

Below is an example of the Image block editor sidebar options.

Image Settings in right sidebar

Change Block Type

You can transform each block into another similar or related block type by clicking on the Change Block Type icon in the block’s toolbar.  The Change Block Type icon is on the left hand side of the toolbar.

For example, you can change from an Image Block to a Gallery block by clicking on the Change Block Type icon.

Click on Change Block Type

Then click on the Gallery icon in the Transform to list.

Click on Gallery Icon

Remove a Block

Select a block, click on the three dots on the toolbar and then click on Remove Block.

Remove a block

Document Settings

The Document Settings in the sidebar on the right of the block editor is where you add tags, categories, set a featured image, change the visibility of the post, change post format, make the post sticky, see and change the status of your post and more.

Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.

Document Settings

Settings Sidebar Menu Video

More Options

You can customize your editing experience using the three dots to the right of the Settings Icon in the sidebar on the right of the block editor.

By default, the block editor loads in fullscreen mode and this can be disabled to reveal the main navigation.

  • View: controls where the block toolbars appear when you are editing.
  • Editor: By default the block editor uses the Visual Editor.  Selecting Code Editor enables you to view the entire page in HTML – same concept as clicking on the Text tav in the Classic editor.
  • Tools: Manage existing reusable blocks, copy all content to paste to another page, or learn about the keyboard shortcuts.
  • Options:  Controls which document settings are displayed in the right sidebar. The screen options located at the top of the page in the Classic Editor is now listed as Options in the More Options.