How to Write Blog Posts Using WordPress Default Theme and Gutenberg Editor (02)

In this post, we'll dive into how to write blog posts using WordPress' default theme and the Gutenberg Editor. The Gutenberg Editor, WordPress' built-in editor, provides a flexible and intuitive content creation experience through the use of the Block system. Whether you're new to WordPress or an experienced user, this guide will help you take full advantage of the power of the Gutenberg Editor to easily create and manage blog content.

1, block (Block) of the use of methods

In WordPress's Gutenberg editor, blocks are pre-built element modules or widgets that allow users to easily add and configure content on pages and posts.Blocks bring together a variety of features to make the content creation process more intuitive and flexible.

As a simple example.Title Block is a typical block. Using Title Block, users can not only insert the title text, but also set the label level of the title (such as H1, H2, H3, etc.), adjust the alignment, font size, text color, background color, etc. directly in the editor. All these features are integrated by the developer into Title Block and users can achieve these customized settings without writing code or using additional plug-ins.

In addition, Blocks in Gutenberg Editor are not limited to simple text and captions. There are also many more complex Blocks, such as Image Block, Table Block, Button Block, Video Block, and so on. These complex Blocks usually integrate more functionality, enabling users to easily fulfill a variety of content layout and design needs.

With this modular approach, the Gutenberg editor gives users greater flexibility and control, allowing them to easily build pages and article content that meets their needs without having to delve into the code or use other complex tools. This approach greatly simplifies the process of creating and editing website content, as well as allowing for a richer and more diverse design. (image below)

2, add Block

In the Gutenberg editor, click on any of the arrow positions in the image below to bring up the Block panel. This panel is built-in dozens of different Block, the first time you use may not be familiar with, but you can add one by one and view their styles. However, WordPress comes with a more limited Block style, set the parameters are relatively simple, sometimes can not meet all our needs. Therefore, we can extend the number of Block by downloading some specialized plug-ins, such as Kadence Block, Spectra, Getwid and so on. (as shown below)

3, set Block style

When a Block is selected, a toolbar with style and function options is displayed at the top, and a text prompt appears when the mouse is hovered over it. The block editing area on the right side provides style settings such as color, font, and other parameters. You can freely modify these settings as needed to achieve the desired design style. (As shown below)

4, Convert Block

In Gutenberg Editor, some Blocks can be converted to each other, which can avoid repeating the steps of deleting the old Block and then adding a new one. Paragraph Block, in particular, supports direct conversion to many types of blocks, which greatly improves the writing experience.

The Convert button is located to the left of the Drag Block button. If certain Blocks do not support conversions, only the style options supported by that Block will be displayed. (as shown below)

5, Mobile Block

Sometimes we need to replace the position of an added Block, which can be done in two ways:

Mode 1: Select Block in the structure view on the left and drag it to the target location - this method is recommended.

Mode 2: Press and hold the "Drag" button in the toolbar above the Block to move the Block to the appropriate position.

Both of these methods support region swapping when dragging: you can drag the Block in the structure directory area to the content editing area to adjust its position, and the Blocks in the content editing area can be swapped in this way as well. (as shown below)

6, Combination Block

For ease of management, we can combine related multiple Blocks together.
Method: In the left structure panel, select all the blocks that need to be categorized, click the ellipsis in the toolbar, and then select "Combine". (As shown below)

7, Make reusable Block

Producing block samples

Once a Block has been styled, other pages may need to use the same styling. In this case, the module can be converted into a reusable Block (similar to a template). For example, if you want to reuse the "Photo + Button" block on other pages, you only need to change the image and text, which will greatly reduce the workload.

How to do it: In the list view, select the module you want to reuse, click on the ellipsis on the far right side of the toolbar, select "Create Block Sample" (old name: Add to Reusable Block) and give it an easily recognizable name. We can create two types of Reusable Blocks:

1. Reusable Block for Site-Wide Synchronization Changes (Enabled Synchronized): If you change the style or content of a page, all other pages that use the Block are automatically synchronized.
2. Reusable Block for Unsynchronized Changes (Off Synchronized): Any changes made to this Block on a new page will not affect other pages.

Choose the appropriate mode according to your needs (usually choose Reusable Block with non-synchronized changes, because in most cases we just need to keep the same style layout, not the content). (as shown below)

If a reusable block is saved with full-site synchronization, then the color of this block will automatically change toviolet (color), easy for us to identify.

Since version 6.3, WordPress has added a template feature to the Gutenberg editor, which can be found in the Add block tab on the left, in a menu calledprototypeThe

We make our own reusable blocks that will appear in thisMy Block StyleIn. The next time you use it, just look for it in here. (as shown below)

You can also select this reusable block in the edit area of the page and click "Manage Mode" to enter the centralized management page of reusable blocks. After that, you can make changes to all the Reusable Blocks in one place.Here the name is set to (test 3)

After entering the administration interface, you can see all the reusable blocks you have created in the "My Block Samples" page, and the blocks labeled with "Synchronized" indicate the blocks that have been synchronized with the whole site, while the blocks labeled with "Unsynchronized" indicate the blocks that have not been synchronized with the whole site. The blocks labeled with "Synchronized" indicate those that have been modified in a site-wide synchronization, while those labeled with "Unsynchronized" indicate those that have not. (see the following figure)

When using reusable blocks on new pages, the best solution is to use a site-wide synchronized reusable Block for content that is identical site-wide, and a non-site-wide synchronized reusable Block for content that is identical in style only.

However, this doesn't mean that a site-wide reusable Block can only be used for the same content site-wide. In fact, you can call it from within a page and "detach" it so that you can edit each Block in the portfolio individually on that page without affecting the style and content of other pages.

Steps: In the toolbar of the "more settings" in the "separation of block sample" can be selected. (Figure below)

8, copy, cut Block

Gutenberg's Block supports copy and cut operations, directly using Ctrl + C/X/V. In addition, cross-domain copying and cutting is also supported. (see below)

9, Delete Block

You can use the Delete function by clicking on the last item in the ellipsis at the far right of the Structure panel or toolbar. Alternatively, you can press the Delete key on your keyboard to quickly delete the block (this does not apply to text blocks such as paragraphs, headings, etc.). (see below)

summarize

In this post, we detail how to efficiently write blog posts using WordPress' Gutenberg editor and default theme. From basic block usage to advanced reusable blocks, we cover a variety of useful tips. Hopefully, with this guide, you'll be able to become more proficient in utilizing these tools to improve the efficiency of your website's content creation and design. In the next installment, we'll continue to dive into more advanced features of WordPress and the Gutenberg editor, so stay tuned!