Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ build/
node_modules/
vendor/

# Lock files
package-lock.json
composer.lock

# Optional npm cache directory
.npm

Expand Down
1 change: 0 additions & 1 deletion .husky/commit-msg

This file was deleted.

1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ Prefix the change with one of these keywords:

## [Unreleased]

- _Added_: Commands for setup and reset
- _Fixed_: Check for autoload.php before requiring it.
- _Fixed_: Missing wp-env script and some documentation changes.
- _Removed_: Commitlint requirements
126 changes: 62 additions & 64 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ This plugin serves as a foundational template for WordPress block development, u

## Table of Contents

- [Core Features & Architecture](#core-features--architecture)
- [Block Architecture](#block-architecture)
- [Unified Block Management](#unified-block-management)
- [Efficient Asset Loading](#efficient-asset-loading)
- [Build System](#build-system)
- [Asset Management](#asset-management)
- [Technical Implementation](#technical-implementation)
- [Development Environment](#development-environment)
- [Prerequisites](#prerequisites)
- [Getting Setup](#getting-setup)
- [Local WordPress Environment](#local-wordpress-environment)
- [Local Site Info](#local-site-info)
- [Troubleshooting](#troubleshooting)
- [Development Commands](#development-commands)
- [Coding Standards](#coding-standards)
- [Project Structure](#project-structure)
- [Core Features & Architecture](#core-features--architecture)
- [Block Architecture](#block-architecture)
- [Unified Block Management](#unified-block-management)
- [Efficient Asset Loading](#efficient-asset-loading)
- [Build System](#build-system)
- [Asset Management](#asset-management)
- [Technical Implementation](#technical-implementation)
- [Development Environment](#development-environment)
- [Prerequisites](#prerequisites)
- [Getting Setup](#getting-setup)
- [Local WordPress Environment](#local-wordpress-environment)
- [Local Site Info](#local-site-info)
- [Troubleshooting](#troubleshooting)
- [Development Commands](#development-commands)
- [Coding Standards](#coding-standards)
- [Project Structure](#project-structure)

## Core Features & Architecture

Expand All @@ -31,52 +31,52 @@ This plugin serves as a foundational template for WordPress block development, u

The plugin provides a structured approach to managing multiple block types:

- Static Blocks: Traditional Gutenberg blocks rendered entirely in JavaScript
- Dynamic Blocks: Server-side rendered blocks using PHP for dynamic content
- Interactive Blocks: Client-side interactive blocks with JavaScript functionality
- Static Blocks: Traditional Gutenberg blocks rendered entirely in JavaScript
- Dynamic Blocks: Server-side rendered blocks using PHP for dynamic content
- Interactive Blocks: Client-side interactive blocks with JavaScript functionality

#### Efficient Asset Loading

Each block operates as an independent unit, similar to single-block plugins, with:

- Isolated asset loading - scripts and styles load only when blocks are used
- Separate frontend and editor bundles to optimize performance
- Smart asset versioning through WordPress's build process (the asset.php files automatically track dependencies and versions based on content changes)
- Isolated asset loading - scripts and styles load only when blocks are used
- Separate frontend and editor bundles to optimize performance
- Smart asset versioning through WordPress's build process (the asset.php files automatically track dependencies and versions based on content changes)

### Build System

#### Asset Management

The plugin uses WordPress's modern build system with some notable features:

- Automatic version hashing through `.asset.php` files
- The version numbers in `Enqueues.php` are dynamically generated during build, preventing cache issues and ensuring users always get the latest block versions
- Dependencies are automatically tracked and included in the build process
- Automatic version hashing through `.asset.php` files
- The version numbers in `Enqueues.php` are dynamically generated during build, preventing cache issues and ensuring users always get the latest block versions
- Dependencies are automatically tracked and included in the build process

The build process supports loading an additional script into the block editor for:

- Block variations and modifications
- Custom style variations
- Custom block categories
- Other block related functionality
- Block variations and modifications
- Custom style variations
- Custom block categories
- Other block related functionality

### Technical Implementation

The plugin demonstrates modern WordPress development practices:

- Proper namespacing and class structure
- Clean separation of concerns between editor and frontend code
- WordPress coding standards compliance
- Development tooling for code quality (ESLint, PHP_CodeSniffer, Prettier)
- Proper namespacing and class structure
- Clean separation of concerns between editor and frontend code
- WordPress coding standards compliance
- Development tooling for code quality (ESLint, PHP_CodeSniffer, Prettier)

### Development Environment

The plugin includes a complete development environment with:

- Docker-based local WordPress setup through `wp-env`
- Hot reloading for development
- Automated build processes for production
- Comprehensive linting and formatting tools
- Docker-based local WordPress setup through `wp-env`
- Hot reloading for development
- Automated build processes for production
- Comprehensive linting and formatting tools

This structure provides a robust foundation for building complex block-based solutions while maintaining clean code organization and optimal performance.

Expand All @@ -86,10 +86,10 @@ This structure provides a robust foundation for building complex block-based sol

Before you begin, ensure you have the following installed:

- Node.js (v16 or higher)
- Docker (if you intend to use `wp-env`)
- Composer
- Git
- Node.js (v16 or higher)
- Docker (if you intend to use `wp-env`)
- Composer
- Git

## Getting Setup

Expand All @@ -98,54 +98,52 @@ This plugin can be cloned into the plugins folder of an existing local WordPress
```
git clone https://github.com/troychaplin/multi-block-starter.git
cd multi-block-starter
nvm install
npm install
composer install
npm run setup
```

## Local WordPress Environment

This project includes [@wordpress/env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) as an optional local development environment. You can run the following to start and stop the Docker container:

- `npm run wp-env start`
- `npm run wp-env stop`
- `npm run wp-env start`
- `npm run wp-env stop`

### Local Site Info

- Site: http://localhost:8888
- Admin: http://localhost:8888/wp-admin
- Login: `admin`
- Password: `password`
- Site: http://localhost:8888
- Admin: http://localhost:8888/wp-admin
- Login: `admin`
- Password: `password`

### Troubleshooting

If wp-env issues occur try the following:

- `npm run wp-env stop`
- `npm run wp-env clean`
- `npm run wp-env start`
- `npm run wp-env stop`
- `npm run wp-env clean`
- `npm run wp-env start`

## Development Commands

- `npm start` - Start development mode with hot reloading
- `npm run build` - Build production assets
- `npm run lint:js` - Lint JavaScript files
- `npm run lint:css` - Lint CSS files
- `npm run format` - Format code using WordPress standards
- `npm start` - Start development mode with hot reloading
- `npm run build` - Build production assets
- `npm run lint:js` - Lint JavaScript files
- `npm run lint:css` - Lint CSS files
- `npm run format` - Format code using WordPress standards

## Coding Standards

This project follows WordPress coding standards using:

- PHP_CodeSniffer with WordPress Coding Standards
- ESLint with WordPress configuration
- Prettier for code formatting
- PHP_CodeSniffer with WordPress Coding Standards
- ESLint with WordPress configuration
- Prettier for code formatting

Required VS Code extensions:

- PHP CodeSniffer
- ESLint
- Prettier
- PHP CodeSniffer
- ESLint
- Prettier

### Troubleshooting

Expand Down
Loading