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
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/tomatillodesign/yakstretch-cover-block/archive/refs/heads/main.zip

Readme

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.

Read the full README on GitHub →