H5P Custom Block

A WordPress plugin that add custom block on the editor for H5P content.

📋 Table of Contents

• About
• Features
• Requirements
• Installation
• Editing and Development
• Project Structure
• Build Process

ℹ️ About

H5P Custom Block is a WordPress plugin designed to enhance H5P in the editor.
You can add H5P content without using shortcode, instead you can add block and choose the content from dropdown menu, you can also use other users content.

✨ Features

• 🔄 Add Block in the editor to add H5P Content
• 🧱 Easy integration with WordPress
• ⚙️ Simple customization using modern web technologies
• 🚀 Lightweight and fast build process

🧰 Requirements

Before starting, make sure you have the following installed:

• Docker ≥ 20.10
• Docker Compose ≥ 2.0
• VS Code with Dev Containers extension
• Node.js ≥ 18
• npm ≥ 8

📦 Installation

Installing the plugin is very easy:

1. Copy the following files and folders into your WordPress plugins directory:

   wp-content/plugins/h5p-custom-block/

   Include:

   build/
   h5p-custom-block.php
   src/

2. Activate the plugin from your WordPress Admin Dashboard under Plugins → Installed Plugins.

💻 Editing and Development

To modify and build the plugin locally:

1. Clone the repository

2. Open the project in VS Code.

3. Reopen in a Dev Container (Docker must be running).

4. Install dependencies:

   npm install

5. Make your changes in the src/ folder.

6. Build the plugin:

   npm run build

7. The compiled version will appear in the build/ directory.

🗂️ Project Structure

h5p-custom-block/
├── .devcontainer/                  # Dev Container
├── build/                  # Compiled plugin files (output)
├── src/h5p-custom-block                    # Source code (editable)
├── h5p-custom-block.php    # Main plugin entry point
├── package.json            # Node.js configuration
└── README.md               # Documentation

⚙️ Build Process

The plugin uses a modern build system powered by Node.js and npm.

• Run npm install to install dependencies
• Run npm run build to generate the production build
• The final assets will be placed in the build/ folder