Merge pull request #1 from humanmade/hm-modal-plugin-creation

HM Modal plugin creation

Author: pamprn09

.github/workflows/release.yml

@@ -0,0 +1,20 @@
+name: Build to "release" branch
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  release:
+    name: "Update release branch"
+    uses: humanmade/hm-github-actions/.github/workflows/build-and-release-node.yml@a9a243d6c42fbff4a967d7ce0a6b307bc77251b7 # v0.1.0
+    with:
+      node_version: 20
+      source_branch: main
+      release_branch: release
+      built_asset_paths: build

.gitignore

@@ -0,0 +1,4 @@
+**/build
+
+/vendor/
+/node_modules/

README.md

@@ -0,0 +1,71 @@
+# HM Modal Block
+
+Simple modal block for the WordPress block editor.
+
+## 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
+
+- 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
+
+### For Development
+1. Clone or download to `/wp-content/plugins/hm-modal-block/`
+2. Run `npm install && npm run build`
+3. Activate the plugin in WordPress
+
+### For Production
+1. Download from the `dist` branch or release
+2. Upload to `/wp-content/plugins/hm-modal-block/`
+3. Activate the plugin in WordPress
+
+## 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
+
+### Setup
+```bash
+npm install
+composer install
+```
+
+### Build
+```bash
+npm run build
+```
+
+### Development Mode
+```bash
+npm start
+```
+
+## Requirements
+
+- WordPress 5.8+
+- PHP 7.4+
+- Node.js 20.10+
+
+## License
+
+GPL-2.0-or-later
+
+## Author
+
+Human Made Limited - https://humanmade.com

composer.json

@@ -0,0 +1,23 @@
+{
+	"name": "humanmade/modal-block",
+	"description": "Simple modal block for WordPress block editor",
+	"type": "wordpress-plugin",
+	"license": "GPL-2.0-or-later",
+	"authors": [
+		{
+			"name": "Human Made Limited",
+			"email": "[email protected]"
+		}
+	],
+	"require": {
+		"php": ">=8.2"
+	},
+	"require-dev": {
+		"humanmade/coding-standards": "dev-upgrade-wpcs"
+	},
+	"scripts": {
+		"lint": [
+			"phpcs --standard=phpcs.xml.dist"
+		]
+	}
+}

hm-modal-block.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * HM Modal Block Plugin.
+ **
+ * @link              https://humanmade.com
+ * @since             1.0.0
+ * @package           modal-block
+ *
+ * Plugin Name:       HM Modal Block
+ * Plugin URI:        https://humanmade.com
+ * Description:       Simple modal block for WordPress block editor.
+ * Version:           1.0.0
+ * Author:            Human Made Limited
+ * Author URI:        https://humanmade.com/
+ * License:           GPL-2.0+
+ * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
+ * Text Domain:       hm-modal
+ * Domain Path:       /languages
+ */
+
+namespace HM_Modal_Block;
+
+// If this file is called directly, abort.
+if ( ! defined( 'WPINC' ) ) {
+	die;
+}
+
+// Check if build files exist.
+if ( ! is_readable( __DIR__ . '/build/modal-content/block.json' ) ) {
+	trigger_error( 'Build files missing', E_USER_WARNING );
+	return;
+}
+
+// Setup custom blocks.
+add_action( 'init', function() {
+	register_block_type( __DIR__ . '/build/modal-trigger' );
+	register_block_type( __DIR__ . '/build/modal-content' );
+} );
+
+add_action( 'wp_enqueue_scripts', function() {
+	wp_script_add_data( 'hm-modal-trigger-view-script', 'strategy', 'async' );
+} );