How does WordPress Gutenberg add a mixed image and text layout?

Gutenberg mixed layout It is relatively easy to implement, but the classic editor cannot. WordPress Gutenberg has two ways to add mixed layout of images and texts: one is media and text, and the other is to add them directly in the column.

1. Media and text add image and text

To create a new article/page, click the "Add" button on the left to search for "Media and Text", and click Add to the editing area on the right.

As shown in the figure below, add pictures on the left, switch the default text to title on the right, and then click the+sign below to add content text.

It is very convenient to click the media and text block, set the content width, full width, and vertical alignment, and switch the left and right positions of pictures and text with one button.

Click the content block, and you can also set the effect of dropping caps on the current block, as shown in the above figure.

The block tab on the right sets the text color, background color, mobile terminal layout, alt text, and the entire media width.

2. Add pictures and texts to columns

Click the "Add" button to search for "Column" and add the layout of left and right columns on the right.

Select the left and right columns, 50 to 50 or other ratios.

Next, add titles and paragraphs in the left column; Add pictures to the right column.

You can also modify the text color and background color of columns. You can quickly add the number of columns.

However, it is not possible to change the position of pictures and text with one key.

3. Summary

Gutenberg's method of adding mixed layout of images and texts is to use media and text blocks more conveniently, or set a column outside, which is convenient for later modification.