Exploring the Power of
WordPress Media Blocks

Cat in explorer outfit holding binoculars, looking at media icons
WordPress Hartford CT Meetup
November 21, 2023
[ Make Current ]

Watch Recording

Click below to watch our November 2023 meetup on YouTube, or visit

[ Make Current ]


  • Speaker Introductions
  • Background Behind Block Deep-Dive Series
  • Cover and Media & Text Blocks (Ray)
  • Image and Gallery Blocks (Peter)
  • File, Audio and Video Blocks (Ray)
  • Wrap-Up
[ Make Current ]

Ray Michno

Cute Yellow Wapuu WordPress Mascot
  • Hartford WordPress Co-Organizer
  • 25+ years in IT
  • Developer/Software Architect
  • Pratt & Whitney, Aetna, UnitedHealthGroup
  • 7+ years using WordPress
  • Self-employed – CTWebGeek
  • Married, No Kids, Lives in Newington, CT
  • Geek
[ Make Current ]

Peter Ingersoll

  • Hartford WordPress Co-Organizer
  • 25+ working on the Web
  • Marketing, communications, design, tech guy
  • Hartford Courant, logistics, agency
  • 10 years using WordPress
  • Self-employed – Ingersoll Interactive
  • Married, two adult kids, lives in South Windsor, CT
  • WordPress Admin and DIY Advocate – IngersollWP.com
[ Make Current ]

Background Behind Block Deep-Dive Series

  • In “Moving Away from Page Builders”, we discussed advantages of using core WordPress blocks
  • Previous Meetup events explored Text Blocks
  • For many websites, the majority of blocks needed to build a Page/Post can be core
  • Media Blocks – some of the most common functionality needed on a website
Media Blocks
[ Make Current ]

Cover Blocks

  • Cover Block lets you add an image or video with a text overlay
  • Often used for “Hero” or “Call to Action” sections
  • Design options include changing size of image, color overlay, height, position of text, etc.
  • By default – a Paragraph Block gets added, but this can be changed (ex. to Headline), and other blocks (ex. buttons) can be added
  • Video overlays do not offer many styling options
  • Look for inspiration on WordPress Patterns directory (https://wordpress.org/patterns/)
[ Make Current ]

Media & Text Blocks

  • Media & Text Blocks allow you to place an image or video side-by-side with text
  • Very similar to Cover Block
  • By default, the container will be 50/50 sizing between media and text, but you can either drag the border or set “Media Width” value to change
  • Other styling options – crop image to fit column, switch which side displays media vs. text
  • Mobile option – stack on mobile (content on the left will show on top of the content on the right), but that can be changed
  • Video can be used, but it does not seem to behave the same as Cover Block
[ Make Current ]

Image Block

  • Insert images from media library, upload (to library) or URL
  • Media library can be used to “preload” and manage settings for image including alt text, captions, etc., when inserting image
  • Use the block inserter for quick view of media library or add directly from Openverse (openverse.org)
  • Depending on licensing, Openverse images may be downloaded or otherwise only linked to – a warning for links will appear
  • Openverse images include attributions
  • Find attribution-free images on wordpress.org/photos/
[ Make Current ]

Image Block Toolbar Settings

  • Duotone filter – for giving images (similar) a color effect
  • Alignment – wide, full, left, center, & right. Content wraps around left or right aligned images.
  • Caption – adds a caption to the bottom of the image, which can also come from what is saved in the library. Uses text formatting and links.
  • Link – links the entire image to a URL or the image (media) file
  • Crop – change size, zoom, area selection. Saves as new image.
  • Add text over image – transforms to Cover block
  • Replace – use a different image, retaining settings
[ Make Current ]

Image Block Settings

  • Alternative Text – describes the image, for accessibility
  • Aspect ratio – non-destructively changes the height & width of they displayed image
  • Scale – Cover crops to fill the space, Contain places the full image within the space
  • Width & Height – sets image size. If an aspect ratio is set and one side is specified, then ration retains. Setting both = custom ratio
  • Resolution – selects which saved size of the image to use (defined by WP setting and/or theme)
  • Expand on click – opens larger version of image when clicked
[ Make Current ]

Image Block Styles

  • Rounded – quick way to round all corners
  • Filters – another place to apply duotone filter
  • Aspect ratio – non-destructively changes the height & width of they displayed image
  • Border – set border color, width, and which sides to apply
  • Link or unlink border width for all four sides
  • Radius – set rounded corner radius, and which corners to apply
  • Link or unlink radius for all four corners
  • Applies to borders if borders are in place
[ Make Current ]

Image Block Transformations

  • Cover Block – set as background image
  • Columns – wraps image in column / columns block
  • Gallery – wraps image(s) in Gallery block
  • File – changes to link to download image
  • Group – sets image inside a Group (not Group background)
  • Media & Text – set as the image in block
Hint: You can freely add images
and then transform as you design your content.
[ Make Current ]

Live Demo

Wapuu Dev
It’s Demo Time!

File Blocks

  • File Block allows you to add a link to a downloadable file on your site
  • File Block can link to images, docs, videos or any other file you want visitors to be able to download from your site
  • The types and sizes of files you can upload may be restricted
  • For PDFs, the file can be embedded directly into a Page/Post for a preview and in-line viewing
  • PDF Preview may not work on mobile or tablets
  • File Download button can be hidden
  • Viewing files on Mobile may be poor experience
  • Consider other options for file sharing – ex. Google Docs, etc.
  • If using files for “Lead Magnet”, consider using better tools/plugins
[ Make Current ]

Audio Blocks

  • Audio Block allows you to embed a piece of music, podcast, or other sound file into your Page or Post
  • Only certain audio file types supported (ex. mp3, wav, etc.)
  • Size of file may be restricted by hosting
  • Audio file will be displayed as an audio player along with an optional caption
  • Audio player has some basic functionality
  • Preload Options:
  • Browser Default (default setting)
  • Auto – downloads the entire audio file even if the user doesn’t click to play it
  • Metadata – downloads the text only
  • None
  • For podcasts, consider using other Embed blocks (ex. Spotify)
[ Make Current ]

Video Blocks

  • Video Block allows you to upload and embed video into your Post or Page
  • Videos will have a built-in player control with some basic functionality
  • Controls can also be hidden
  • If you insert a URL from a supported block type, such as YouTube, the Video block will automatically transform into a YouTube block
  • Text Tracks option allows you to display timed text tracks (such as subtitles or captions) when the media is playing
  • Consider using YouTube or another video CDN to host videos instead of uploading directly to your website
[ Make Current ]

Live Demo

Wapuu Dev
It’s Demo Time!

Theme & Plugin Dependent

What you experience may not match what you see in demos or tutorials.

Wrap Up & Q&A

Wapuu with laptop and cat
[ Make Current ]

Links Shared During Meetup

Cute Yellow Wapuu WordPress Mascot