In the WordPress Editor, you will create content using blocks. Every type of element you could want to add has its own block: text, images, video, lists, files… You can also define the layout of a post or page with blocks: use columns, spaces, page breaks, and much more!

Adding a block

There are many block types for you to choose from, which you’ll see organized by category. You can edit or move each block independently of other blocks, and individual blocks sometimes come with their own formatting settings for even greater control over layout and function.

a screen recording of the different methods of adding new blocks to the WordPress editor.
Adding new blocks

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

💡

The quickest way to add a block is to look for the plus icon on your screen. Anywhere you see the plus icon, you can click it to add a block.

Or, start writing in a blank area, which defaults to a Paragraph block.

  1. Click the black + icon at the side of an empty block.
  2. Click the + icon at the top left of the editor. This option is great for previewing different block styles.
  3. Hit the Enter/Return key from a selected block to create a new block below it.
  4. Click on the three dots just above a selected block and choose to add a block above or below the current block.

Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.

example of using the / keyboard shortcut to search for different blocks.
Shortcut to add a block

Click on the + Plus icon in the Top Menu to access the block library. Your most used will show at the top of the library.

the block library expanded with the most used blocks displayed.
Most Used Blocks Category

Move Blocks

You can move blocks around by clicking and dragging the six dots in the block’s toolbar that appears when you click inside a block. You can also use the up and down arrows to shift a block one spot up or down.

Moving blocks

Customize Blocks

📌

If you don’t see the Block settings on the right of your editor, click the ⚙️ settings icon (that looks like a gear or cog) next to the Publish/Update button to expand the sidebar menu.

the Settings icon next to the Publish button highlighted.

Examples of Different Block Toolbars

Paragraph block toolbar that sits above the block.
Paragraph block toolbar
Image block toolbar that sits above the block.
Image block toolbar
List block toolbar that sits above the block.
List block toolbar

Block Settings – Toolbar

Click on the three dots to the right of the block toolbar for additional options that are present in most blocks.

  1. Hide Block Settings closes the settings menu.
  2. Duplicate creates a second block on the same page with the same content.
  3. Insert Before/After adds a new block before or after the current block.
  4. 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.
  5. 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. Learn more.
  6. Remove Block deletes the block from your page/post.
the ellipses (More Options) menu expanded to show the additional block options.
Additional block toolbar options

⚠️

Not all code will work when editing as HTML. If your code is well-formed and without error, check to make sure it’s on the approved HTML tags list, and that it’s not a restricted code, like JavaScript.

Block Settings – Sidebar

The Block settings on the right of your editor will provide different options based on what block you’re using.

In the screenshot to the right, the active block is a Paragraph, so the options include changing the font size, font and background color, and advanced options for creating page jumps or adding a CSS Class.

📌

If you don’t see the Block settings on the right of your editor, click the ⚙️ settings icon (that looks like a gear or cog) next to the Publish/Update button to expand the sidebar menu.

the Settings icon next to the Publish button highlighted.
the Block settings sidebar displaying the Paragraph block options like Text, color, AMP settings.
Block Settings in the sidebar include additional options specific to the block you’re editing.

Change Block Type

What if you’d like to change a block type? No problem! You can transform each block to another similar or related block type. For example, change a paragraph to a heading, a list, or a quote.

a screen recording of the block toolbar option to change the block type from a paragraph to a quote or a heading.
Changing a block type

Block Navigation (Selecting Blocks)

Some blocks are nested inside of other blocks (called their “parent” block) and you need an easy way to select the parent block. 

For example, you have a columns block that you want to make full width. Clicking on an individual column will not provide you with that option. Navigating to the parent block (the Columns block) will give you the option to change the layout style of the Columns block.

To select the parent block, hover over the icon showing on the furthest left of the block’s toolbar as in this screenshot:

a screen recording of hovering over the parent block option in the block toolbar.

This can be useful if you can have some text inside of a Column block and you need to select the Column block or if you have multiple buttons inside of a Buttons block and you need to select the overall Buttons block.

Alternatively, you can also use the Details Menu to navigate through the blocks you’ve added to your page/post:

the Details menu in the Top Menu expanded to show the list view of blocks used in the page or post.

The Details Menu is a dropdown list of all the blocks you have inserted into your page or post. It makes it easy to see the structure of your page and select an existing block you wish to work on.


To access the Details Menu, click on the icon that looks like a tiny bulleted list with three vertical lines. It is located after the content structure (information icon) in the top left corner of the editor.

The Details Menu is especially useful for navigating to hard-to-reach blocks, such as an individual column inside of a columns block or a block inside of a group block:

a screen recording of the Details menu expanding and selecting a specific block to activate the block.
Using the block navigation tool, you can jump directly to any block on the page to edit it.

Remove a Block

To remove a block, select the block and click the three dots in the toolbar right above it. Among the settings there you’ll see the option to remove that block.

the Block toolbar ellipses menu expanded to select the Remove Block option highlighted.

#to-do

s
search
c
compose new post
r
reply
e
edit
t
go to top
j
go to the next post or comment
k
go to the previous post or comment
o
toggle comment visibility
esc
cancel edit post or comment