Writing & Editing

WordPress Editor: Working With Blocks

The WordPress Editor is what you will use to create the pages and posts on your website. This page is a comprehensive guide on all the features of the WordPress Editor.

To quickly getting started, jump to how to add Content through Blocks, or choose one of our getting started tutorials here.

Table of Contents

The WordPress Editor with a cover block, text and a button.
The WordPress block editor

You can use the WordPress editor to create media-rich pages and posts and to control the layout with ease. Instead of worrying about the alignment and organization of text, quotes, and images, now every element on a post or page has its own block — and you can focus on creating.

If your editor does not look like what is described in this guide, check out this helpful information about the different editors.


Elements of the WordPress Editor

The WordPress Editor is made up of three main areas; the top menu, sidebar menus, and main content area.

WordPress Editor Top Menu

The options at the top of the editor for adding a block, publishing the post, and opening the settings menu.
WordPress Editor Top Menu

Top Menu Options

A plus icon to Add Blocks.

Add Blocks – browse all of the available blocks, block patterns, and reusable blocks.

The edit/pencil icon.

Modes – Tools offer different interactions for block selection & editing. To select, press Escape, to go back to editing, press Enter.

Arrow icons pointing to the left and right, to represent undo and redo.

Undo and Redo – Undo an action, or redo an undone action.

A lowercase I with a circle around it for an information icon, to show Details.

Details – the number of characters, words, headings, paragraphs, and blocks used in the document.

Three offset stacked vertical lines, to represent the document Outline.

Outline – a list view of all of the blocks used on the page. Useful for navigating to different blocks.

Before you’ve published your page or post, you will see these options:

Links with the text "Save Draft" and "Preview", with a button on the right that says Publish.

Save draft – save a draft of your page or post
Preview – see what your page/post looks like with the theme applied.
Publish – publish your page/post.

After you’ve published your page or post, you will see these options:

Links with the text "Save Draft" and "Preview", with a button on the right that says Update.

Switch to draft – unpublish a page or post and switch it to a draft.
Preview – see what your page/post looks like with the theme applied.
Update – update your published page/post with the newly added content.

A settings icon that looks like a gear or cog.

Settings – display or hide the Page, Document, and Block Settings sidebar menu.

An icon with an A in the middle of it, for Global Styles, where you can change fonts.

Global Styles – if you’re using a Theme that supports Global Styles, this option allows you to change font styles for your entire site.

A green and white icon for Jetpack, where you can access more settings.

Jetpack – allows you to turn on/off likes and sharing for individual pages and posts, preview your social sharing, and get the Shortlink to your page or post.

Three vertical dots icon, which you can click to show more options.

Options – opens View options, Editor style, and additional tools.

WordPress Editor Sidebar Menu

The Settings, Global Styles, and Jetpack icons in the top menu open different sidebar menus.

📌

If you don’t see a sidebar menu when you’re in the Block Editor, click one of the three icons in the Top Menu next to the Publish/Update button.

Settings

The Settings sidebar menu includes your Page/Document settings:

When you click on a specific block, the Settings sidebar menu includes additional Block settings specific to each block type.

The top menu with the settings icon active will show a gear icon with a black background.
Settings Icon

Global Styles

The Global Styles sidebar allows you to change the default fonts used for the Headings and Base fonts throughout your entire site.

The top menu with the Global Styles icon active, will show that A button highlighted.
Global Styles Icon

Jetpack

The Jetpack sidebar menu allows you to:

The top menu with the Jetpack icon active, will display the icon with a black background, highlighting that it's active.
Jetpack Icon

WordPress Editor Content Area

The third element of the WordPress Editor is where you will spend most of your time. This is the main section of the editor, where you add blocks of content.

The editor brings with it an effortless page- and post building experience. With blocks, you can quickly add and customize multiple media and visual elements that used to require complicated shortcodes, custom HTML code, and embeds.

💡

You can also start writing right away and think about your page layout later (or, not at all!)

Here’s a great guide for using the WordPress Editor as a Writer or Blogger.


↑ Table of Contents ↑

Add Content through Blocks

In the WordPress Editor, you will use blocks to create content. There is a block for every type of element you could ever wish to add: text, images, video, audio, columns, spaces, page breaks, payment buttons, calendars, and much, much more!


↑ Table of Contents ↑

Add 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 showing blocks added with the plus sign in the 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.

An example of using the / keyboard shortcut to search for different blocks. The letters "ima" are typed and the first result in the list is Image.
Shortcut to add a block

See Your Most Used Blocks

To enable the most used blocks category, follow these steps:

  1. Click the ellipses icon (the three dots) in the top right corner of the editor screen.
  2. Choose Preferences.
  3. Check the box next to Show most used blocks.
The General Preferences with "Show most used blocks" checkbox checked. It is the second option displayed.
Show most used blocks

Once the most used blocks option is selected, you can browse the blocks you use the most through the block library.

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 has sections for Blocks, Patterns, and Reusable. The Blocks section will show the most used first.
Most Used Blocks Category

↑ Table of Contents ↑

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.

A gif displaying how to click and hold onto the Drag icon, the icon with 6 dots in two columns. A block is then dragged up with the handle.
Moving blocks

↑ Table of Contents ↑

Customize Blocks

Each block has its own settings. To find them, click on a block and this will reveal a toolbar at the top of the block. You’ll also find additional settings in the sidebar to the right of the editor.

📌

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 is to the right of the Publish button.

Examples of Different Block Toolbars

Paragraph block toolbar that sits above the block, with options for alignment, styling the text, and more.
Paragraph block toolbar
Image block toolbar that sits above the block, with options for alignment and to choose a new image.
Image block toolbar
List block toolbar that sits above the block, showing options for list style, text formatting, and more.
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 (three horizontal dots) 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. It is to the right of Publish.
The Block settings sidebar displays the Paragraph block options like Text, color, AMP settings. Each section can be opened for more options.
Block Settings in the sidebar include additional options specific to the block you’re editing.

↑ Table of Contents ↑

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. In the recording, the Heading symbol is clicked and a dropdown opens to choose a new block, with the words "Transform to."
Changing a block type

↑ Table of Contents ↑

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, if 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.

Clicking inside a block that has a parent block will show a button offset to the left of the block settings toolbar — selecting that button will select the parent block.

Highlighting the parent selector button, offset to the left of the block settings toolbar.

This can be useful if you can have some text inside of a Column block and you need to select the Columns 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 Outline button to navigate through the blocks you’ve added to your page/post:

The Outline menu in the top section of a page, expanded to show the list view of all 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 Document Outline, click on the icon that looks like a tiny bulleted list with three horizontal lines. It is located after the content structure (information icon) in the top left corner of the editor.

The Document Outline 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 Outline menu expanding and clicking a specific block to select the block in the editor.
Using the document Outline tool, you can jump directly to any block on the page to edit it.

↑ Table of Contents ↑

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 will show Remove Block as the last option.

↑ Table of Contents ↑

Block Patterns

Block Patterns are a collection of blocks that you can insert into posts and pages. They’re a quick way to add content in visually appealing patterns.

For example, there is a block pattern to insert three images side by side.

To insert a block pattern:

  1. Click the + icon in the top menu to add a new block.
  2. Click on the Patterns tab.
  3. Click on the pattern you wish to insert and the pattern is inserted in the document at the location of your cursor.
The plus icon in the top menu will show a Patterns section. When selected, it shows the different block patterns available.

For more information, check our guide to Block Patterns.


↑ Table of Contents ↑

Preview the Page or Post

Even though the block editor gives you a visual representation of what the page will look like when it is published, there can be small changes to the look once the theme or theme customization is applied.

The Preview option with a box highlighting it.  It is to the left of Update.
The Preview option in the Top Menu

The Preview option loads the page you’re working on, along with the theme and saved theme customizations (like custom CSS).

Preview also provides the option to see how your page or post will look on a desktop, tablet, or mobile device. With the WordPress Business plan or higher, you can also preview how your page will look in search and social shares.

In the Preview option, you can click the dropdown where it says Desktop to see the list of other options.
Preview in different devices

↑ Table of Contents ↑

Document Settings

To the right of the Block Editor the Document Settings menu is where you can add tags and categories, choose a featured image, see and change the status of your post, and more — these are options that apply to the page or post as a whole.

Click the down arrow next to each header in Document settings to edit those specific options.

The document settings sidebar shows a list of options for the overall page or post, rather than each block.

📌

If you don’t see the Documents Settings to the right of the Block Editor, click the gear/cog settings Icon ⚙️ in the top right to open the Document Settings.

The Settings icon next to the Publish button highlighted. It is to the right of Publish.

↑ Table of Contents ↑

More Options

Customize your editing experience to suit your needs through the three dots to the right of the Settings icon.

View

Provides options for where the block toolbars appear when you’re editing.

Editor

By default, you’re in the Visual Editor. Switch to the Code Editor to view the entire page in HTML code.

Tools

Manage existing reusable blocks, copy all content to paste to another page, or learn about the keyboard shortcuts.

Options

Choose what document settings show up in the sidebar.

When the ellipses menu in the top toolbar is expanded, it shows the editor view, editor, plugins and other display settings for the block editor.
More Options

↑ Table of Contents ↑

Frequently Asked Questions

How do I edit HTML in the WordPress Editor?

There is a Custom HTML block you can add if you want to create your own HTML code.

Other options for editing the HTML code in the WordPress Editor can be found here.

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.

How will my existing content look?

If you’ve switched from the classic editor to the block editor, your current content should look the same as it did before. If you edit an existing post or page in the new editor, all the content will be placed in a Classic Block, which will treat it the same way that the previous editor did. Here’s more information on converting to blocks.

Why doesn’t my content look the same in the editor and on the site?

You may see some variation between your content in the editor and on the site, largely because of the way your theme displays different visual elements. Some themes will include styles to help the editor look more like the front of the site; others will not. If your theme includes a sidebar, for example, you won’t see it in the editor, which may affect the width of your content when it displays on the front of the site.

Why are some settings available on one of my sites, but not another?

If you have the WordPress.com Business or eCommerce plan on a site, you might have plugins that add custom blocks to your editor. These will not be available on another site that doesn’t have that plugin.

Some settings in blocks — “wide” or “full-width” — need to be supported by your theme. While the same blocks will be present on different sites, the specific settings you can apply to those blocks might be a bit different based on your active theme.

Will I still be able to use the old editor?

The old editor, also known as the Classic Editor, can be used inside of the block editor thanks to the Classic block. Here’s how to use the Classic block.

Do shortcodes still work?

Yes. The editor comes with a Shortcode Block, which you can use for shortcodes just like before. In the future many shortcodes will become their own blocks.

Is this editor accessible?

Our aim is for the WordPress Editor to be as accessible as previous editors if not more so. We want everyone to be able to use it. The WordPress Accessibility Coding Standards state that “All new or updated code released in WordPress must conform with the WCAG 2.0 guidelines at level AA.“ This will be no exception. If you come across an accessibility issue please contact us.

Do I need to use a particular theme for the new editor?

No. The new block editor will work with all themes. However, only some themes might support specific layout features (like “wide” and “full width” content).

Where can I see a full list of keyboard shortcuts?

A full list of keyboard shortcuts is available in the WordPress Handbook.

How can I see things like word count and spell check?

To see the number of words you have used in your page or post, click the information icon that looks like the letter i with a circle around it at the top left of the screen. This option shows on desktop only, not mobile.

There is no spelling and grammar check only because all modern browsers now include spell check by default. You can rely on that for correcting spelling errors in posts.

Was this guide helpful?

Not quite what you're looking for?

Get Help