WP Manifestindependent plugin directory
manifest / editor / yakstretch-cover-block

Tomatillo Design ~ Yakstretch Cover Block

A responsive, intuitive "backstretch-like" cover block for WP

by Tomatillo Design · github.com/tomatillodesign/yakstretch-cover-block · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/tomatillodesign/yakstretch-cover-block/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/tomatillodesign/yakstretch-cover-block ↗

A custom ACF-powered WordPress block that rotates background images with configurable overlays and flexible content placement. Built for performance, accessibility, and a smooth editorial experience.

Features

  • ✅ Rotating background images (fade-in/fade-out)
  • 🎲 Optional randomization
  • 🎨 Overlay styles: flat or directional gradient
  • 🧭 9-position content placement (e.g. top-left, center-center, bottom-right)
  • 📐 Min-height control (desktop and mobile)
  • 🧱 Full InnerBlocks support (add any block content)
  • 🖼 Editor preview with real-time ACF field sync
  • 🧩 Native block alignment support (full, wide, etc.)

Requirements

Installation

  1. Clone or download this repo into your WordPress /wp-content/plugins/ directory.
  2. Activate the plugin via the WordPress admin.
  3. Ensure ACF Pro is installed and active.
  4. Edit any post or page using the Block Editor.
  5. Insert the YakStretch Cover block and configure the block settings in the sidebar.

Field Settings

The block exposes the following ACF fields in the sidebar:

  • Gallery (Image array)
  • Randomize (true/false)
  • Content Placement (top left, center center, bottom right, etc.)
  • Delay (ms between image switches)
  • Fade Duration (ms for crossfade)
  • Overlay Style (flat, gradient)
  • Overlay Color (supports alpha)
  • Min Height (Desktop) (e.g. 500px or 100vh)
  • Min Height (Mobile) (e.g. 300px)

Developer Notes

  • CSS follows a layered architecture for theme integration (@layer components etc.)
  • JavaScript uses fade logic and image preloading to ensure smooth transitions
  • The first image loads instantly (no fade) for performance and accessibility
  • Editor-side logic handles background rendering via MutationObserver to support live ACF field updates

Roadmap

  • [ ] Add rotation preview toggle in editor
  • [ ] Add autoplay pause on hover
  • [ ] Add per-image link or caption support
  • [ ] Add optional background-blur layer

License

GPLv2 or later

Credits

Built with ❤️ by Tomatillo Design for the Yak Theme.