WordPress.org
Get WordPress

How to Create a Post or Page with the WordPress Block Editor

The WordPress Editor uses blocks to transform the way you create content: it turns a single document into a collection of components for adding content.

With blocks, you can quickly add and customize multiple media and visual elements that used to require shortcodes, custom HTML code, and embeds. Blocks make it easier to create media-rich layouts on your Pages and Posts.

Objectives

After completing this lesson, participants will be able to:

  • Create the content for a Post or Page using blocks.
  • Design an advanced layout using multiple blocks

Prerequisite Skills

Participants will get the most from this lesson if they have familiarity with:

Readiness Questions

  • Do you want to add content to your website?
  • Have you felt confused about how to layout the content on your website?

Materials Needed

Notes for the Presenter

  • Participants may be entirely new to using WordPress, or be familiar with the classic editor.
  • Focus on just using blocks. Additional lessons are available for these topics:
  • Participants will need time to practice moving blocks and different ways to add blocks
  • Indicate that Blocks will become part of the interface throughout all of the WordPress experience with Full Site Editing and that other content management systems have begun to adopt Gutenberg Block Editor as well, such as Drupal have also begun to adopt Gutenberg Block Editor.

Lesson Outline

  • Demonstrate 3 ways on how to add a block
  • Review Block Editor terms
  • Demonstrate how to move a block and to delete a block
  • Show an advanced block layout

Exercises

Create an advanced Block layout. Practice putting multiple blocks together to form a layout. Show this as an example layout to recreate.

Assessment

There should be one assement item (or more) for each objective listed above. Each assessment item should support an objective; there should be none that don’t.

What are Blocks?

  1. Components for adding pre-designed content to your website
  2. How we edit Posts, Pages, and other areas within our website
  3. Code that enables media-rich layouts
  4. All of the above

Answer: 4. Correct answer

How can I add a Block to my layout?

  1. Inserter  +  right of an empty block
  2. Inserter  +  in the Top Tool Bar
  3. Inserter  +  in the center between blocks
  4. Slash command in an empty paragraph block
  5. 3-dots ( More options) Menu on Block Toolbar
  6. All of the above

Answer: 6. All of the above will insert a Block

Default blocks include these types of Blocks EXCEPT:

  1. Text
  2. Media
  3. Design
  4. Widgets
  5. Embeds
  6. E-commerce

Answer: 6. E-commerce

Additional Resources

Example Lesson

How to Insert a Block to the WordPress Editor

There are multiple ways to add a block, search and choose the block type you need.

  • Inserter  +  right of an empty block
  • Inserter  +   in the Top Tool Bar
  • Inserter  +  in the center between blocks
  • Slash command in an empty paragraph block
  • 3-dots ( More options) Menu on Block Toolbar
Select the Inserter ⊞ to add a new Block to the WordPress Editor
How to add Blocks to the WordPress Editor in a Post or Page
Selecting Browse All will open the Block Inserter at left.
View Blocks within the Block Inserter
Select the 3 dots on the right side of the Block Toolbar to add a block before or after the current location
Typing / at the start of a line will open frequently used Blocks. Continue typing the type of block you want, such as /image.

Some Markdown commands are supported to add a Block, such as ## for Heading 2 or * to start a bulleted list. Likewise, copy/paste from a Markdown file or Google Docs will convert to Blocks generally well.

Block Editor Terms

Screenshot of Post Editor displaying a paragraph block and the block settings sidebar
  1. Block – The abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.
  2. Block Inserter – Primary interface for selecting from the available blocks, triggered by plus icon buttons on Blocks or in the top-left of the editor interface.
  3. Block editor content area – The WordPress editor experience uses blocks to determine content layout.
  4. Settings Sidebar – The panel on the right that contains the document and block settings. The sidebar is toggled using the Settings gear icon. Block settings are shown when a block is selected, otherwise document settings are shown.
  5. Block categories – These are not a WordPress taxonomy, but instead used internally to sort blocks in the Block Library. See https://wordpress.org/support/article/blocks/ to explore each of the blocks within these block categories.

Common Block Toolbar Options

Each Block Toolbar will have unique options
  1. Change Block Type
  2. Drag and drop (click and hold) to move the Block up or down rows within the document
  3. Use the up and down toggles to move the Block up or down a single line
  4. Change text alignment
  5. More settings available
  6. Options

Moving the Block Toolbar

If you would prefer the Block Toolbar to dock to the top of the editor, you can toggle the setting on via Options.

Within the Options settings, toggle Top toolbar

Lesson Wrap Up

Blocks are a way to add various components, or pre-formatted portions of layouts, to your website. This can help you achieve just the look you envisioned without needing to touch code. Blocks make it more efficient to write your content.

💡 Follow with the Exercises and Assessment outlined above.