3heads-gear3headschatchecklistglobehead-lockhead-plusimaclife-ringlogo-cornelllogo-melbournelogo-northhamptonlogo-portsmouthlogo-small logo-vancouverlogo-yokohamamail-line mail-wings pdf pie-chartplayplugprinter skype website
Print Friendly, PDF & Email

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.

Media & Text Block

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.

Add Media & Text block

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.

Add media file

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.

Resize using resize handle

You add text by typing in the text box where it says content.

Add 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.

Media block toolbar

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.

Change Alignment

By default, the media is displayed on the left.  Click on Show media on right icon if you want to display on the right.

Show media on right

You use the change vertical alignment icon to adjust the alignment of the media.

Change vertical alignment

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.

Edit media

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.

Media Block Settings

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.

Stack on mobile

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.

Color settings

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.

Text block settings

The text settings allows you to alter the text size and drop capitalization.

Text settings

Color settings are used to change the color of the background of the text block and text color.

Color settings

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.

Accessibility warning

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