contador web Saltar al contenido

Gutenberg: know all the WordPress editing blocks

Introduced with the WordPress 5.0 update, the editor Gutenberg values ??content creation and facilitates the use of the platform; know the publisher blocks

With the premise of enhancing content production, the Gutenberg, current text editor of WordPress, was introduced in December 2018 as part of version 5.0 of the platform. In the update, the company stated that the experience of editing in the WordPress was completely remodeled thanks to the novelty, which works from blocks. Basically, each Gutenberg block capable of adding content or functionality to posts.

Without a shadow of a doubt, Gutenberg made WordPress easier to use: in addition to creating a more streamlined workflow linear, Since each block as a piece forming the whole content, the idea of ??the blocks also made the editor more intuitive and visually clean.

When opening a new post, for example, everything like a blank canvas. No buttons to distract or confuse the author. The content, be it text or media, inserted gradually, at the same pace as the post takes shape.

Knowing the Gutenberg blocks

Gutenberg: know all the WordPress editing blocks

As explained above, the main feature of the Gutenberg that in it publications are produced in blocks. Each block is a part of the content that appears in the post, which can be text, media (such as photos, music and videos), formatting elements, layout elements or widgets which, in turn, vary according to the plugins that the site administrator has chosen to add.

Understanding Gutenberg's basic premise, it is now necessary to become familiar with each one blocks, which we will do next:

Paragraph

Paragraph block of the gutenberg editor for wordpress

With a self-explanatory name, the paragraph block allows the author to add written content to the post, even a paragraph, just like the one you are reading now. When using this block, it is still possible to customize some text options, such as the alignment of the paragraph, if something is written in bold or Italic, in addition to being able to add links to a particular word or phrase.

The other options in the paragraph block, accessible via the drop-down menu, are also useful, although they are less common to use. L possible change the color text, highlight the words, tach them or even justify the paragraph.

Title / Heading

Title block of the Gutemberg editor for WordPress

Following the standard structure of a post, we move on to the title block. Also, as the name already says, this block allows you to transform a certain text into a title, which is usually useful for organize ideas and the structure of the post as a whole. At the Showmetech, titles are especially important as they reflect directly on the index displayed at the top of each page. Have you noticed that?

Example of an H2 title (standard)

Example of an H3 title

Example of an H4 title

When transforming a text into a title at the standard level, H2, the author can still transform it into a title at level H3 or H4, depending on the emphasis he wants to give to the content, since these last two are minors. Once using the title block, to choose one of these three level options, just click the button ?H2 ? at the top of the block and change to the desired one.

List

Gutenberg editor list block for WordPress

At lists they are especially useful when it is necessary to indicate many items in a certain part of the post. They are often used in product recommendations, for example, or to list steps on one tutorial. When activating the list block, the written content is displayed as follows:

To finish the list, just skip two lines and you will automatically open a paragraph block to continue writing. If you want to change the list structure add sub-topics or exchange the dots that separate each item with numbers, for example just click on the block where the list is and use one of the four boats displayed just above.

Imagem / Image

Gutenberg editor image block for WordPress

The phrase ?A picture is worth a thousand words? may be cliché, but is it still true? So filling your post with images is always a great idea, as long as they have quality and be useful for the purpose of publication, of course. To help you do this, the image block allows you to add media that are on your computer, in the website's own media library or anywhere on the internet, from the photo link.

The best way to add an image to your post from the option Media library, because through it you can send images that are saved on your computer, and then immediately fill in its attributes (caption, alternative text, description and title), which are essential to improve the SEO of the publication. If you add the image from the URL or by clicking on the option Submit, it will be included immediately in the post, which makes you have more work to access it in the media library and fill in the mentioned attributes.

When working with images, it is worth paying attention to lateral menu displayed right of the screen. Although not so used with text blocks, it displays interesting settings in the case of images: it is possible, for example, to choose the proportion in which the displayed figure.

Cover

The block of roof an image block that can contain other blocks overlapping it. It is widely used on websites that intend to use a dynamic screen background, with the background image appearing and changing as the screen scrolls.

You can add to the cover block any block available in WordPress, as a title, paragraph, or even another image. Its use must be conditioned to the style of each website.

This block usually appears at the beginning of important sections of the post, to give emphasis to an important paragraph, for example. It is also worth mentioning that as for the text that overlaps the image, it is also possible to leave it in bold or Italic, add links or change it in the same way you can with paragraphs.

An interesting feature is that the image can be configured as a fixed background, that is, it will be fixed at the bottom of the window while scrolling the screen, as in the example below:

You can use a title

And start a text paragraph on the cover images

If the author wishes to change the position of the text over the image, it is possible to adjust it from the side panel right, displayed whenever the block is clicked cover image. On the same panel, you can also customize the opacity where the background image displayed.

Videos / Videos

Gutenberg editor block for wordpress

Another quite self-explanatory block is that of videos: just like the block of images, it allows you to add a content of day Min this case a video, either on the author's computer or already in the site's media library, in addition to being able to add them from the link. When adding videos to your posts, remember to fill in the attributes content (title, description and alternative text) and gives preference to content in formats .mov and .mp4.

Example of using the video block:

In addition, if the video does not fill the entire width of the page, it is also indicated that the author center it using the alignment controls displayed at the top of the block. That way, you prevent a video narrower than the page from being aligned to the left, leaving a feeling of disproportionate in the content.

Gallery

Gutenberg editor block for WordPress

Using the gallery block is the best way to add multiple images to a given post without leaving it with a polluted appearance. WordPress automatically organizes images according to the size of your screen, be it a monitor widescreen or the phone screen. Its most recommended use in reviews and analysis, but that doesn?t prevent you from including them in any demonstrative post, using the gallery to expose as many photos as possible, without having to spread them out throughout the text.

As well as adding other averages, you can create galleries from photos saved on your computer or media library from the website. After sending the photos, the author must fill in the attributes of each one and then select them, then click on Create new gallery. In the screen that opens, it is possible to define a subtitle for each image and insert the gallery in the post.

Example of using a gallery block:

With the gallery included in the post, click on the gallery you added and then on button with the cone of a gear, located in the top right corner of the editor, right next to the ?Publish? button. This will cause the side panel with the block controls to be activated. In it, you can change how the images will be displayed in the gallery, in how many columns, for example, in addition to the size of the thumbnails.

Quote / Quote

Gutenberg editor quote block for wordpress

The block of quotes it allows highlighting quotes from people related to the subject, being especially useful in longer posts, when there are many paragraphs in a row and, for some reason, it is not convenient to separate them with an image. In addition to providing dynamism to the publication, citations help you to emphasize a particular section.

The block has a field for the citation text, and a field for identifying its author. If you use the quote pad, the content written on it will take the following form:

?Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed of the eiusmod tempor incididunt ut labore et dolore magna aliqua ?

Author

Files

Gutenberg editor file block for wordpress

Following the same logic as the image, gallery and video blocks, the archive allows you to add different file formats to the post. Although quite functional, it may be rare to need to use it, mainly because content of this kind is usually added from links, which in turn take the reader to the appropriate website to download the file in question.

Still, if it is necessary to add a file to a post, the author can also choose an item that is on his computer, from the button Submit, or choose a content that is already in the site's media library. Once inserted, the item appears with its title (which can even be changed by the author) followed by the button Download, with which the reader can download.

Example of using a block of files:

Table

Gutenberg editor table block for wordpress

Tables are the author's best friends when it comes to organizing information. Therefore, they are especially useful when listing many items in the device specifications, as in this article, for example, or a series of links separated by category. Whatever utility you find for the table, it is important to know how to use it. Fortunately, the editor Gutenberg also brings a block to them.

When selecting the table block, the first thing the author must do next is to define the number of rows and columns the table should have. Once this is done, the table appears below and it is possible to fill them with text, including formatting in bold, italics and adding links in words if necessary.

Example of using a table block:

Another interesting function of the tables is that the width of the columns and the thickness of the lines automatically adjust to accommodate the typed text, which makes formatting much easier. If the author wishes, it is also possible to click on any of the cells to invoke the block menu and adjust some properties of the table, such as positioning it on the page and positioning the columns within the table itself, in addition to also being able to delete and add columns or lines.

In the right settings panel, the one accessible by the gear icon, it is still possible to define a header and footer area for the table, as well as to define its background color. In the same panel, the author can also disable automatic width adjustment for the table's columns, so that each column is exactly the same size.

A very important tip: always see how your table looks on the preview page, because the layout of your website may look different than you expected.

Embedded Codes

gutenberg editor media block for wordpress

The incorporation of media allows part of the content of a particular platform or website, usually social networks, to be incorporated into the post. In practice, this incorporation that allows us to add a video of the YouTube, of Facebook, a tweet or a Google Maps map in text. as if a small window for the content on the platform was opened in the text, allowing you to view that content within the post.

To incorporate content into your post, the most practical way is to use a normal paragraph block and copy the content link, be it a tweet, a post or a video, and necklace directly in the editor. The editor will automatically embed the media in the post, displaying the tweet, post or video, and transform it into a block of embedded codes. This method works with the most used platforms, such as Twitter, Facebook, Instagram and YouTube. What if the method doesn't work?

Gutenberg WordPress embedded code blocksThe list of embedded codes includes the most varied types of media

You can use the specific block for the media you want to embed, but be careful when choosing the block, as it only works for the selected media. Want an example? If you want to add content from YouTube in a block of Vimeo, it will not work.

This type of embedding works for most links, even Spotify can be incorporated in this way. Other content, however, may not work by simply embedding links, requiring that the author not only use the correct embedding block for that platform, but also the embedding code (or link) of the content he wants to import.

Example of using an embedding block:

Media & Text / Media & Text

Media block and text from gutenberg editor for wordpress

Finally, a Gutenberg block that you may not know about but that can serve as a differentiator for your post, depending on the creativity with which you use it, the Media and Text block. Basically, as the name already clarifies, this block allows you to link a multimedia content (a video or image) to a written paragraph, making the block ideally highlighted for specific comments in an analysis, for example.

The block's settings panel also allows for some adjustments: you can choose a background color for the block, in addition to allowing the content to be stacked on mv devices

Example of using the media and text block:

Nikon offers free online classes

In this field it is possible to write as in a paragraph, which can be useful when pointing out a specific detail in an analysis or review.


This was our list of the main blocks used in the WordPress, with them it is possible to produce your publications with high quality and personalization. Remember that there are options of blocks with more advanced functions, in addition to blocks that can accompany plugins installed on your WordPress, adding new features.

And if you have enjoyed the tips above, chances are you?d also like to know 18 extensions for Google Chrome that can boost your WordPress experience, 5 Showmetech tips for using the platform in the most efficient way on your blog, be it personal or business, in addition to the comprehensive guide we have prepared for SEO beginners a set of techniques and strategies that seek to increase the visibility of your site on web search engines.