Designing an attractive website with WordPress and creating a unique experience for users has always been one of the priorities of site designers. For this reason, it is very important to use tools that improve the content structure and website design with high speed and quality. Gutenberg Editor, as a content editor in WordPress, allows the site designer to design creative, efficient, and beautiful websites easily and with more control.
By using Gutenberg in WordPress, everyone can design attractive and exciting pages for the website audience quickly and with high quality, without the need for deep knowledge in the field of programming. This smart and user-friendly editor is updated over time and allows users to have a better experience of website design and management by using all the updated and efficient features.
In this article, we talk about the latest version of Gutenberg (Gutenberg 16.9) and the new features that have been added to it.
Table of Contents
What is Gutenberg WordPress?
Gutenberg is a powerful content editor tool included by default in WordPress. This editor allows the site designer to easily edit the content structure of the website in a user-friendly environment.
To have a better understanding of how Gutenberg works, it is better to compare it with the classic WordPress editor.
The classic WordPress editor is one of the oldest text editors. This editor provides simple features for editing text and content and is more similar to a text editing panel like Word software.
But Gutenberg has added a completely different approach to content editing by using the concept of blocks. Instead of editing a page classically, Gutenberg allows the site designer to divide the content of a page into several blocks and edit each part of the content separately. These blocks contain text, images, videos, quotes, and many other elements that can be easily moved, edited, and deleted.
In addition, Gutenberg offers more possibilities for customization and design of website pages by adding templates, default templates, and the ability to easily create and edit templates.
What is meant by Blocks in Gutenberg?
Blocks are used in Gutenberg as a visual concept for building web pages. Each block represents a specific part or element of a web page, such as text, images, multimedia elements such as video or audio, interactive forms, background images, maps, tables, and many other elements.
Each block has specific settings and properties that allow the user to customize the content inside each block. For example, for a text block, you can change the font, text size, colors, and even formatting settings.
The use of blocks allows users to easily and flexibly design and edit website pages without needing specialized knowledge in the field of coding or website design.
What are Patterns in Gutenberg?
In addition to the blocks that are used to create web pages, Gutenberg also has another concept called “patterns”. A template is a set of blocks that combine to create a complete design or template for a section or page of a website. Typically, a template can contain various blocks that are used to create a unified and specific look for website pages.
Using templates in website design makes the design process faster. That is, instead of adding blocks one by one and building each page layout from scratch, you can use templates to apply a default template and then edit and customize it to your needs.
In other words, templates help the web designer create a basic structure for their pages and then edit it with minor changes as needed.
Why is this tool called Gutenberg?
The name “Gutenberg” is taken from “Johannes Gutenberg”, the inventor of the printing press. The invention of the printing press in the 15th century is known as one of the great technological innovations of human history.
Choosing the name Gutenberg for the WordPress content editor tool was very smart. The Gutenberg WordPress Tool is similar to the Gutenberg Printing Machine in that, just as a printer uses individual typefaces for printing, the Gutenberg Tool is based on blocks that allow users to create and edit website content in individual blocks.
Introducing Gutenberg version 16.9
WordPress has recently released a new version of its website builder, Gutenberg 16.9. This update introduced new and powerful features to users that made the website design process much simpler and more efficient. In this section, three of the basic changes of Gutenberg 16.9 are introduced:
1. Renaming blocks
In older versions of Gutenberg, blocks had specific names such as “Paragraph” for a text block or “Image” for an image block. A page may have several blocks of images or text. For this reason, if you said image block, it was not clear exactly which image block it meant. This was confusing for programmers and site developers.
But in the new version of Gutenberg WordPress, users have been given the option to rename blocks. The ability to change the name of the blocks makes the website development process easier because users can advance the site development process faster by renaming the blocks. This feature is especially useful for WordPress theme developers.
The only blocks that cannot be renamed are the following four blocks:
- core/block
- core/template-part
- core/pattern
- core/navigation
2. Change the name and repeat the pattern
The ability to rename templates is another new feature in Gutenberg 16.9. It used to be possible to change the name of a template by default. But to change the name of a template, users had to leave the template editing page and then enter another page to change the name of the template.
But in the new version of Gutenberg, it is possible to change the template name without leaving the template editing page. In this way, users can easily change the name of a template directly within the template editing page, which speeds up the website design process.
Also, the ability to copy the pattern (pattern duplication) has improved the website design process. This feature allows users to easily copy and reuse templates they’ve already created, which also helps improve the website design process.
3. Support for relative units in WordPress
Viewport-relative units are used in the CSS of websites and refer to the number of units or sizes visible from the page in the browser or display. These units depend on the size of the display or viewport and allow designers to improve the dimensions and sizes of web pages according to the different dimensions of different displays and devices. Relative units usually include units such as “vw” for Viewport Width, “vh” for Viewport Height, and “vmin” and “vmax” for the smallest and largest display sizes. These units allow designers to create more flexible designs that adapt to different device sizes.
In Gutenberg 16.9, these units give web designers more options to create better web page layouts that look good on different screen sizes.