WordPress Content Editing – Tips and Tricks

Last updated - April 5, 2022

WordPress is one of the most popular content management systems in the world. WordPress offers a convenient feature-set to help you edit and publish content. If you are a site owner, part of your website management effort will involve content editing as well. In this article, we will provide some useful tips to help you manage WordPress content editing more effectively.

A quick look at the Classic editor

We will discuss in detail about the Gutenberg editor or block editor of WordPress in this article. However, before getting into the details, here is quick recap of WordPress classic editor.

Classic editor offers a simple text editor interface that became quite familiar for WordPress users. It has become an easy option to edit and format content. Moreover, the editor allows you to customize the content using CSS and HTML.

WordPress Content Editing — The Classic Editor offers a simple interface for WordPress content editing.

The classic editor is not the best option to build complex WordPress pages, if you don’t have advanced HTML knowledge. That is why the more feature-rich Gutenberg editor is a great improvement for WordPress users.

In the latest versions of WordPress, Gutenberg editor is offered as the default editing option. However, you can download the Classic Editor plugin, if you prefer to continue with the old, familiar editor.

Gutenberg Editor overview

Gutenberg editor in fact revolutionized WordPress content editing process. It offers convenient blocks that let you make your content more organized and visually impressive. Basically, it reduced the need to be tech savvy with HTTML and CSS knowledge to edit content on WordPress. Instead of searching for codes, new users of WordPress could effortlessly drag and drop blocks to position a desired content type in your post or page. Moreover, there are easier options to embed media, and out-of-the-box features to create call-to-action (CTA) buttons and social sharing options.

Details of Gutenberg editor

The Gutenberg editor works through blocks that define different content elements in a single document. This helps you easily incorporate different media elements into your content. Firstly, let’s take a look at the basic aspects of working with blocks.

Adding a new block

When you open the editor, next to the WordPress icon on the top left, you will see a ‘+’ icon that will help you add a new block. When you click the ‘+’ icon, you will see different blocks from which you can choose the desired one. The main advantage is that you can handle each block separately of others, and some even have their own layout and formatting options.

You can add a new block as and when required while editing content.

The basics of block

As said before, blocks are the fundamental units of WordPress content editing. Each block will have three sections – Block content, Block toolbar and Block sidebar. You can modify the content and appearance of each individual block using these settings.

Each block will have its own settings that you can use to customize.

Basic aspects while working with blocks

Click the cog icon on the top right of the editor to display sidebar settings. Here, you can toggle between an individual block’s settings and the settings of the entire document according to the requirement.

You can switch easily between the settings for the entire document and an independent block.

In the Documents settings, you will be able to modify the status, visibility and author information. Moreover, you can add categories, tags, featured image, etc., here.

On the Document settings sidebar, you can modify different aspects related to the document.

Transform the block type

You can easily transform a block into another type. For this, simply click the block toolbar, and choose the option on the extreme left ‘Change block type or style’. This option will help you change the existing block into a similar or related block type.

You can use this option to transform a block to another similar type.

Removing a block

When you want to remove a block, you can simply select and click the three dots. From the displayed options, choose ‘Remove block’.

Keyboard shortcuts for blocks

There are several keyboard shortcuts available with the WordPress editor. Some of the shortcuts that you can use while editing blocks include duplicating or removing a block, insert a block before or after another one, etc. To find the available keyboard shortcuts according to your device, you can click the ‘three dots’ icon on the top left, and click the option for ‘Keyboard shortcuts’. You can also find the full list of available shortcodes in the block editor handbook.

Keyboard shortcuts could come in handy while using Gutenberg editor.

Switch between visual and code editor

Sometimes, you may want to customize your content using HTML. In that case, you can easily switch to the code editor from the visual editor. For this, you can click the three dots icon from the top right and enable the code editor.

You can easily customize content using the HTML code editor.

You can also use the keyboard shortcut Ctrl+Shift+Alt+M to switch between visual editor and code editor.

Different views

You can change the view mode of the Gutenberg editor with three different options available.

Top toolbar

If you choose this option, the toolbar will be visible on the top part of the editor, and you will be able to access all blocks and edit them from a single location.

This mode lets you edit all blocks from one place.

Spotlight mode

Spotlight mode lets you focus on one block at a time. It fades the rest of the blocks, and draws your attention only to the one you are currently working on.

Fullscreen mode

This mode removes all distractions from your screen when you are editing content. The WordPress admin menu on the left side will not be visible in this mode.

You will be able to easily remove distractions using this mode.

Easily access blocks

While editing content with the block editor, there are a couple of ways to easily access a particular block you are looking for.

Block search

Gutenberg editor offers a lot of choices when it comes to blocks. Now, if you are looking for a specific block, you can easily find it using the search option.

Quickly access the block that you are looking for with the search option.

Slash command

While editing, you can simply type ‘/’ and then the search term, and all the relevant blocks will be displayed. This is an easier way to get started with a specific block once you are familiar with Gutenberg’s interface.

Transform a block to another

The Gutenberg editor provides easy options to transform a block to another type. For example you can transform a paragraph block into heading, list, quote, etc. You can click the icon on the extreme left of the toolbar, and choose a block type to transform.

Easily add images inline with text

Gutenberg makes it easier to add images next to your text content. When you want to add an image next to your text content, you can simply drag and drop it to align it automatically with the content.

With the Gutenberg editor, you can easily align images next to text.

Cover image

Another interesting image editing feature of Gutenberg is the option to add a cover image. You can use the Cover block to add an image in your content.

Reusable blocks

There are several scenarios where you want to use the same content in different posts or pages. Generally, you would save it elsewhere and then copy and paste it to the new post or page. Gutenberg makes this process easy with ‘reusable blocks’. So, if you have a piece of content that you would want to use in several posts, you can save it as a reusable block. Then when you want to use it again in another post, you can simply reuse it by adding that block.

First, you have to save a block as reusable. For this, you need to click the three dots icon, and choose the option ‘Add to Reusable blocks’.

Then add a unique name to the reusable block and save it.

Save the reusable content specifying a name.

Now, when you create a new piece of content, you can find the reusable content saved as a separate section while adding new blocks. Simply click on the reusable content to insert it to the current content.

Simply insert the reusable content wherever needed.

Create a column layout

With the Gutenberg editor, you can easily create a column layout for your content to give your content a magazine-like outlook. Simply select the column block, choose the column style, and start adding your content.

You can choose a style and add a column block.

In fact, you will be able to add any other block of your choice within each column.

You can add a block of your choice within any of the column blocks.

Heading options

Managing headings is more organized and easier with the block editor. You can add a heading block, choose the heading style, and then add the content.

It is quite easy to apply different heading styles with the block editor.

As discussed earlier, you can easily transform another block type to heading block as well.

Text settings (Font size)

Changing the font size is quite easy with the Gutenberg editor. On the right-side settings panel, you will see Typography settings. Here you choose a preset size, or specify a custom font size.

Choose a font size from the preset options easily.

Changing the color of text or paragraph

Gutenberg editor also offers easy options to change text and background color. On the right-side settings panel, you will find ‘Color settings’. Here you can choose text and background colors. An interesting feature is the suggestion to improve readability if your color/background combination is hard to read.

Gutenberg editor offers great choices for text and background colors.

Getting word count and content outline

You can get the word count of the article as well as some other details about the content outline using the information icon on the block toolbar. When you click this icon, the word count, along with the number of headings, paragraphs and blocks used will be displayed. In addition, you can also find a document outline showing the content structure.

You can get word count and other statistics from the information icon on the toolbar.

Right next to this icon, you will also see an option for block navigation that will give you a clear idea on the type of blocks that are used in the article.

With the block navigation icon, you can get a clear idea of different blocks used in the content.

Creating tables

Creating a table used to be a hassle for many with the classic editor. However, the block editor offers easy options to add a table. You can create the table and then add the content to it. Later, if you want to add more columns or rows, you can easily manage it from the toolbar. From the block setting on the right-side settings panel, you can choose table styles, and change background color. There is also an advanced option to make an anchor label for the table.

Gutenberg editor makes it easier to add tables.

Adding CTA or other buttons

Another handy feature you may find useful while editing content using this WordPress editor will be the option to create buttons easily. Simply select the button block, add content, specify a link, and then design the button according to your requirements.

You can easily add buttons using a specified block.

To be able to change the alignment of the button, you need to click the area just outside the button but within the block.

The option to change the alignment of buttons is visible only when you select the block area outside the button.

Embed YouTube videos

To embed YouTube videos, you can use the YouTube block. Simply add the video url in the field, and the block will embed the video automatically.

Embedding YouTube videos is quite easy with the block editor.

Similarly, you can also add the url in any of the text blocks, and it will be automatically embedded too.

Adding widgets to posts

The Gutenberg editor lets you add widgets to posts and pages. You can simply choose a block from the widget section to add it. These include shortcode, calendar, categories, social icons, etc.

You can add a widget block to your content.

Custom HTML in posts

You will find the block for custom HTML in the widgets section. This will help you easily incorporate HTML code into your content.

You can add custom HTML to your post using this block.

Edit with the classic editor interface

Now, if you still prefer to use the Classic editor interface while editing content, Gutenberg offers a block for that. You can simply select the Classic block to edit using the familiar toolbar of the Classic editor.