平台开发中,欢迎参与测试。你可以在 QQ群:1046115671 中与我们交流,或是直接在社区发帖

Media + Text Block

Go back to the list of Blocks

Themedia & text block allows you to place an image or video side-by-side with text.

To create this layout, click on the block inserter icon to open the block library and select the media & text block.

You can also type /media and hit enter in a new paragraph block to add one quickly:

Detailed instructions on adding blocks can be found here.

Adding Content

To add your image or video to the block, you can use the options provided to upload a file from your computer or select from your existing Media library.

To add your text, simply starting typing in the text box. You will be given the same text editing options as a regular paragraph block.

Block Toolbar

In order to reveal the block toolbar, you can click on the block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The media & text block offers the following options in its toolbar:

With these options, you can:

Transform the block to a group, or a regular image or video block.

Toggle the block between a wide-width display and a full-width display (if supported by your site’s theme).

Show the media on the left and text on the right, or the other way around.

You can also vertically align your content either to the top, middle or bottom.

More Options:

Hide Block Settings

TheHide Block Settings option hides (or shows) the Block Setting panel in the editor’s Sidebar

Duplicate block

Duplicate block can be used to duplicate selected blocks.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable Blocks

Using the Add to Reusable Blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the “Remove Block” option you can delete the selected block from your content.

区块设置

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.

Media & Text Settings

You will be given the option to stack the media and text on top of each other for mobile phones. This is useful for people viewing your website on smaller screens.

Stack on mobile option

If the media and text in your block were to stay side-by-side on mobile, they may be too small to view on mobile devices. By enabling stack on mobile, the content on the left will show on top of the content on the right. This provides a better experience for mobile visitors.

Color Settings

A background color can be set for the text side of the block, allowing you to call attention to important content.

Color settings for the Media & Text Block

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.

Changelog

  • Updated 2020-08-23
    • Updated images to WP 5.5
  • Updated 2020-06-04
    • Converted 2 reusable blocks to regular blocks
    • Changes to Headings
    • Changes to Block Toolbar
      • Added Vertical Alignment options
      • Added new images
      • Added “More Options” Block