Writing & Editing

WordPress Editor

The WordPress editor is where you will create the pages and posts on your website. Here’s how to use it!

Table of Contents

The WordPress block editor
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.

Move, edit, and customize each block, and the editor will display visual elements the way they’ll look on your actual site, saving you the time you may have previously spent previewing and double-checking your content before clicking the Publish button.

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

Blocks

The WordPress Editor uses blocks to transform the way you create content: it turns a single document into a collection of discrete elements with an explicit, easy-to-tweak structure.

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 shortcodes, custom HTML code, and embeds.


↑ Table of Contents ↑

Adding a Block

There are many block types for you to choose from, which you’ll see organized by category and by most recent use. 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.

Adding new blocks
Adding new blocks

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

  1. Click black + icon at the side of any empty block.
  2. Click blue + icon at the top left of the editor.
  3. Hit the Enter/Return key from a selected block to create a new block below it.
  4. Click black + icon at the top center of an existing block to add a block above it.
  5. Click on the three dots just above a selected block and choose to add a block above or below the current block.

The default block type is a paragraph — which you’ll use for regular text —  but you can choose a different block type from any of the + buttons. You can also search blocks by typing a forward slash followed by the block name — for example, /image or /heading.

Shortcut to add a block
Shortcut to add a block

↑ Table of Contents ↑

Moving Blocks

You can drag blocks around by clicking and holding the handle in the block’s toolbar that appears when you hover over the left side of the toolbar. You can also use the up and down arrows to bump a block one spot in the direction you want.

Moving a block
Moving blocks

↑ Table of Contents ↑

Configuring a Block

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.

Examples of Different Block Toolbars

Paragraph block toolbar
Paragraph block toolbar
Image block toolbar
Image block toolbar
List block toolbar
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.
Additional block toolbar 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.

Page settings - sidebar
Page settings – sidebar
Block Settings - Sidebar
Block Settings in the sidebar include additional options specific to the block you’re editing.

↑ Table of Contents ↑

Changing a 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.

Changing a block type
Changing a block type

↑ Table of Contents ↑

Block Navigation

The block navigation 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 block navigation tool, 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 block navigation is especially useful for selecting hard-to-reach blocks, such as an individual column inside of a columns block or a block inside of a group block:

Using the block navigation tool, you can jump directly to any block on the page to edit it.
Using the block navigation tool, you can jump directly to any block on the page to edit it.

↑ Table of Contents ↑

Removing 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.

Remove a block
Remove a block

↑ 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.

WordPress Editor - Document Settings
Document Settings

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. 

WordPress Editor - Settings

↑ Table of Contents ↑

Block Patterns

The Block Patterns are a collection of predefined blocks that you can insert into posts and pages. For example, there is a block pattern to insert three images side by side. To insert a block pattern:

  • Select the block pattern icon at the top of the screen.
  • Select the pattern you wish to insert.
  • The pattern is inserted in the document at the location of your cursor.
Block patterns
Block patterns

↑ 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.

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.

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.

More Options

↑ Table of Contents ↑

Frequently Asked Questions

When will the WordPress Editor be available on WordPress.com?

It already is! When you write or edit a post, look in the sidebar for the prompt to try the new editor and click the “Learn More” button. When you try the new WordPress Editor, it will be set as your default editor unless you choose to switch back to the Classic Editor.

Don’t see the prompt in the editor? You can find it in your WP Admin dashboard, which you can reach by adding /wp-admin to the end of your site address. Once there you will see a banner with the option to try the new WordPress Editor.

Does the new editor allow editing posts and pages in the front-end?

No. This editor replaces the current post and page editors. It’s a representation of what site visitors see on the front-end of your site. However, the layout and visual experience in the editor are much closer to the way things look like on the public-facing side of your site.

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?

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.

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 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?

At this time, as we’re introducing the WordPress Editor you’ll be able to switch between the WordPress Editor and the Classic Editor for posts and pages; some other content types may require the older editor.

To switch to the classic editor, click on the ‘. . .’ settings icon in the upper right corner of the editing screen.

Then, click on Switch to Classic Editor.

Newer sites don’t have this option by default, but if you do find you want to switch to the Classic Editor and don’t have the option, please do contact us and we can help you out!

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.

Not quite what you're looking for?

Get Help