WordPress Editor #

The WordPress Editor is a new publishing experience. You can use it to create media-rich pages and posts and to control their layout with ease. Instead of worrying about the alignment and organization of text, quotes, and images, 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. You can confirm that via the Preview button before you hit “Publish”.

The Editor’s Workspace #

With the release of WordPress 5.4, the block editor opens by default in Fullscreen mode when you “Add new post or page”.

How to access the Admin Menu? #

To access the Admin Menu, click on the WordPress logo on the top, note that this will make you leave the post or page.

How to switch-off Fullscreen mode? #

To switch-off Fullscreen mode, use the 3-dot menu on the top right and un-check Fullscreen Mode.

Your choice will be stored in your browser’s local storage. If you switch browsers the choice for the view won’t be available and you have to set your preference again. The same is true when you switch computers.

Safari browser users will experience a reset of default settings once in a while because Safari itself is programed to delete local storage entries every now and then.

The core developers are discussing the best method to persist user settings and will take care of these inconsistencies in future releases.

For now, you may use the Blockeditor Fullscreen Mode Control plugin to change the default behavior, and persistently store the fullscreen option between devices.

How Does the Block editor Work? #

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 explicit, easy-to-tweak structure.

The Block editor brings you 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.

The Anatomy of a Block #

Each block consists of a Block Toolbar, a Block Settings Sidebar and the Block Content. Depending on the block’s purpose the buttons of the Block Toolbar will change and so will be settings items in the Block settings sidebar. All the core blocks are divided into three sections: 1) Description in how a block works, and the items in the Block Tools and what you can change in the Block Settings Sidebar.

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.

Configuring a Block #

Each block has its own settings. To find them, select a block: 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.

The settings at the top of the block usually include formatting options as well as the option to change the block type ([1] in screenshot below).

In the editor’s sidebar you can switch between settings for the current block ([2] in screenshot below) and settings for the whole document ([3] in screenshot below).

The Document Settings 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.

You can click the cog icon at the top right of the editor to show or hide the settings column ([4] in screenshot above).

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.

Removing a Block #

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

Adding Images, Videos, & Other Media #

You can add images by simply adding the image block and then upload or select the image you want to add.

If you want to text and image next to each other, then you can use the ‘Media & Text’ block. This block helps you wrap text around the image in WordPress.

WordPress editor also comes with a Gallery block that you can use to display images in rows and columns with a grid layout.

Simply add the Gallery block and then upload or select the images from your WordPress media library.

While the gallery block is powerful, you may need other advanced gallery features like albums, image sorting, etc

Want to embed a video in your content? No problem.

The default WordPress editor comes with embed blocks for all popular providers.

You can also just copy and paste the video URL to a paragraph block, and WordPress will automatically convert it into a video embed block.

While you use the video block to upload videos directly to your website, we recommend against that because it will slow down your website and can even crash your server.

Instead, we recommend uploading your videos on a service like YouTube or Vimeo, and then embed it in your WordPress posts.

Adding Categories and Tags #

WordPress allows you to sort your posts into categories and tags. These taxonomies help you organize your content into sections and topics.

They also help with SEO and make it easier for your users to find the content they are looking for.

The categories and tags meta boxes are located in the right-hand column, under the Document settings.

Adding Featured Image #

A featured image (also known as post thumbnail) is the main article image which represents the content. They’re prominently displayed on your website on single posts, blog archive pages, as well as on the homepage of news, magazine, and blog websites.

Almost all WordPress themes support the featured image functionality. You will find the option to add a featured image to your post in the right column under the Document settings.

Simply click on the ‘Set featured image’ button and then select or upload the image you want to be used as the featured image.

Adding Excerpts (Article Summary) #

Excerpts are the summary of a blog post or article. Most WordPress themes can automatically generate the excerpt from the first few lines of your post.

However, this automatic excerpt may not always be meaningful or catchy. In that case, you may want to manually add an excerpt.

You can do so by adding it in the excerpt box located under document settings column on the right.

Turn Comments On / Off #

WordPress comes with a built-in commenting system that allow users to leave comments on your post. You can turn off comments for individual posts from the Discussion tab under the Document tab.

Adding SEO #

They add a meta box below the editor for SEO settings and another one in the top toolbar.

Shortcuts #

A full list of shortcuts is available in the Keyboard Shortcut. (use your browser’s “Back” button to return to this documentation)

Frequently Asked Questions (FAQ) #

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

No. 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 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 Classic 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.