Media Blocks

[wp101 video=”media-blocks”]

In this video, the instructor highlights some of the media blocks included by default in WordPress, expanding on earlier lessons about adding images, audio, video, and PDFs.

1. Gallery Block

• Lets you display multiple images in a grid-style layout.
• Options:
  • Upload new images or choose from the Media Library.
  • Add individual captions for each image or a caption for the entire gallery.
  • Reorder, replace, or remove images anytime.
  • Align the gallery left, center, right, wide, or full-width.
  • Block settings include:
    • Crop thumbnails so images appear uniform.
    • Choose what happens when users click an image:
      • Open full-size version
      • Open an attachment page
      • Or do nothing
    • Select thumbnail, medium, or full-size image display.

2. Cover Block

• Displays a large, full-width image with text overlay.
• Add a title or paragraph text over the image (with full formatting options).
• Can even add additional blocks on top of the image.
• Parent block controls let you:
  • Align the cover block left, center, right, wide, or full-width.
• Settings include:
  • Fixed background toggle (parallax effect) or scrolling background.
  • Focal point picker to highlight the most important area of the image.
  • Overlay color options (solid color or gradient).
  • Adjust overlay opacity to balance image visibility.

3. Media & Text Block

• Combines an image (or video) with a text area side-by-side.
• Features:
  • Usual text formatting options available.
  • Resize the image by dragging handles.
  • Change block width and align image to the left or right of the text.
  • Adjust vertical alignment of the text relative to the image.
  • Block settings allow:
    • Changing text and background colors
    • Stacking image above text on smaller screens (mobile-friendly)
    • Cropping the image to fill its column, with adjustable focal point
  • Always add alt text for accessibility.

Key Takeaway:

Default WordPress media blocks like Gallery, Cover, and Media & Text help you create dynamic, media-rich pages without extra plugins. These blocks make it easy to showcase images, overlay text, and design engaging layouts for both desktop and mobile users.