Media & Text Block

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

WordPress Gutenberg Blocks – Media & Text

WordPress Gutenberg - Media & Text Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

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 an image and text block …

Add media and text elements to WordPress using the Media & Text Block

(Add images and text elements to WordPress using the Media & Text Block)

Or a video and text block …

Add videos and text elements to WordPress using the Media & Text Block

(Add videos and text elements to WordPress using the Media & Text Block)

How To Use The Media & Text Block

To add a Media & Text Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Media & Text’ block (in Most Used or Layout Elements section), or
    • Add the ‘Media & Text’ block in the Content Area.
  • Add, paste in, 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 …

'Add Block' Tool - Add Media & Text Block

(‘Add Block’ Tool – Add Media & Text Block)

Or, select a Media & Text Block in the Content Area

Add a Media & Text Block from the Content Area

(Add a Media & Text Block from the Content Area)

After adding a Media & Text Block, you can:

Add A Media Element Using Drag & Drop

To add a media element 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 to WordPress using drag and drop

(Add a media element to WordPress using drag and drop)

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.
  • Hover your cursor over 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 …

Upload button

(Upload button)

This will bring up the ‘Upload Media’ window on your browser. Select an image or video from your media folder and click on ‘Open’ to import the element into the Media & Text Block and add it to your post/page …

Upload a media element

(Upload a media element)

Add A Media Element From Your Media Library

To add an image or video from your media library:

  • Make sure that you have uploaded your image or video to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial).
  • Hover your cursor over 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:

Hover your cursor over the Media & Text Block and click on the ‘Media Library’ button …

Media Library upload button

(Media Library upload button)

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

Upload an image or video from the Media Library

(Upload an image or video from the Media Library)

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

Media element added

(Media element added)

Add Text To Your Media & Text Block

After adding an image or video, the next step is to add text (if you haven’t already).

To add text to your Media & Text Block:

  • Hover your cursor over 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.

Add text to your Media & Text Block

(Add text to your Media & Text Block)

After adding media and text:

  • 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 or full width)
      • Change the alignment of your image or video (diplay media on the left or right).
      • Replace your image or video.
    • Edit Text:
      • Change text alignment.
      • Format the text (bold, italics, strikethrough).
      • Add a hyperlink to text.
  • Use the Block Settings to:
    • Edit Media:
      • Stack elements when viewing on mobile devices.
      • Add an alt text (image only).
      • Change background color.
      • Change the style of the media element using CSS.
    • Edit Text:
      • See our Paragraph Block tutorial for text editing options and settings.
      • Change the style of the text using CSS.

Editing a Media & Text Block

(Editing a Media & Text Block)

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:

  • Click inside the Media & Text Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Media & Text Block

(Remove a Media & Text Block)

Additionally …

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

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

Media & Text Block Editor

(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.)
  • Media Width
    • Wide width
    • Full width
  • Align Media
    • Show Media On Left
    • Show Media On Right
  • Edit Media
    • Replace image or video
  • More Options

Media & Text Block Editor

(Media & Text Block Editor)

Media & Text Block Settings

Media & Text Block Settings

(Media & Text Block Settings)

Media & Text Block settings include:

  • Block description area
  • 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.
    • Text
      • Font Size:
        • Small
        • Normal
        • Large
        • Huge
      • Drop Cap
      • Color Settings
        • Background Color
        • Text Color
  • Advanced Settings
    • Additional CSS Class

Media & Text Block Settings

(Media & Text Block Settings)

Media & Text Block – Additional Info

The Media & Text Block can be converted into the following block types:

  • Image Block – This option displays if selected media element is an image.
  • Video Block This option displays if selected media element is a video.

Change Block Type - Media & Text Block

(Change Block Type – Media & Text Block)

Info

Notes:

  • If no media elements have been added to the Media & Text Block, the ‘Change Block Type’ displays both ‘Image’ and ‘Video’ options.

Change Block Type - No media elements selected

(Change Block Type – No media elements selected)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Media & Text Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Media & Text Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Stock video image by Videezy