WordPress Gutenberg Editor Tutorial

As of December 2018, WordPress released version 5.0 where the Gutenberg Editor features as the new default content editor. Not only does this give WordPress users a new editing experience, but it also offers various features and a brand new interface.

The Gutenberg Editor vs The Classic Editor

When comparing Gutenberg to the Classic WordPress TinyMCE Editor, you will find that the newer Gutenberg offers a more simplistic and practical approach to building pages and adding content to your website.

When adding certain features to a blog post in the classic editor, you had to install plugins that offer you that specific functionality. However, with the Gutenberg editor, you can add tables and move content elements around without any hassle.

Essentially, Gutenberg offers a block-based editing experience where you can drag and drop each block and manipulate its contents. If you are a developer, then you can also create third party blocks that you can access via a plugin. This gives you a more unified method in creating content in WordPress.

Editing With Gutenberg

Working with Blocks

The Gutenberg blocks can be seen as a blank canvas that helps you to build beautiful webpages and insightful blog posts. Each block has a toolbar which enables customization. However, the toolbars will differ based on the type of block you are utilizing. Blocks also feature extra settings that allow you to tweak them further, and each block’s position can be altered through the drag and drop feature.

Once you are happy with the contents or style of a specific block, you can save it and reuse it. The ‘Add to reusable blocks’ feature on each block allows content creators to add pre-formatted content to blog posts continuously. You can also export reusable blocks and utilize them on another WordPress site.

Plugins in Gutenberg

Most of the popular plugins that you have come to know and love are already integrated and available as blocks in the Gutenberg editor. This includes WooCommerce, which can easily be added to posts and pages with its accompanying widget blocks. Certain plugins will also be able to merge their own settings with the edit screen of individual blocks.

Adding a Block

You can add various blocks which offer preset functionality in the new Gutenberg editor. For example, to add an image, you can simply incorporate the predesigned image block and upload your picture to your WordPress media library.

Alternatively, you can simply drag and drop your selected media onto your page. WordPress will then instinctively create a new image block for you that will give you the editing functionality you need.

To upload more than one picture, you can make use of the gallery block which enables you to load several images onto the same block.

Creating a Hyperlink

It is essential for content to be visible on the web, and one of the ways that you can boost your overall SEO rating is to link to trusted websites that have a high authority rating on search engines. The paragraph block on Gutenberg allows you to seamlessly create content and includes a link button on the block’s toolbar that makes the linking process very practical and efficient.

Adding Embedded Media

To create engaging posts, combining various media formats can keep users on your website for longer. Gutenberg allows you to embed URL’s of videos by adding a YouTube block from the Embed tab. Furthermore, you can also add voice clips or import posts from social media platforms, such as Facebook and Twitter, to your blog post simply by adding the HTML code of the media to the corresponding Gutenberg blocks.

Adding a Button

To make your posts or pages more interactive, you may want to add a button for browsers to utilize. In the classic TinyMCE Editor you had to make use of a plugin or hire a developer to write extra code to make this a reality. However, the Gutenberg editor comes standard with its very own button block which allows you to link to other pages and customize the look and feel of your button.

Constructing tables

The default table block in the new Gutenberg editor makes adding tables that visually summarize your content a breeze. When adding the block, you can choose the number of columns and rows that you will need. While editing, you can do away with certain rows and columns, or add more as you go. Furthermore, the two basic style options allow you to change your table to fit the feel of your content.

The Gutenberg editor comes packed with tons of extra functionality and ease of use that allows you to create new posts without the need for any coding experience. The effortless customizable design of the Gutenberg blocks also allows for diversification when it comes to your content which helps you to imprint a unique digital footprint on every webpage you create.