WordPress Block Editor – Media & Text Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• For additional information, see these tutorials:
  • WordPress Block Editor – Paragraph Block
  • How To Use The WordPress Media Library

***

Media & Text Block – Description

The Media & Text block lets you set media and text side-by-side for a richer content layout.

You can add text with an image…

Or add text with a video…

How To Use The Media & Text Block

In this section, we’ll cover:

• How to add a Media & Text block to your content.
• How to edit and configure your Media & Text block and block settings.
• How to remove the Media & Text block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Media & Text Block

To add a Media & Text block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Media & Text block (in Most Used or Media section),
  • Add the Media & Text block in the Content Area.
• Add, paste in, and/or upload your content.
• Use the tools in the Media & Text Block Editor or Block Settings section to resize, edit, format, or customize your media and text elements.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Media & Text block…

Or, select a Media & Text block using the Inserter tool in the Content Area.

Either of the above methods will add a Media & Text block to your content.

The Media & Text block includes the following options for adding media:

• Upload – select this option to upload new images or videos from your media storage device.
• Media Library – choose this option to select images or videos you’ve already uploaded to your site’s Media Library.

Adding Media & Text

After adding a Media & Text block to your content, you can:

• Add media (image or video):
  • Using drag and drop.
  • Using the web browser uploader.
  • From your media library.
• Add text:
  • Using a Paragraph block.

Let’s go through these options.

Add Media Using Drag & Drop

To add media to the Media & Text block using drag and drop:

• Make sure you have your media files folder open (you may have to resize your browser to view your post and your media folder).
• Select an image or video from your media folder and drag it onto the active (shaded) gallery upload tool.
• The media element will be automatically uploaded to your media library and inserted into your Media & Text block.

Add A Media Element Using Your Web Browser Uploader

To add a media element using your web browser uploader:

• Make sure you know where your media files folder is located.
• Select the Media & Text block and click the ‘Upload’ button to open your web browser’s uploader window.
• Select an image or video from your media folder and click the ‘Open’ button to import the element into your site.
• The media element will be automatically uploaded to your media library, inserted into your Media & Text block, and added to your post or page.

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Media & Text Block (Step 1)…

This will bring up the ‘Upload Media’ window on your browser. Select an image or video from your media folder (Step 2) and click on ‘Open’ to import the element into the Media & Text block and add it to your content (Step 3).

Add Media From Your Media Library

To add an image or video from your media library to your content:

• Make sure that you have uploaded your image or video to your media library (if you need help with this step, see our tutorial on How To Use The WordPress Media Library).
• Select the Media & Text block and click on the ‘Media Library’ button.
• Click on an element from the Media Library to select it.
• Click on the ‘Select’ button.
• Your item will be imported to the Media & Text block and added to your post or page.
• Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

Select the Media & Text block and click on the ‘Media Library’ button…

Select an image or video from your media library (or upload one from your media folder) and click on the ‘Select’ button.

The image or video will be imported to your Media & Text block and added to your post or page.

Add Text To Your Media & Text Block

To add text to your Media & Text block:

• Select the Media & Text block
• Click on the ‘Content’ section of the block to select it.
• This opens the Paragraph Block editor.
• Type or paste your content into the editor.

After adding media and text, you can:

• Edit and configure block settings,
• Save, publish, or update your post or page.

How To Edit A Media & Text Block

To edit a Media & Text block:

• Click inside the Media & Text block to select it.
• Use the Block Editor tools to:
  • Edit Media: 
    • Change the width of your image or video (wide width or full width).
    • Change the position of your image or video (display media on the left or right of your text).
    • Change the vertical alignment of your image or video relative to the text (align top, middle, or bottom).
    • Link your media to an internal or external URL, media file, or attachment page.
    • Replace your image or video.
  • Edit Text:
    • Change text alignment.
    • Format the text (bold, italics, strikethrough, etc.).
    • Add a hyperlink to text.
• Use the Block Settings to:
  • Edit Media:
    • Change the text and background color.
    • Stack block elements when viewing on mobile devices.
    • Crop your image to fill the entire column and select a focal point for your image.
    • Add an alt text (image only).
    • Select the image size.
    • Add an Anchor link to your block.
    • Change the style of the media element using CSS.
  • Edit Text:
    • For text editing options and settings, see our tutorial on using the Paragraph block.

Let’s go through some of the above options.

Note: If you’re editing the text element of the block, hover over the Paragraph block icon to bring up the parent Media & Text block, then click on it to bring you to Media & Text block editor.

Edit The Block’s Layout

Click on the Change Alignment tool and select a width option for the block:

• Wide width – makes the block stick out on either side of regular content.
• Full width – makes the block stretch over the entire width of the browser window (regular content remains within margins on either side).

Note: To return the block to its default width (i.e. normal width relative to other blocks), deselect the option by clicking on it again.

Note: Your theme must support the ‘Wide width’ and ‘Full width’ options. Not all themes support these options.

Click on the ‘Show media on the left/right’ buttons to set the layout of your block and drag on the media resizing handles to adjust the size of your media element.

Edit The Block’s Vertical Alignment

Use the Vertical Alignment button to adjust your media and text vertical alignment.

Add A Link To An Image

If you’re using an image in the Media & Text block, you can add a link to your image.

To add a link:

• Select the image.
• Click on the Link tool. This gives you the following link options:
  • Media File – Clicking on the image sends visitors to the location on your server where the image has been uploaded.
  • Attachment Page – This is an informational page about your image. It includes the image, caption, image description, and a comment field.
  • Custom URL – Paste a URL or type a search term to bring up a list of posts, pages, or custom post types on your site containing your search term.
    • Click on the Link settings button to:
      • Open the link in a new tab.
      • Add a Link Rel attribute (e.g. nofollow).
      • Add a Link CSS Class to style your link using CSS (Cascading StyleSheets).
    • Click on the Apply button to insert the link.
    • After adding a link to an image, you can:
      • View your link.
      • Edit your link.
      • Delete your link.

Replace Your Media Element

You can replace the image or video in the block by uploading a new image or video from your media storage device or selecting an already uploaded media element from your Media Library.

Media & Text Block Settings

You can also configure various options for the Media & Text block in the block’s settings section.

For example, you can change the text and background colors in the block using preset or custom colors.

You can also adjust Media & Text settings such as:

• Stack block elements when users view your site on their mobile devices.
• Crop your image to fill the entire column and select a focal point for your image.
• Add an alternative text description for users with accessibility issues (image only).
• Select the image size (thumbnail, medium, large, full size).

Remember to update and publish your post or page to save your settings.

How To Remove A Media & Text Block

To delete or remove a Media & Text block from your content:

• Click inside the Media & Text block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Media & Text block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Media & Text block into a Reusable block.

Media & Text Block Tools, Options & Settings

The Media & Text Block includes tools, options, and settings for:

• Media & Text Block Editor
• Media & Text Block Settings

Media & Text Block Editor

The Media & Text Block Editor includes tools that let you perform the following operations:

• Change Block Type (See ‘Media & Text Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Change Alignment Tool
  • Wide width
  • Full width
• Show Media Tool
  • Show Media On Left
  • Show Media On Right
• Vertical Alignment Tool
  • Vertically Align Top
  • Vertically Align Middle
  • Vertically Align Bottom
• Link Tool
  • Media File – Clicking on an image sends visitors to the location on your server where the image has been uploaded to.
  • Attachment Page – This is an informational page about your image that includes the image, the caption, the image description, and a comment field.
  • Custom URL – Paste a URL or type a search term to bring up a list of posts, pages, or custom post types on your site containing your search term.
    • Clicking on the Link settings button brings up the following options:
      • Open the link in a new tab (on/off).
      • Add Link Rel.
      • Add a Link CSS Class.
    • Apply button. Once the Apply button is clicked, your link displays the following additional options:
      • View the link.
      • Edit the link.
      • Delete the link.
• Replace Media Tool
  • Open Media Library
  • Upload
• More Options – See How To Use Blocks to learn how to use this section.

Media & Text Block Settings

Media & Text block settings include:

• Block description area
• Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, Default, Borders, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Reset button to restore the default text color.
  • Text Color
  • Background Color (Solid/Gradient)
• Media & Text Settings
  • Images & Videos
    • Stack on mobile (on/off) – turning this setting ‘on’ affects how the block displays your media and text elements to mobile users.
    • Alt text (Alternative text) [images only] – add a description of your image for SEO.
    • Image Size:
      • Thumbnail
      • Medium
      • Large
      • Full Size
  • Text (Note: For text element settings, see our tutorial on using the Paragraph block.)
    • Font Size:
      • Small
      • Normal
      • Large
      • Huge
    • Drop Cap
    • Color Settings
      • Background Color
      • Text Color
      • Link Color
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Media & Text Block – Additional Info

You can convert a Media & Text block into the following block types:

• Columns block
• Group block
• Image block – This option displays if the selected media element is an image.
• Video block – This option displays if the selected media element is a video.

Clicking on ‘Change block type or style’ also lets you change styles for your block.

If no media elements are added to the Media & Text Block, the ‘Change block type or style’ feature lets you change the block into an Image or Video block.

Additionally, installing plugins or themes on your site may also add new functionality, options, or settings to a Media & Text block.

Congratulations! Now you know how to use the WordPress content editor’s Media & Text block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Stock video image by Videezy

Updated: July 5th, 2024