The Reusable Features repository is designed to streamline development by consolidating features into reusable plugins and scripts. These features can be integrated into various projects, reducing development time and effort.
This repository is an Americas Squad's initiative, created to promote efficiency, collaboration, and code sharing across teams. While still in its early stages of development, the repo provides a foundation for organizing and accessing commonly used features in a structured way.
The repository allows developers to install reusable features via Composer, providing an easy way to include various tools and plugins in their projects. After installation, developers can run a custom Composer command to bootstrap their environment and activate the desired features.
This repository is also a place to document other types of reusable features, such as npm packages and features we'd like to abstract to a plugin in the future.
- Description: The Mega Menu Block plugin simplifies the creation of highly customizable mega menus in WordPress.
- Key Features:
- Allows easy creation of template parts for mega menus.
- Supports nested groups for multi-level menus.
- Customizable with navigation blocks, headings, and other WordPress blocks.
- Flexible and less dependent on manual coding.
2. HM Tabs
- Description: Super simple tab block for the WordPress block editor.
- Key Features:
- Provides a lightweight, accessible tabs block for the WordPress block editor.
- Uses a parent Tabs block with child Tab Item blocks for structured content.
- Supports any inner blocks inside each tab (text, images, custom blocks, etc.).
- Implements ARIA roles and keyboard navigation for accessibility.
- Outputs minimal, semantic HTML that degrades gracefully if the block is disabled.
- Includes lightweight vanilla JavaScript with no external dependencies.
- Unstyled by default, allowing full control via theme CSS.
- Exposes clear class names and state modifiers for easy custom styling and behavior control.
- Description: Super simple modal block for the WordPress block editor.
- Key Features:
- Provides a lightweight modal/dialog block for the WordPress block editor.
- Uses separate blocks for the modal trigger and modal content.
- Supports any inner blocks inside both the trigger and modal (text, media, custom blocks, etc.).
- Implements accessible behavior including focus trapping and keyboard navigation.
- Allows closing the modal via overlay click or Escape key.
- Automatically pauses embedded media (videos/iframes) when the modal is closed.
- Outputs clean, semantic HTML aligned with WordPress core block patterns.
- Includes lightweight vanilla JavaScript with no external dependencies.
- Unstyled by default, enabling full customization via theme CSS.
- Description: Enhances the core WordPress Query Loop block with additional controls for more flexible and predictable queries.
- Key Features:
- Extends the core Query Loop block without changing its default behavior.
- Allows overriding
posts_per_pagewhen inheriting the main query. - Supports hiding the loop on paginated pages (e.g. display only on the first page).
- Provides an option to exclude posts already rendered by previous loops on the same page.
- Reflects query settings directly in the block editor preview.
- Works with both inherited main queries and custom query configurations.
- Exposes block context to enable conditional logic in child blocks.
- Lightweight implementation with clean integration into the WordPress block editor.
- Description: Lightweight carousel block for the WordPress block editor, designed to build flexible and accessible sliders using blocks.
- Key Features:
- Provides a native carousel/slider block for the Gutenberg editor.
- Allows any inner blocks inside each slide (text, images, patterns, custom blocks).
- Supports using the Query Loop block to create a carousel of posts.
- Built on a lightweight carousel implementation with minimal JavaScript.
- Supports responsive layouts with touch and swipe interactions.
- Includes navigation controls such as arrows and pagination.
- Outputs clean, minimal markup aligned with WordPress block standards.
- Unstyled by default, giving full control over appearance via theme CSS.
- Easy to extend and customize for different carousel use cases.
6. HM URL Tabs
- Description: WordPress plugin that enables URL-driven tabs using core navigation blocks and rewrite endpoints.
- Key Features:
- Extends the core
navigation-linkblock with tab-specific link variations. - Supports Home Tab, Base Tab, and Tab link types for structured tab navigation.
- Uses URL endpoints to control tab state (e.g.
/page/tab/value/). - Registers rewrite endpoints to enable server-side awareness of the active tab.
- Adds a Tab Visibility panel to blocks to control which content appears per tab.
- Automatically applies an active state class to the current tab link.
- Fully compatible with core block editor patterns and navigation blocks.
- Lightweight, logic-driven approach without relying on heavy client-side JavaScript.
- Extends the core
- Description: WordPress plugin that adds a primary category block.
- Key Features:
- Displays the primary category for a post
- Supports Yoast SEO primary category selection
- Description: Utility library for loading and managing assets built with
@wordpress/scriptsin WordPress themes and plugins. - Key Features:
- Simplifies enqueuing JavaScript and CSS generated by
@wordpress/scripts. - Automatically reads
.asset.phpfiles to handle script dependencies and versions. - Supports loading assets for custom blocks, block extensions, and global theme/plugin scripts.
- Allows extending existing blocks by overloading
block.jsonmetadata without re-registering blocks. - Works seamlessly with standard WordPress build and enqueue workflows.
- Enables consistent asset organization across themes and plugins.
- Lightweight abstraction over WordPress core asset and block registration APIs.
- Simplifies enqueuing JavaScript and CSS generated by
9. Query Filter
- Description: Adds dynamic filtering capabilities to the WordPress Query Loop block using block-based controls.
- Key Features:
- Provides filter blocks that work alongside the core Query Loop block.
- Supports filtering results by taxonomy terms.
- Includes post type filtering for narrowing displayed content.
- Integrates with the core Search block for keyword-based filtering.
- Uses the WordPress Interactivity API for dynamic, client-side updates.
- Updates query results without full page reloads.
- Compatible with the core Query Loop and extended query loop implementations.
- Lightweight, editor-friendly solution with clean block editor integration.
- Description: Table-based alternative to the core
post-templateblock for displaying Query Loop results in a structured layout. - Key Features:
- Renders Query Loop posts as a HTML table, with each post represented as a row.
- Uses inner blocks as table columns for flexible data presentation.
- Allows reordering columns directly from block controls.
- Supports custom column header labels.
- Provides an option to show or hide the table header row.
- Compatible with core post-related blocks (title, date, excerpt, featured image, author, terms, etc.).
- Integrates seamlessly with the core Query Loop block.
- Outputs clean, minimal markup for full styling control via theme CSS.
- Description: Extends the core WordPress Cover block to support different media for mobile and desktop devices.
- Key Features:
- Adds a mobile-specific image or video option to the core Cover block.
- Optimizes responsive behavior by serving appropriate media per screen size.
- Integrates seamlessly into the existing Cover block editor UI.
- Preserves core Cover block output if the plugin is disabled.
- Provides filters to customize breakpoints and media sizes.
- Lightweight implementation with minimal performance impact.
12. Color Palette
- Description: A WordPress plugin that provides a block editor UI for managing global color palettes, making it easier for editors to customize and reuse colors consistently across a site.
- Key Features:
- Adds a Global Color Palette panel to the WordPress block editor settings.
- Lets editors add, edit, and remove colors from the palette.
- Automatically generates CSS custom properties (
--wp--preset--color--*) for use throughout blocks and themes. - Integrates seamlessly with the core editor design tools and color pickers.
- Supports importing and exporting color palettes via JSON.
- Offers a consistent API for theme developers to extend and enforce palette controls.
- Lightweight and focused on enhancing editor UX around colors.
- Description: A lightweight Hubspot Form embed block.
- Key Features:
- Built in Google Tag Manager support with customisable form submit event names, default is
hubspot_form_submit - Hubspot tracking JS loaded in footer based on global Portal ID setting
- Deferred script loading for performance
- Built in Google Tag Manager support with customisable form submit event names, default is
- Description: A WordPress plugin that adds a Split Background panel to the
core/groupblock, letting editors apply a hard-edge two-colour vertical split without touching CSS or fighting the native gradient picker. - Key Features:
- Adds a Split Background toggle to the Styles tab of any Group block.
- Lets editors pick two colours from the theme palette and drag a range control to set the split position (0–100%).
- Writes to the standard
style.color.gradientattribute — fully compatible with existing gradient tooling and produces no extra markup. - Disabling the toggle cleanly clears the gradient.
- Requires WordPress 6.5+ and PHP 8.0+.
- Installable via Composer pointing at the
releasebranch (compiled assets included).
- Description: A WordPress plugin that adds GSAP-powered animation controls to core and custom blocks via the Gutenberg block editor, allowing editors to configure scroll and load animations entirely from the Inspector panel — no code required.
- Key Features:
- Injects a "GSAP Animation" panel into the Inspector sidebar of every supported block via
addFilter. - Supports two animation modes: Transition (plays once on scroll or page load) and Scroll Scrub (animation progress tied 1-to-1 to scroll position).
- Ships with a rich set of animation presets:
fade-up/down/left/right,zoom-in/out,flip-x/y,count-up,parallax-background,split-words,split-chars, andhovereffects (lift, grow, shrink, tilt, brighten, dim). - Full Inspector panel controls for trigger, duration, delay, easing, stagger, scroll start/end markers, scrub smoothing, and parallax speed.
- Extends to custom blocks via
block.jsonsupports (hmGsapAnimations) or a PHP filter (hm_gsap_animations_supported_blocks), with granular feature flags for stagger, count-up, parallax, and split text. - Respects
prefers-reduced-motion— all animations are skipped entirely when the OS "Reduce motion" setting is enabled. - Plays a lightweight CSS preview in the editor canvas (no GSAP in the editor, zero JS overhead).
- Uses Splitting.js for split-text effects at runtime only — saved HTML is never modified, avoiding conflicts with the block editor or React.
- Injects a "GSAP Animation" panel into the Inspector sidebar of every supported block via
- Description: A WordPress plugin that automatically detects and handles external links sitewide — no configuration needed. Scans all links on every page load and applies safe, accessible defaults without touching theme or block markup.
- Key Features:
- Automatically opens external links in a new tab (
target="_blank"). - Adds
rel="noopener noreferrer"to all external links, preserving any existingrelvalues. - Optionally displays an external link icon after links in
header,footer, and navigation items (enabled by default, toggled via filter). - Handles links added dynamically after page load (e.g. via AJAX or the Interactivity API).
- Icon appearance is fully customisable via CSS custom properties (
--arrow-size,--arrow-margin,--hm-external-icon-url). - Ships with a compiled
build/directory — no build step required to install. - Installable by dropping into
wp-content/plugins/orclient-mu-plugins/.
- Automatically opens external links in a new tab (
17. Workflows
- Description: A flexible event and notification framework for WordPress. Allows teams to define automated workflows that listen to specific events and notify the right people through the right channels — in code or via the WordPress admin.
- Key Features:
- Simple chainable API: define when an action triggers, what message to send, who receives it, and where it goes.
- Built-in destinations: email, WordPress dashboard notifications, and Slack.
- Extensible — create custom destinations to post to any CRM, issue tracker, or chat application.
- Built-in events: post publish, post status change, new comment, new editorial comment.
- Editorial comments and assignees — discuss content and assign responsibility directly within the post edit screen.
- Workflows can be defined in code or configured via the WordPress admin UI.
- Description: Adds support for per-block-variation CSS files, conditionally enqueued only when that variation is active on the page, fully compatible with WordPress's CSS inlining support.
- Key Features:
- Per-variation CSS loading — styles only ship to the browser when the variation is in use.
- Compatible with WordPress core CSS inlining for performance.
- Reduces unused CSS across sites with many block variations.
- Description: Adds gradient border style controls to WordPress core blocks via the block editor, with no extra markup on the frontend.
- Key Features:
- Gradient border support added to core blocks directly from the Inspector panel.
- Pure CSS output — no additional wrapper elements.
- Integrates cleanly with existing block editor styling controls.
- Description: Click, hover, and CSS-class-driven show/hide/toggle for WordPress blocks using the native WP Interactivity API — no custom JavaScript required.
- Key Features:
- Show/hide/toggle behaviours configured entirely from the block editor.
- Supports click, hover, and CSS class triggers.
- Built on the native WP Interactivity API — no external JavaScript dependencies.
- Description: URL-hash-driven tab panels for WordPress group blocks, enabling deep-linkable and shareable tab state.
- Key Features:
- Tab state controlled by URL hash for shareable, bookmarkable links.
- Built on WordPress core group blocks — no new block types to manage.
- Lightweight vanilla JavaScript with no external dependencies.
- Description: Adds stacked CSS background layers and backdrop blur support to WordPress group blocks from the block editor.
- Key Features:
- Multiple background layers on a single group block.
- Backdrop blur support without custom CSS.
- No extra markup — output is pure CSS applied to the existing group element.
23. hm-popup-block
- Description: A lightweight, accessible popup block for the WordPress block editor, built on the native HTML
<dialog>element. - Key Features:
- Built on
<dialog>— accessibility and focus management handled natively by the browser. - Supports any inner blocks inside the popup content area.
- Lightweight vanilla JavaScript with no external dependencies.
- Unstyled by default for full theme control.
- Built on
24. asset-loader
- Description: PHP utility library for WordPress that simplifies including dynamic Webpack-generated assets in themes and plugins.
- Key Features:
- Reads
.asset.phpfiles to handle script dependencies and versions automatically. - Works seamlessly with
@wordpress/scriptsbuild output. - Supports loading assets for custom blocks, block extensions, and global theme/plugin scripts.
- Enables consistent asset organisation across themes and plugins.
- Reads
- Description: A WordPress block that scales its contents on scroll, with an optional pinning mode that locks content into a modal-style spotlight at a defined scroll position.
- Key Features:
- Scroll-driven zoom animation configurable from the block editor.
- Optional modal/spotlight pin at a defined scroll position for immersive storytelling layouts.
- No JavaScript framework dependency.
- Description: Extends the
rt-carouselblock with spacing supports, a theme preset slide-gap picker, and frontend styles. - Key Features:
- Adds spacing and gap controls to the block editor for
rt-carousel. - Applies theme preset values for consistent design system alignment.
- Drop-in extension — no changes to the base
rt-carouselplugin required.
- Adds spacing and gap controls to the block editor for
- Description: Package of reusable components, hooks and helper functions for the WordPress block editor(s).
- Key Features:
- New controls including post picker, date control, file control.
- New components for common requirements such as text with limits.
- New hooks including useMeta, useBlockStyles, useSetAttribute.
- Other utilities functions for working with block, images and options.
- Installation: This is an npm package and will not be installed via the
composer optionscommand. - Documentation: Refer to project readme for more information.
- Description: This site has many interesting features that should be abstracted out in the future. In the meantime, please reach out to the Americas Squad for help with any of the following features.
- Key Features:
- Color palette picker - Intended to replace the text/background color pickers. Allows the content editor to choose a color palette at the post or block level. Automatically sets text, UI, and background colors based on pre-selected accessible color combinations.
- Primary category helper - Gets the primary category for a post based on the Yoast primary category if it exists, or the first assigned category if not. Includes a component for using this inside of a block.
- Max word count helper - Prevents saving a post if it exceeds a max number of words.
- is-style helper - Compare block classes against a string or array of class names to check whether the block has a specific block style applied. JS and PHP versions to support React or SSR versions of blocks.
- De-duplication between featured article blocks - Adds options to pass post IDs between blocks. Used to prevent duplication of posts on templates with multiple featured article blocks.
- Supporting content column - Pulls inline content elements into the traditional sidebar area on desktop, but maintains the source order to display them in between the surrounding content on mobile.
- Accordion block - Adds a JS accordion block with repeatable inner accordion item block. Improves accessibility and styleability vs using the details block.
- ˜˜Carousel block - An accessible carousel that can be used for images or cards with content.˜˜ - there's an HM plugin for it already
- Featured articles block - Choose an auto-generated list of posts by taxonomy item or a manually curated list of posts. For the manually curated list, supports choosing a custom featured image and entering a custom title. Also supports passing post IDS for deduplication (see above).
- Image scroll replace block - Scroll a series of images into place, either one atop another or side-by-side. Uses GSAP ScrollTrigger to manage the scroll animation.
- Full screen slide scroll replace block - Similar to the image scroll replace block, you can create full screen slides of content that pause in place while you scroll the page.
- Stats block - Only allows the stats text block, a custom paragraph style with different size and font options for displaying statistic cards.
- Tabs block - Accessible tabs. Includes linked tabs and their display cards. Also supports adding direct links to the list of tabs.
- Installation: These features live within the repo and will require extraction and abstraction to be used elsewhere. Please reach out to the Americas Squad if you need support.
Features that are not installable via composer will include their own installation instructions above.
To install the reusable-features package in your project, run the following command:
composer require humanmade/reusable-featuresThis will install the necessary features and dependencies.
After installing the features, you can run the composer options command to automatically bootstrap the desired features:
composer optionsThis command will download and execute the bootstrap.sh script from GitHub, which will prompt you to select and install the features you want to enable.
This repository is open to contributions from the entire Human Made (HM) team. To contribute a composer-installable feature:
- Create a new plugin or feature and publish it to a GitHub repository.
- Submit it to Packagist.org.
- Add the feature to the
features.txtlist.
To contribute a non-composer feature, please update the documentation above as appropriate.
We encourage anyone in Human Made to submit their features to this repository. The goal is to collaboratively build a library of reusable features to benefit all projects. Whether it's adding new functionality or improving existing ones, your contributions are valuable!
- Organization: Create a standardized structure for categorizing features.
- Documentation: Provide comprehensive documentation for each plugin and feature.
- Enhancements: Add more reusable plugins and features as needed.
- This is a work-in-progress initiative; the repository may undergo significant structural changes as it matures.
- If you encounter issues or have suggestions, feel free to create an issue or contact the Americas Squad team.