BlockCrate

Description

BlockCrate adds nine blocks to the WordPress block editor. Each one is built on
the editor’s own design tools rather than a parallel set of controls, so colour,
typography, spacing, borders and shadows come from your theme and behave the way
core blocks do.

The blocks work before their JavaScript loads. The accordion is a native
details element, the carousel is a scroll-snap strip, the progress bar renders
at its final value, and the tabs fall back to a plain stack of labelled
sections. Scripts only ever upgrade what is already there.

Blocks

• Accordion — collapsible panels holding any other blocks. Uses native
  details elements, so keyboard support, screen reader semantics and
  find-in-page expansion come from the browser. Panels can open one at a time
  with no JavaScript at all.
• Tabs — horizontal or vertical tabbed panels following the WAI-ARIA tabs
  pattern, including roving tabindex and arrow key navigation.
• Testimonial Grid — testimonials as a responsive grid or a carousel, with
  star ratings, avatars from the media library, and initials as a fallback.
• Countdown — counts down to a date and time, with selectable units and a
  choice of what happens when it ends.
• Info Box — an icon or image with a heading, text and link. The whole card
  can be made clickable while keeping one meaningful link for screen readers.
• Pricing Table — plans side by side, each with a price, a multi-line
  description, a feature list and a call to action. Accent colour, card
  background, borders, corner radius, padding, price size and the button style
  are all adjustable. One plan can be highlighted, and the badge that names why
  carries the meaning so it is not left to colour alone.
• Progress Bar — a labelled bar that fills when it scrolls into view, and
  respects a reduced motion preference.
• Image Slider — images in a swipeable slider, one or several at a time,
  each with an optional caption and link. The frame shape, the crop and where
  the caption sits are all adjustable. It can advance on its own, and when it
  does it pauses on hover and on keyboard focus and never runs at all for a
  visitor who has asked for reduced motion.
• Page Slider — your published pages, or any other public post type, in a
  slider built from a live query rather than a copy. Each slide carries the
  featured image, title and excerpt, and the page it sits on drops out of its
  own results. Rendered on the server, so it never goes stale.

Accessibility

Interactive blocks are keyboard operable and expose the right roles and states.
Decorative graphics are hidden from assistive technology, ratings are announced
once rather than as a row of glyphs, and every animation is dropped when the
visitor prefers reduced motion.

Source Code and Build Process

This plugin is fully open source (GPLv3 or later) and contains no obfuscated or
minified-only code.

Where the source lives

The human-readable source for everything in build/ ships inside the plugin:

• resources/js/blocks/ — the editor bundle (TypeScript/React), one directory per block
• resources/js/frontend/ — the front-end view scripts, one file per block
• resources/css/ — style.css (front end) and editor.css (editor chrome)

• app/, bootstrap/, config/ — all PHP, unminified

  build/ contains nothing but the compiled output of those files.

How to rebuild it

The compiled output in build/ is produced from the sources above with
@wordpress/scripts (webpack), PostCSS and Tailwind. Requires Node.js 18+:

npm install
npx wp-scripts build

composer install restores the single PHP runtime dependency (PHP-DI) into
vendor/. The webpack, PostCSS and Tailwind configuration files are kept out of

the distributed archive, as the plugin directory does not accept .cjs files in
a published plugin. They are standard @wordpress/scripts configuration and are
available from the author on request.

Bundled third-party libraries

All are MIT licensed and GPL compatible:

• Embla Carousel 8.6.0 — https://github.com/davidjerleke/embla-carousel — powers the three carousels
• clsx 2.1.1 — https://github.com/lukeed/clsx — class name helper
• tailwind-merge 3.3.1 — https://github.com/dcastil/tailwind-merge — class name helper

React and the @wordpress/* packages are not bundled; they are loaded from
WordPress core as registered script dependencies.

Technical details