[6.6 HelpHub]: Media and text block

[jennydupuy]

Article: https://wordpress.org/documentation/article/media-text-block/

Update for 6.6

• [ ] Add featured image to Media & Text block 59594

General

• [ ] Make sure all screenshots are relevant to the latest version
• [ ] Make sure videos, if any, are up to date
• [ ] Add ALT tags for the images
• [ ] Make sure the headings are in sentence case
• [ ] Convert all reusable blocks to a ‘regular block’.
• [ ] Update the changelog at the end of the article

Notes

1. We are not adding detailed updates for the Block settings - Typography, Color, Layout, Dimension and Border and for the More Options setting in the block toolbar. Pls mention the settings included for the block and link to the detailed settings pages instead.
2. Some of the PRs have great videos that can be added to the article.

[github-actions[bot]]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[mmjoubert]

I’d like to work on this

[mmjoubert]

Media & Text Block Features

New Toolbar Layout:

With the WordPress 6.6 update, the Media & Text block toolbar has been improved. It now offers an easier way to access essential tools while minimizing clutter. This new layout is designed for better usability.

Block Toolbar Features:

Image Selected Inside the Media & Text Block

When you select an image in the Media & Text block, the toolbar dynamically adjusts to offer image-related options:

Transform to: Convert the block into other types such as Cover, Columns, Group, or Image blocks.

Replace: Change the current image by uploading a new one or selecting from the media library.

Crop: Resize or crop the image without leaving the editor.

Insert Link: Add or edit a hyperlink directly from the toolbar.

Alt Text: Provide alternative text to improve accessibility and SEO.

Video Selected Inside the Media & Text Block

For videos, the toolbar offers video-specific controls, making it easier to work with multimedia content:

Replace: Swap the footage with another from your media library or upload a new file.

Video Settings: Adjust settings such as autoplay, loop, and mute directly from the block settings panel.

Link Tool: Attach a link to the video, directing users to a different page or external source.

Aspect Ratio/Resize: Adjust the video aspect ratio based on your theme’s available options.

Text Selected Inside the Media & Text Block

Text inside the Media & Text block is often a headline or body content. The toolbar will focus on text formatting options:

Bold/Italic/Underline: Basic text formatting tools allow you to style the selected text.

Alignment: You can align the text to the left, right, or center or justify it directly from the toolbar.

Link Tool: Add or edit hyperlinks within the selected text for better navigation.

Font Size and Color: Adjust the font size and color based on the theme or custom CSS available.

Background Color: Some themes enable adding a background color behind the text for better contrast.

Block Settings:

Block settings are available in the editor sidebar, providing additional customization options for the Media & Text block.

Settings Tab:

Stack on Mobile: Enable this option to display media and text stacked vertically on mobile devices for better readability. Crop Image to Fit Column: Automatically crop the image to fill the entire column width, with an option to use the focal point picker for precise alignment.

Alt Text: Provide alt text for images to improve accessibility and SEO.

Media Width: Adjust the proportion of the media within the block using a slider to set the percentage.

Styles Tab:

Color Settings: Customize the background, text, and link colors using predefined palettes or custom values.

Typography Settings: To style the text within the block, adjust the font family, size, letter spacing, and case options.

Dimensions: Add padding and margins to the block for precise spacing control.

Advanced Settings:

The advanced section allows more control over the block’s structure and design:

HTML Anchor: Add an HTML anchor to enable direct linking to this section of your page.

CSS Class: Add custom CSS classes for advanced block styling.

Changelog:

2023-04-03: Added information about the focal point picker for cropped images. 2022-11-22: Aligned images for mobile view, added cropping options, and removed redundant content. 2022-11-01: Updated video and screenshots for WP 6.1, added error message example, and expanded block toolbar options.