The WordPress editor is what you will use to create the pages and posts on your website. Here’s how to use it!
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 the 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.
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.
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.
There are multiple ways to add a block and choose the block type you need.
- Click black + icon at the side of any empty block.
- Click blue + icon at the top left of the editor.
- Hit the Enter/Return key from a selected block to create a new block below it.
- Click black + icon at the top center of an existing block to add a block above it.
- 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,
See Your Most Used Blocks
If you use a lot of the same blocks repeatedly, you can set your most commonly used blocks to appear at the top of the block library:
To enable the most used blocks category, follow these steps:
- Click the vertical … icon in the top right corner of the editor screen.
- Choose Options.
- Check the box next to Enable the Most Used Blocks category in the block library:
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 shift a block one spot in the direction you want.
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.
Block Settings – Toolbar
Click on the three dots to the right of the block toolbar for additional options that are present in most blocks.
- Hide Block Settings closes the settings menu.
- Duplicate creates a second block on the same page with the same content.
- Insert Before/After adds a new block before or after the current block.
- 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.
- Add to Reusable Blocks allows you to create a block that can be used on other pages that retain the content and styling of the block.
- Remove Block deletes the block from your page/post.
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.
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.
Some blocks are nested inside of other blocks (called their “parent” block) and you need an easy way to select the parent block. To select the parent block, hover over the icon showing on the furthest left of the block’s toolbar as in this screenshot:
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 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:
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.
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.
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.
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:
- Click the + icon to add a new block.
- Click on the Patterns tab.
- Click on the pattern you wish to insert and the pattern is inserted in the document at the location of your cursor.
Customize your editing experience to suit your needs through the three dots to the right of the Settings icon.
Provides options for where the block toolbars appear when you’re editing.
By default, you’re in the Visual Editor. Switch to the Code Editor to view the entire page in HTML code.
Manage existing reusable blocks, copy all content to paste to another page, or learn about the keyboard shortcuts.
Choose what document settings show up in the sidebar.