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:

• Basic WordPress Concepts
• Posts vs Pages

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

• Access to write a Post or Page in a WordPress powered website
• Alternative: use the demo site for Gutenberg

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:
  • Categories vs Tags
  • Posts vs Pages
  • Reusable Blocks
  • Block Patterns
  • Block Directory
• 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

• Adding a Block
• Types of Blocks
• WordPress Editor
• Block Editor Glossary

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

Block Editor Terms

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 Blocks: Paragraph Image Heading Gallery List Quote Audio Cover File Video
   • Formatting: Code Classic Custom HTML Preformatted Pullquote Table Verse
   • Layout: Page Break Spacer Buttons Columns Group Media & Text More Separator
   • Widgets: Shortcode Archives Calendar Categories Latest Comments Latest Posts RSS  Search  Social Icons Tag Cloud
   • Embeds

Common Block Toolbar 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.

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.