PHPackages                             humanmade/modal-block - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. humanmade/modal-block

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

humanmade/modal-block
=====================

Simple modal block for WordPress block editor

1.0.0(2mo ago)0803↓33.3%[1 issues](https://github.com/humanmade/modal-block/issues)GPL-2.0-or-laterJavaScriptPHP >=8.2CI passing

Since Feb 19Pushed 2mo agoCompare

[ Source](https://github.com/humanmade/modal-block)[ Packagist](https://packagist.org/packages/humanmade/modal-block)[ RSS](/packages/humanmade-modal-block/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (3)Used By (0)

HM Modal Block
==============

[](#hm-modal-block)

Simple modal block for the WordPress block editor.

Description
-----------

[](#description)

This plugin provides a modal component with two blocks:

- **Modal Trigger**: Container block where you add your trigger element (button, image, etc.)
- **Modal Content**: Renders the modal overlay with your content

Features
--------

[](#features)

- Accessible keyboard navigation with focus trapping
- Auto-pause videos/iframes when modal closes
- Overlay click and Escape key to close
- Customizable trigger and content using any WordPress blocks

Installation
------------

[](#installation)

### For Development

[](#for-development)

1. Clone or download to `/wp-content/plugins/modal-block/`
2. Run `npm install && npm run build`
3. Activate the plugin in WordPress

### For Production

[](#for-production)

1. Download a [release bundle](https://github.com/humanmade/modal-block/releases) or clone the `release` branch
2. Upload to `/wp-content/plugins/modal-block/`
3. Activate the plugin in WordPress

Usage
-----

[](#usage)

1. Add the **Modal Trigger** block to your page
2. Inside it, you'll see:
    - A placeholder paragraph (replace this with your trigger: button, image, text, etc.)
    - A **Modal Content** block (automatically added)
3. Add your modal content inside the "Modal Content" block
4. On the front-end, clicking the trigger opens the modal overlay

**Tip:** Add the class `modal-trigger` to your trigger element for explicit targeting, or the first block before Modal Content will automatically become the trigger.

Development
-----------

[](#development)

If you have [nvm](https://github.com/nvm-sh/nvm) installed you can run `nvm use` in the repository root to activate the correct version of Node.

### Setup

[](#setup)

```
npm install
composer install
```

### Build

[](#build)

```
npm run build
```

### Development Mode

[](#development-mode)

```
npm start
```

Requirements
------------

[](#requirements)

- WordPress 5.8+
- PHP 7.4+
- Node.js 24+

Release Process
---------------

[](#release-process)

Merges to `main` will automatically [build](https://github.com/humanmade/modal-block/actions/workflows/build-release-branch.yml) to the `release` branch. A project may be set up to track the `release` branch using [composer](http://getcomposer.org/) to pull in the latest built beta version.

Commits on the `release` branch may be tagged for installation via [packagist](https://packagist.org/packages/humanmade/modal-block) and marked as releases in GitHub for manual download using a [manually-dispatched "Tag and Release" GH Actions workflow](https://github.com/humanmade/modal-block/actions/workflows/tag-and-release.yml).

To tag a new release,

1. Review the unreleased features in the [Changelog](./CHANGELOG.md) and choose the target version number for the next release using [semantic versioning](https://semver.org/)
2. Checkout a `prepare-v#.#.#` branch. In that branch,
    - Add a new header into [CHANGELOG.md](./CHANGELOG.md) for any unreleased features
    - Bump the version number in the [modal-block.php](./modal-block.php) file's PHPDoc header
3. Open a pull request from your branch titled "Prepare release v#.#.#"
4. Review and merge your "Prepare release" pull request
5. Wait for the `release` branch to [update](https://github.com/humanmade/modal-block/actions/workflows/build-release-branch.yml) with the build that includes the new version number
6. On the ["Tag and Release" GH Action page](https://github.com/humanmade/modal-block/actions/workflows/tag-and-release.yml)\],
    - Click the "Run workflow" button in the "workflow\_dispatch" notification banner (see screenshot below)
    - Fill out the "Version tag" field with your target version number
        - This version must match the version in `modal-block.php` and your newest Changelog section
        - Use the format `v#.#.#` for your version tag
    - Leave the "Branch to tag" field as `release` (we will add the tag on the release branch containing the latest built code)
    - Click "Run workflow"

[![Screenshot of Run workflow dropdown form being filled out](./.github/docs/release-tagging-action.jpg)](./.github/docs/release-tagging-action.jpg)

Once the workflow completes, your new version should be [tagged](https://github.com/humanmade/modal-block/tags) and available in the list of [releases](https://github.com/humanmade/modal-block/releases)

License
-------

[](#license)

GPL-2.0-or-later

Author
------

[](#author)

Human Made Limited -

###  Health Score

42

—

FairBetter than 90% of packages

Maintenance83

Actively maintained with recent releases

Popularity20

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 68.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

88d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/55361215?v=4)[Pamela Ribeiro](/maintainers/pamprn09)[@pamprn09](https://github.com/pamprn09)

![](https://www.gravatar.com/avatar/a498e093283b7b42aa63d5f75851cda7ec4c4e2137cb8482e02d3181b48eafa3?d=identicon)[kadamwhite](/maintainers/kadamwhite)

---

Top Contributors

[![pamprn09](https://avatars.githubusercontent.com/u/55361215?v=4)](https://github.com/pamprn09 "pamprn09 (24 commits)")[![kadamwhite](https://avatars.githubusercontent.com/u/442115?v=4)](https://github.com/kadamwhite "kadamwhite (11 commits)")

---

Tags

blockswordpresswordpress-plugin

### Embed Badge

![Health badge](/badges/humanmade-modal-block/health.svg)

```
[![Health](https://phpackages.com/badges/humanmade-modal-block/health.svg)](https://phpackages.com/packages/humanmade-modal-block)
```

###  Alternatives

[promethys/revive

A 'RecycleBin' page where users can restore or delete permanently soft-deleted models.

161.2k](/packages/promethys-revive)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)