Last updated - July 8, 2021
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.
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.
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.
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.
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.
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.
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.
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 also use the keyboard shortcut Ctrl+Shift+Alt+M to switch between visual editor and code editor.
You can change the view mode of the Gutenberg editor with three different options available.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
In fact, you will be able to add any other block of your choice within each column.
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.
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.
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.
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.
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.
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.
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.
To be able to change the alignment of the button, you need to click the area just outside the button but within the block.
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.
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.
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.
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.
We hope this article has provided some useful WordPress content editing tips. Feel free to leave us a comment if you have any queries.