15+ Helpful Tips and Tricks For WordPress Gutenberg Editor
With the introduction of Gutenberg, creating and formatting content on WordPress has been made easy, unlike the formal editor that requires the addition of two or more plugins to format a page or create a post. The WordPress Gutenberg editor will help both developers and users without experience in coding to create world-class websites.
Gutenberg is one of the best things that happened to WordPress since its creation. In late 2018, WordPress introduced a new update, which is WordPress 5.0. WordPress 5.0 is a major change to WordPress since its creation. This update was all about the change in WordPress editor. It was the beginning of the WordPress 5.0 series which comes preinstalled with Gutenberg as it's default editor.
Evolution of Gutenberg
Gutenberg has been around for a while as a stand-alone plugin with the introduction of the 5.0 update, it became a core part of WordPress. This update gave the content creation on WordPress superpowers. If you are still wondering what a Gutenberg is let me take a minute to explain one of the greatest updates to WordPress since the launch of WordPress.
The Gutenberg is a WordPress Editor that replaced the old Classic editor that has been in use for a long time. It gives users the combination of a builder and editor all in one. Gutenberg allows users to add content blocks and page builder features to pages or posts on WordPress without installing a separate plugin. These functionalities come inbuilt in WordPress 5.0.
This WordPress block editor has a totally different user interface from the old WordPress classic Editor.
The WordPress Gutenberg editor is designed to produce a more dynamic and comprehensive page building and post writing experience which provides more flexibility and control for users when editing a page or post.
Difference Between The Classic Editor and The Gutenberg
Before we dive into it, It would nice to do some comparison between the Old Classic Editor and The Gutenberg.
The Classic Editor Interface
The Gutenberg Interface
Looking at the two different editors, the old classic editor uses a text editor interface in formatting text while the Gutenberg use blocks to create different layouts on the page.
How The Gutenberg Blocks Work
One of the greatest innovation in WordPress 5.0 is Gutenberg. It is an editor that uses a block to create contents and layouts. The Gutenberg is designed to work using blocks. The blocks allow you to add different features on your site based on the type of content you are creating. There is virtually a block for everything. These are some examples of blocks available on Gutenberg; Paragraph, Heading, Subheading, Quote, Image, Gallery, Cover Image, Video, Audio, Columns, File, Code, List, Button, Embeds, etc
New Content Blocks Category
The Block type is systematically categorized in a way that allows you to easily pick a block.
Here are the available block categories;
- Most Used
- Common Blocks
- Formatting
- Layout Elements
- Widgets
- Embeds
Understanding The Gutenberg Interface
The Gutenberg has a new interface different from the old classic editor. This interface gives users an all in one functionality. Don't you think it will be a smart idea to know how to navigate the new interface? Let's get started
1. Add Block Button: This button is used to add new blocks to your content. Have a look at below image.
2. Undo/ Redo: This allows you to go a step forward or backward that is to undo and redo a change.
3. Preview and Publish: The Preview is used to display what your post will look like while the publish button allows you save and publish your page or post so it is available to the public.
4. Document: This is the settings area, this tab allows you to toggle to and from the document settings and make changes.
5. Block Setting: This can be used to set up or format a particular block that was selected.
Now, go ahead with the 15+ helpful tips and tricks for WordPress Gutenberg editor to skyrocket both of your site and project!
1. Increase Your Efficiency with The Gutenberg Keyboard Shortcut
We all love keyboard shortcuts. Shortcuts are designed to make life easier, faster, increase speed and efficiency. The shortcut menu can be found by clicking the ellipsis on the right corner. Even though universal shortcuts like Ctrl C, Ctrl V, etc works, however, Gutenberg has its inbuilt shortcuts which allow you to activate certain functionalities within the editor.
To view the full list of the keyboard shortcuts, Use the Shift + Alt + H. Here are some of the shortcuts listed below:
- Ctrl + Alt Backspace delete the select block
- Control + Alt + T
- Ctrl + Alt + Y
- Display help – shift + Alt + H
- Save your changes – Ctrl + S
- Undo your last changes – Ctrl + Z
- Redo your last undo – Ctrl + Shift + Z
- Show or hide the settings sidebar Ctrl + Shift +,
- Go to the next part of the editor Ctrl + ’
- Navigate to the previous part of the editor Ctrl + Shift + ’
- Navigate to the next part of the editor (alternative) Shift + Alt + N
- Navigate to the previous part of the editor Tables (alternatives) Shift + Alt + P
2. Switch between Visual Editor and Code Editor
The Gutenberg offers users the flexibility to switch from the code to the visual editor pane giving users the flexibility to add codes to the page without leaving the page. This offers a quick and easy way to manage your content. The Gutenberg operates on different mode depends on the on that works best for you. The four modes include:
3. Multiple View Options
The Gutenberg offers users multiple view options that allow users to navigate, change a view to suit their preference. To change a view, kindly click on the ellipsis in the top right corner of the page, On hover click on more, which gives you options to select the different view. Select the best view that suits your choice.
Here are the different View options available on Gutenberg:
Top Toolbar Mode
This feature allows you to access all block and document in a single place Spot. This option lets you have the toolbar at the top of the editor.
Spotlight Mode
Spotlight mode allows you to focus on one block at a time. This mode highlights the block you are currently working on and fades the block that you are not working on.
Fullscreen Mode
This mode allows you to work without distraction by removing unnecessary menu items from the page. It allows you to expand the editor on a fullscreen mode by removing or hiding the WordPress admin menu on the left-hand side.
Depending on your preference, you can set the best viewer to the option that suits you. You should try the different view options for the best WordPress user experience.
4. Block Search
Getting some particular block can sometimes be difficult. This allows you to quickly and easily search for a particular block using the search option.
5. Switch between The Visual and Code Editor
Just like the Classic Editor, the Gutenberg also allows you to switch between and code and the Visual editor, This is useful for advanced and technical users who may want to add some extra code to the page.
6. Use The Slash Command “/ “ to Quickly Insert a New Block
There is the conventional way of adding blocks to your posts or page, but there is a much easier way to quickly add blocks to your posts.
Once you know the block to use, Type the “/” and start typing the name of the block, as you type, Gutenberg will autosuggest block that matches your inputs. Then hit the Enter key to insert the block
7. Drag and Drop Images from Your PC
The Gutenberg also allows you to drag and drop images from any directory in your PC directly to theWordpress Gutenberg editor at the exact place you want it to appear.
8. Shift + Enter To Line Break
To Start A new line of text without creating a new paragraph, simply press Shift + Enter key
9. How to Change Blocks to a Different Blocks
Instead of inserting a new block for every content you create, you can save lots of time by converting a block to another block type. For example, you can transform a regular text into a heading, quotes, lists, preformatted text. You can also convert other block types into a similar or related block.
Related Article: Check out the comparison to get the best CMS platform.
10. Use Drag and Drop to rearrange the Blocks
Use Drag and Drop To move contents around the page. If you need to move an item from one point to another. This is where the drag and drop come in handy.
One of the easiest ways to move contents around is using the drag and drop feature on Gutenberg, unlike the old editor where you can only copy and paste. Gutenberg editors allow you to move items from the page using drag and drop.
To get this option activated, kindly mouse over the six dots on the block you need to move, then drag the block to the new location. You can also use the up and down arrow to move the block around
11. Copy Multiple Blocks
Just in case you are wondering how you can copy multiple blocks at the same time, on your WordPress Gutenberg editor, click on the ellipsis on the top right column, just by the bottom of the menu, click on the copy all content. This will automatically copy all the content which you can transfer to another place
12. Adding New Blocks
This is the info icon on the top left side of the page. This provides a general overview of the content on your page which includes, the word count, the number of heading on the page and the different kinds of heading, paragraphs, the total number of blocks and the summary of the entire block layout.
13. Shortcodes
Gutenberg allows you to add shortcodes to your page by inserting the shortcode block which can be found in the block menu.
14. Create Multi-Column
Gutenberg allows you to be more creative with your content layouts. It offers a multi-column functionality that makes creating multi-column now possible with the Block editor, unlike the Classic editor where creating columns on your page was nearly impossible. This block allows you to add up to 6 columns on your page.
15. Remove an existing block
To delete an existing block, simply hit the Alt+Ctrl+Delete
You can also click on the block ellipsis, then click remove Block.
Bonus Point: Create a Reusable Block Template
This feature allows you to create block templates that you can reuse anytime that is you can a configuration blocks layout for a content type that you may need to reuse in the future. Instead of creating it all over again the next time it is needed, Gutenberg allows you to save it as a reusable block which call be recalled at a later date.
To set a reusable block template, Highly all your blocks by selecting all the blocks in the layout like you would do when highlighting texts to copy. Then click the three dots icon for options. Click Add to Reusable Blocks. It will display a pop up prompting you to give the block template a name. Enter a descriptive name for your new block and click save.
If you need to add your newly created block to your page, click on the block icon and search for the menu block you just created to add to your page
Also Read: The key differences of Gutenberg Vs WordPress Page Builders
Final Words on 15+ WordPress Gutenberg Editor
Now that you are equipped with some of the best tips and tricks to build a world-class WordPress content using the Gutenberg, have fun while creating those awesome contents. The Gutenberg will experience lots of updates in the future of WordPress editor will be largely dependent on the Gutenberg. Just like Johannes Gutenberg revolutionalize the printing press, the WordPress Gutenberg editor has changed the way we create content forever. WordPress has proved once again that they are highly capable and have what it takes to still be a leader in the CMS Industry.
Bonus point: Do you know you can build your dream multi-vendor marketplace with Dokan? Click the link below to give a try. It's free!
