Mastering the Gutenberg Editor: Practical Tips and Advanced Features (03)

In this post, we're going to continue our in-depth look at WordPress' Gutenberg editor, highlighting some advanced features and useful tips to help you further enhance your content creation. From adding anchors and custom styles to Blocks, to using different types of important Blocks, we'll break down step-by-step how these features can help you achieve a more flexible and professional page layout. Whether you're looking to create more engaging blog posts or optimize your page for UX and SEO, this guide will provide you with an invaluable reference.

 10, add anchors to Block

What is an anchor point? Anchors are a type of hyperlink, such as in a particular blog entryFrench star Risacher becomes Hawks' first-ever first-round pickThis subtitle title, added 2QKI3OHK anchor, of course, the name of the anchor, you install their own custom to, do not have to be the same as me, then you open https://xxx.com/博客主标题/#2QKI3OHK, not the article content of the subtitle, but the main title of the article Oh!

Step: Select the Block where you need to add an anchor point in the block>Advanced Settings>HTML Anchors Enter the anchor name in and save it. (as shown below)

11, Customize Block's CSS styles

Since the preset styles in Block may not be able to fully meet our needs, users who like to do DIY may need to customize the styles through CSS code. Just add CSS variable name in "Block > Advanced Settings > Extra CSS Classes" to customize the style. (as shown below)

12, a few important Block (a few different types) this is the focus, remember to distinguish between the

Columns

The boxes in a column are often called "columns" and you can add other Blocks to these columns to add variety to the layout. Column Blocks offer several default layout options for the number of columns and column width. For example, the content area in the following figure consists of two columns, each with a width of 50%, plus an Image Block, a Text Block, and a Button Block, for a flexible page layout. (Figure below)

Of course, after selecting the number of columns, we can also manually add new columns. Simply move the mouse between two columns and click on the black "+" sign that appears to add a new column. It is recommended to select the corresponding columns from the list of structures on the left, so that it is easier to pinpoint and edit the target Block. then, in the settings bar on the right, you can freely set the width of the columns. It is recommended to adjust the unit as a percentage (%), for example, if you input 30, it means the width of the column accounts for 30% of the width of the browser window, so the setting will be more intuitive.

Then just add the Block you want to the column. Very intuitive

Row

After inserting a Row, the new Block will be grouped into that Row by default. Row Blocks automatically adjust the layout according to the content, such as automatically aligning the text heights of different paragraphs.

If you select the Row Block, you can also change the orientation to portrait in the right panel so that the layout reverts to a stacked arrangement like the default. (as shown below)

Shortcode

Some plugins may not support Gutenberg Block, but they provide shortcodes. You can paste the shortcode (in the format: [XXXX]) into the editor so that the plugin's content style will be displayed on the front-end, even though you can't see the effect directly on the edit page. But after keeping it, return to the front-end or re-open the new page to view, you can see whether the effect is what you need or not!

Check the page where you need the plugin for the specific shortcode, or the plugin documentation is available

Table of contents

The table of contents is an important element for longer posts, helping to improve the user experience as well as SEO. however, WordPress does not have a built-in Table of Contents Block. however, it is possible to find the recommended plugin in the Block panel by searching for "table of content". In the Block panel, however, you can search for "table of content" to find recommended plugins, which is a very convenient feature. These plugins fully support the Gutenberg Block, so you can pick your favorite table of contents plugin and drag and drop the table of contents onto the page just like you would any other Block.

Article Settings

This section is all done under the Articles tab on the right hand side.

Visibility and Posting Time Settings
Articles can be set as public, private and password protected.

When the article has been updated, we should also modify the publish time in favor of SEO.

Setting the url(Link to current article)

After saving or publishing a post/page, a "URL Alias" field will appear in the "Fixed Links" column. You can enter the URL you want to display in this field and then resave or publish.

Please note that you can only customize the URL after the article/page has been saved or published. newly created articles/pages cannot set a custom URL until they have been saved or published.

Such as the above picture I chose the article id is also the article name, so the link (url) is fixed, if you want to modify the first time to keep before, modify the article id (title)

Categories and labels

According to your actual need to set up the article categories and tags, in order to filter, but also better for SEO, the following chart, according to the article to

Featured Image

Choose the size, the picture clear and appropriate picture, to comply with the theme of the article, highlighting the characteristics, because this is displayed on the first page of the first impression!

summaries

A summary of the content of the post displayed on the blog listing page is as concise and engaging as possible. As shown in the image above.

summarize

With this in-depth Gutenberg tutorial, I'm sure you've mastered these advanced features and useful tips, and can now edit and optimize your pages and blog posts with more flexibility.The power of the Gutenberg editor lies in its flexibility and extensibility, which can help you easily achieve a variety of layout and design needs. As the most commonly used writing and design tool in WordPress, mastering these skills will greatly improve your content creation efficiency. Next, we'll start exploring how to combine the default theme with Gutenberg to achieve even better page layout, so stay tuned!