Skip to content

Documentation

BlockCrate

Installing the blocks, where they appear in the editor, the design tools each one exposes, and the accessibility behaviour you can rely on.

All documentation
The plugin page

// Getting started

Install it

  1. Install from Plugins → Add New, or upload the blockcrate folder to /wp-content/plugins/.
  2. Activate it.
  3. The blocks appear in the editor under the BlockCrate category.

BlockCrate needs WordPress 6.4 or newer and PHP 8.1 or newer.

// Reference

The nine blocks

Two of them — the accordion panel and the tab panel — are inner blocks you will only meet inside their parent.

Accordion

Collapsible panels holding any other blocks. Built on native details elements, so keyboard support, screen reader semantics and find-in-page expansion come from the browser.

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.

Event 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 a 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 description, a feature list and a call to action. One plan can be highlighted, and the badge naming why carries that meaning in words.

Progress Bar

A labelled bar that fills when it scrolls into view, and drops the animation for a visitor who prefers reduced motion.

Image Slider

Images in a swipeable slider, one or several at a time, each with an optional caption and link. It pauses on hover and on keyboard focus.

Page Slider

Your published pages, or any other public post type, in a slider built from a live query rather than a copy. Rendered on the server, so it never goes stale.

// Styling

Styling them

There is no second design system to learn. Colour, typography, spacing, borders and shadows come from the editor’s own design tools, so the blocks inherit your theme.json settings and behave the way core blocks do.

Front-end styles are driven by CSS custom properties prefixed --blockcrate-, which a theme can override without reaching for !important.

What happens before the JavaScript loads

The accordion is a native details element.

The carousels are scroll-snap strips.

The progress bar renders at its final value.

The tabs fall back to a plain stack of labelled sections.

A slow connection or a failed asset therefore never leaves a visitor staring at nothing — it leaves them with plain, readable content.

// Accessibility

Accessibility you can rely on

Interactive blocks are keyboard operable and expose the right roles and states.

Decorative graphics are hidden from assistive technology.

Star ratings are announced once, rather than as a row of glyphs.

Every animation is dropped when the visitor prefers reduced motion.

In the pricing table, the highlighted plan says so in words, not only in colour.

// FAQ

Questions

Do the blocks work without JavaScript?

Yes. Every block renders usable content before its view script runs, and the scripts only add enhancements such as dragging a carousel.

Can I style the blocks with my theme?

Yes. They use the editor’s colour, typography, spacing, border and shadow tools, so they inherit theme.json settings.

Will they slow my pages down?

Assets load only on pages where a block is actually used, so a page without BlockCrate carries none of its weight.

What is bundled with the plugin?

Embla Carousel 8.6.0, clsx 2.1.1 and tailwind-merge 3.3.1 — all MIT licensed. React and the @wordpress/* packages are not bundled; they come from WordPress core.

Still stuck?

If something here is wrong or missing, tell us and we will fix it — then write it down for the next person.

Ask us
All documentation