The Media & Text block allows you to place an image or video side-by-side with text.
Here’s what it looks like when it’s added to the Block Editor.
To add a Media & Text block to a page you click on the + icon at the left of any empty block or at the top left of the editor then search for Media & Text, or locate it in the Layout Elements section, and click on the Media & Text icon.
More detailed instructions for adding blocks can be found here.
Add Content
Once you have added the Media & Text block, you click on Upload or Media Library to add your image or video.
Upload lets you upload an image or video from your device while Media Library is used to select an image or video you’ve already uploaded to your site’s media library.
You can resize the image using the resize handles. Click on the resize handle and drag the image to your desired size.
You add text by typing in the text box where it says content.
Block Toolbar
There are two blocks within the Media & Text block: a media block; a paragraph block.
Media block toolbar
You reveal the media block’s toolbar inside the Media & Text block by selecting the media block. The media block toolbar has options to change block type, alignment, show media on left, show media on right, change vertical alignment and edit media.
The change block type can be used to transform to an image block or group block.
The alignment inside the media block is changed by clicking on the change alignment icon and selecting the preferred alignment. By default, the media is aligned as wide width. Full width stretches the media file to the width of the browser window while the normal content remains with margins on either site.
By default, the media is displayed on the left. Click on Show media on right icon if you want to display on the right.
You use the change vertical alignment icon to adjust the alignment of the media.
The edit image option allows you to select a new image or vide for your block and it can also be used to change the image title or Alt Text of your current image.
Paragraph block toolbar
You reveal the paragraph block’s toolbar inside the Media & Text block by selecting the paragraph block. The paragraph block toolbar has options to change block type, alignment, bold, italics, hyperlink, inline code, inline image and strikethrough.
The change block type can be used to transform to a list, heading, quote, preformatted, verse or group block.
Block Settings
Additional options for the media & text block are located in the editor sidebar of the block editor. Click on the Settings icon next to the Publish/Update button if you don’t see the editor sidebar.
Media block settings
You reveal the media block’s settings inside the Media & Text block by selecting the media block.
The stack on mobile option is useful for people viewing on a smaller screen. Enabling stack on mobile will display the content on the left on the top of the content on the right when viewed on a smaller screen which provides a better user experience for mobile visitors.
The Crop image to fill entire column crops the image and you use to Focal Point Picker to change the alignment of the image, and where the main focus point is.
You can also add the Alt Text.
The color settings is used to control the background color of the text side of the block.
The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.
Paragraph block settings
You reveal the paragraph block’s settings inside the Media & Text block by selecting the paragraph block.
The text settings allows you to alter the text size and drop capitalization.
Color settings are used to change the color of the background of the text block and text color.
The editor includes accessibility parameters and displays a warning below the color settings if the color combination you choose make the the text illegible for those with reading impairments.
The advanced tab lets you add a CSS class to your block allowing you to write custom CSS and style the block.