WP Manifestindependent plugin directory
manifest / editor / matts-youtube-blocks

Matt's YouTube Block

WordPress Gutenberg block that displays recent YouTube videos from channel and playlist RSS feeds. No API keys required.

by Matt · github.com/thewpminute/matts-youtube-blocks

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/thewpminute/matts-youtube-blocks/archive/refs/heads/main.zip
Readme github.com/thewpminute/matts-youtube-blocks ↗

A WordPress Gutenberg block that displays recent YouTube videos from channel and playlist RSS feeds. No API keys required.

Videos link directly to YouTube (no embedded players) and thumbnails are static images from i.ytimg.com for minimal page weight.

Requirements

  • WordPress 6.1+
  • PHP 8.0+

Installation

  1. Download or clone this repository into wp-content/plugins/
  2. Activate "Matt's YouTube Block" in the WordPress admin
  3. Add the "YouTube Feed" block from the Embed category in the block editor

Usage

Adding sources

In the block sidebar under Sources, enter one or more YouTube channel IDs, playlist IDs, or full URLs separated by commas.

Supported formats:

Format Example
Channel ID UC7IMfu6FS3LgW2S_4vTLH6A
Channel URL https://www.youtube.com/channel/UC7IMfu6FS3LgW2S_4vTLH6A
Playlist ID PLUuJbtSgiD4xNqTkfL367PZ7Cz793RAqY
Playlist URL https://www.youtube.com/playlist?list=PLUuJbtSgiD4xNqTkfL367PZ7Cz793RAqY

You can mix channels and playlists in the same block. Videos are merged and sorted by publish date.

Block settings

Setting Description Default
Featured videos Number of large videos on the left 1
Sidebar videos Number of smaller videos on the right 3
Byline prefix Text before channel name (e.g. "By", "From") By
Title size Font size for video titles —
Byline & date size Font size for channel name and date —

Native WordPress controls for background color, text color, link color, padding, and margin are available in the block sidebar.

Filtering Shorts

YouTube's RSS feed doesn't distinguish Shorts from regular videos. To exclude Shorts, create a YouTube playlist containing only the videos you want displayed and use the playlist URL as your source instead of the channel URL.

Caching

Feed data is cached per source using WordPress transients for 1 hour. Failed fetches are not cached, so they retry on the next page load.

CSS customization

All styles are scoped under .mytb-youtube-feed and use CSS custom properties for easy overrides:

.mytb-youtube-feed {
  --mytb-grid-columns: 3fr 2fr;       /* Featured/sidebar column ratio */
  --mytb-gap: 1.5rem;                 /* Spacing between grid areas */
  --mytb-border-radius: 0.75rem;      /* Thumbnail and container rounding */
  --mytb-card-thumb-width: 10rem;     /* Sidebar thumbnail width */
  --mytb-title-font-size: 1.1rem;     /* Featured title size */
  --mytb-sidebar-title-font-size: 0.9rem; /* Sidebar title size */
  --mytb-meta-font-size: 0.85rem;     /* Byline and date size */
}

Example — single column layout with no rounding:

.mytb-youtube-feed {
  --mytb-grid-columns: 1fr;
  --mytb-border-radius: 0;
}

File structure

youtube-blocks/
├── youtube-blocks.php                # Plugin bootstrap
├── includes/
│   └── class-youtube-feed.php        # RSS fetching, parsing, caching
└── blocks/
    └── youtube-feed/
        ├── block.json                # Block metadata and attributes
        ├── edit.js                   # Editor UI (no build step)
        ├── edit.asset.php            # Script dependency manifest
        ├── style.css                 # Frontend and editor styles
        └── render.php               # Server-side render template

How it works

  1. Fetches YouTube's public Atom feed at /feeds/videos.xml?channel_id=... or ?playlist_id=...
  2. Parses XML with SimpleXML (with XXE protection via LIBXML_NONET)
  3. Constructs thumbnail URLs directly from video IDs (mqdefault.jpg / hqdefault.jpg)
  4. Caches parsed results per source as WordPress transients (1 hour)
  5. Renders server-side via render.php — the same template powers both the editor preview (via ServerSideRender) and the frontend

License

GPL-2.0-or-later