Home » Digital Marketing Blog » Gutenberg WordPress – How to use the content editor to create articles, products, and design pages?

Gutenberg WordPress – How to use the content editor to create articles, products, and design pages?

WordPress Gutenberg content editor allows you to create articles, products, and custom pages without the need for special plugins. This is not just a text editor, but an advanced template and way of building and managing content in the WordPress system.

The Gutenberg guide helps you understand what the tool is, how to use it and many other important things.

What is Gutenberg?

WordPress defines Gutenberg within an advanced thought template in building and publishing WordPress-based websites in order to revolutionize the content management experience. This is exactly as Johan Gutenberg did who is considered the father of the printing revolution, and this plugin is in the name of the inventor.

To put it more clearly, Gutenberg is the content editor of the world’s most popular content management system, WordPress starting with version 5.0 launched in December 2018. Gutenberg is based on a core plugin and is an integral part of the system.

Recommended tools for WordPress sites
  • Cloudways - Best WordPress web hosting!
  • Elementor PRO - a WordPress page building plugin (recommended).
  • JetPlugins - an extension plugin for Elementor (recommended).
  • Astra PRO - a WordPress theme among the best.

In the past, WordPress was based on a content editor that is WYSIWYG, a regular editor that many are probably familiar with and includes a menu bar with all the tools as well as the text area where you write. In other words, the old editor was like document editing software (Microsoft Word, Google Docs, and the like). But it was outdated and did not fit the new way of thinking they wanted to bring about in WordPress.

Well, Gutenberg is not like the old content editor at all, but is block-based. A block is any component for adding content through the content editor Gutenberg. There are a variety of components (blocks) that are detailed later in the article, so you can add text, images, videos, titles, embeds from social networks, and many other blocks.

Installing the Gutenberg plugin

As a general rule, you do not need to install a Gutenberg plugin for your WordPress site to use it, because it is a core plugin (an integral part of the system).

The Gutenberg plugin is updated in a new version, every time the WordPress system is updated in a new version. So you can always enjoy new tools.

But, if you want to keep up to date with innovations, get new blocks, and even perform additional actions that have not yet been released as part of the core plugin, then you can also download the dedicated plugin in the WordPress.org plugin library right here. You can also install the plugin on the site, go to “Plugins” and then “New Plugin”, enter Gutenberg in the search field and perform installation and activation.

Features of Gutenberg

Content Editor Gutenberg offers many features and tools worth getting to know:

  • Large library of blocks – texts, images, embedding, background colors, and more.
  • Possibility to embed content from other sites without knowing code or programming HTML, CSS, or JS – for example Facebook post, Instagram post, and the like.
  • Using reusable blocks without having to re-adding them manually.
  • Automatically save the content – to save the written content.
  • Preview – You can preview before publishing, for both regular computers, mobile phones, or tablets.
  • Additional tool management – If you use additional plugins such as website promotion and marketing plugins, editing additional content, and the like, the system offers to manage them, by adding and removing, so that the interface becomes convenient and customized.
  • Different writing modes – There are several writing modes that allow you to write content so that other things will not bother you.
  • Full-page design – it is possible to design full pages without knowing the code and without page-building plugins, like Elementor.
  • Customizing blocks – You can customize and define each block, starting with text size, colors, padding, spacing, and more.
  • Block extensions – There are certain plugins that offer more custom blocks such as WooCommerce displays blocks for stores and products.

These features make Gutenberg many benefits for us such as saving time, exemption from having to understand code and more.

Gutenberg blocks

So what blocks are in the Gutenberg plugin? Here is the list:

  • Common blocks – paragraph, image, video, title, list, gallery, theme image, file.
  • Design – code, classic, custom HTML, pre-formatted, table, citation, verse.
  • Layout – page break, space, separator, button, group, columns.
  • Widgets – shortcode, archives, calendar, categories, recent comments, recent posts, RSS, search, social network buttons, cloud tags.
  • Embeds – Twitter, YouTube, Facebook, Instagram, Spotify, Vimeo, WordPress, Reddit, and more.

Additionally, if you use additional plugins, there may be more blocks. for example:

  • WooCommerce – the best-selling products, selected products, selected categories, product reviews, all products, products on sale, products by filtering, and much more.
  • Contact Form 7 – Block for displaying and selecting a contact form.

How to work with Gutenberg?

To work with Gutenberg, you need to access a page, post, product, or custom type page, and there create a new page or edit an existing page. Then, the Gutenberg interface will appear and there you can select the block you want to add by clicking on it or by long pressing, holding, dragging, and dropping in the space provided.

If you want to write plain text (paragraph) then you can click on the content writing area without having to add the dedicated block to it. By pressing ENTER on the keyboard, you will be taken to a new paragraph.

Next to each block, there is a dedicated menu that is specific to it. For example, on a block of paragraph, you can make the text bold or italic, you can add a superscript or a subscript, set a specific color for a particular text within a paragraph, and more. In addition, there is also a side menu of the block settings, where you can make additional settings such as text size, color, additional settings according to the type of block, and other options.

Along with the block settings, there are also page or post settings where you can select the category, add the featured image, add a summary, determine the link of the page and choose when the content will be published and who has access to it.

If you want to play with the blocks and learn more, you can go to the dedicated WordPress page at this link. This is a page that simulates the content editor and allows you to understand how it works.

Here is a video to illustrate:

Explain how Gutenberg works. Credit: WordPress.org

How to cancel or remove Gutenberg?

If you did not like the content editor or you want to switch to the classic content editor, then you have 2 ways to do it:

  • Select a “classic” block – There is a block called a classic block and once you add it, you can simply work with the old content editor as a block. It is simple and convenient and no need to download plugins for it.
  • Download an old text editor plugin – If you are not comfortable using this block, or there are pages that do not work with the new content editor, then you can download the classic content editor as a plugin at this link. You can also access the plugins area in Dashboard > New Plugin > in the text field type “Classic Editor”.

After downloading this plugin, you can edit the posts in one of the content editors. You can also set a classic plugin by default by going to Settings > Write and selecting this plugin by default.

We actually recommend working with Gutenberg and not downloading the classic plugin. After a short use, you will definitely see how easy and convenient it is to use and how much it saves you time.