20 Tips for Mastering the WordPress Block Editor
WordPress block editor is made to be beginner-friendly and intuitive. But, even if you have been using it since its first release, there could still be some useful tricks to discover about it that can significantly improve your working efficiency. It is in human nature to get used to a certain way of doing things, and we often miss to notice that there may be a better and faster way to achieve something. That’s why we believe it is worth spending a few minutes of your time to learn about these simple tricks for mastering WordPress block editor that will allow you to focus more on the quality of your content and less on technicalities.
In this article you will find out:
The WordPress block editor or Gutenberg was made with the idea of providing the ease of use that is typical of some of the most popular page builders. It combines features of both an editor and a page builder and surely is one of the greatest innovations in WordPress. It allows users to manage content more easily and create pages with more flexibility and control in editing and posting.
The concept of Gutenberg is based on blocks. It includes a wide collection of blocks like Gallery, Columns, File, Code, and similar that you simply add to a page and customize as per your needs. Blocks are categorized so that you can easily find the type of block that you want to add. In addition to the default blocks, there are plenty of Gutenberg block plugins that help extend the functionality either as single blocks or as collections. To help you get the best out of it, we collected 20 tips and tricks that will make your Gutenberg experience smoother.
It is not always convenient to use the mouse, especially not for very simple commands. Keyboard shortcuts are often a faster way to add a link, make some text italic and similar. Some of the most commonly used shortcuts for WordPress block editor are:
Enter – Add a new block
Ctrl + Shift + d – Duplicate the selected block(s)
Alt + Shift + z – Remove the selected block(s)
Esc = Clear selection
Ctrl + Shift + z – Redo your last undo
Ctrl + Shift + , – Show or hide the settings bar
Alt + Shift + o – Open the block navigation menu
Alt + F10 = Navigate to the nearest toolbar
Ctrl + Shift + Alt + m – Switch between Visual Editor and Code Editor
There is a quick way to add all types of headings to the text without having to add a Heading block. Simply enter # and then hit Space for H1, ## + Space for H2, ### + Space for H3 and so on. There’s a similar shortcut for adding quotes – > + Space. You can also easily add a bulleted list by entering – + Space or start a numeric list with 1. + Space or 1) + Space.
The standard way of adding a block to your page is straightforward, but there’s a way to make it even more simple. When you decide on the block you want to use, instead of browsing the blocks menu, simply enter the name of the block in the search field and click on it when it appears in the search results.
The block toolbar usually floats on top of the block while you are editing. Although this is often handy, it may not feel comfortable when the toolbar covers a part of a previous block. If you want to have a neat overview of what you are doing, you have the option to pin the toolbar to the top. Just click on the three dots of Show more tools & options and choose the Top Toolbar option.
In case you want to focus solely on the block you are working on at the moment and you’re finding other content on the page distracting, the Spotlight mode will allow you to do just that by dimming the rest of the content. If you prefer the clean canvas feel, the Fullscreen mode will probably suit you better. To change the view, click on the three dots in the top right corner of the page, and you will find view options to select from.
Columns are a good way to make a text visually more appealing especially when you want to add a magazine feel to your page. Gutenberg comes with a block for that purpose, it is called the Columns block and contains a few column styles to choose from. All you need to do to add columns is to select the Columns block, set the number of columns you want to have in the block settings and that’s it. You can then customize the columns further by adding other blocks like the Quote block or similar.
Cover images are a great way to keep a reader’s eye on the text, especially if the text is very long. Unlike featured images, cover images are typically placed in the middle of a text. You can enrich them by adding info from the article to them to highlight a part of the article. Adding them is simple – just use the Cover block to upload the image. Bear in mind that the image you choose should be a high-quality one in order to look good on your page.
Qode Themes: Top Picks
View Collection
Strategically placed buttons are great CTAs and come in handy in many types of posts and pages. And you don’t need some special plugin to add them, since the block editor includes a simple Button block that allows you to quickly insert a button anywhere you want. You get to choose the text color, background, alignment and also pick between two styles – fill and outline. For a more comfortable view of button settings, click on the Button block and then click on the gear icon in the top right corner and all the button settings will be displayed in the right side menu.
In WordPress, widgets represent an easy and convenient way of adding content to websites. Typically used for areas such as the sidebar or the footer, widgets are quite easy to add. However, you can also add them to the content area if that makes sense to you, and the block editor can help with that. To access widgets, simply enter Widgets in the blocks search field and a menu with available widgets will show up below.
Although WordPress blocks include the embed blocks that allow you to add Instagram posts, videos, and similar content, there’s one even easier way to add a YouTube video or some other type of content to a page. You can simply copy and paste the URL of the content you want to add to a page anywhere you would like to have it in the post, and it will automatically be inserted without you having to add an embed block.
The length and structure of your article are important not only in terms of quality but also in terms of SEO. As you write, you can easily get carried away and forget about these practical aspects. To stay on the right track, you can always take a look at the stats and check how the article is arranged by clicking a couple of buttons. The Details button on the top left side of the editor, with an “i” on it, shows you blocks, word count, paragraphs, and article outline based on the headings in the text.
Next to it on the right is the block navigation button that provides you with the info about all the blocks you have used in the text. Plus, you can click on a block to jump directly to it.
Using colors in an article is a great way to draw the reader’s attention and make specific information stand out. You can achieve this powerful effect by setting the colors in the block editor. You will find the color settings in the Settings menu when you click on the gear icon in the top right corner.. Create your own color combo and make sure that the result is easy to read through.
Managing content on more than one website? With the WordPress Block editor, you can copy any block to any other WordPress website. Go to the block you want to copy, select it and choose the Copy option in the block settings menu. Then go to the other website page and paste it into the shortcode block on the page. The block style will probably differ as it is is automatically adjusted to the target theme.
Need to copy multiple blocks at once? No problem – hold the “Shift” key and select the blocks you want to copy, then click on the “Change block style” button. You will now have to group all the blocks into one element – choose the Group option in the dropdown menu, and all the selected blocks will be grouped inside a single box. Then click on the More Options & Tools button (three dots in the top right corner) and choose “Copy”.
There are a lot of reasons why you may need to copy the entire content from one website to another but you surely don’t need to copy blocks one by one. With the WordPress block editor you can copy all the content in just a few clicks. The option to do this is found in the More Tools & Options menu in the top right corner. Simply click on the Copy All Content and paste to the designated website..
Reusable blocks are handy as they can speed up the process of setting up a page without having to start from scratch each time. To create a reusable block template, simply add the block you want to use, click on the three vertical dots, and then choose the Add to Reusable Blocks option. You will then be prompted to give the block a name, and then the block is ready to be used on any page or post.
Gutenberg contains two “modes” for editing your content – the Visual Editor, based on the “what you see is what you get” principles, and the Code Editor, in which you add and edit the content using HTML and CSS. If you are an advanced user and prefer working with code, or you want to add a shortcode to a page, you will probably prefer working with the Code Editor. The WordPress block editor allows you to easily switch between the visual and the code editor. You can use the keyboard shortcut Ctrl + Shift + Alt + M to do it quickly or check the Code editor option in the menu that opens when you click on the three dots in the top right corner, next to the wheel icon.
In Conclusion
We hope this article will help you navigate smoothly through WordPress and create quality content with greater ease. WordPress block editor will surely experience many more updates in the future, but at the moment, we can confidently say it has everything it needs to stay on the top in the CMS industry.
