Skip to main content

​
Requirements

To contribute to this plugin, you need the following tools installed on your computer:

​
Core Dependencies

PHP

Version 7.2 or higher, preferably installed via Homebrew

Composer

Version 2.3 or higher, to install PHP dependencies

Node.js

Current LTS version (Node 22+), to install JavaScript dependencies

WordPress

To run the actual plugin

​
Development Tools

You should be running a Node version matching the current active LTS release or newer for this plugin to work correctly. You can check your Node.js version by typing node -v in the Terminal.

​
Node.js Version Management

If you have an incompatible version of Node in your development environment, you can use nvm to change node versions: 
nvm install
Using nvm is recommended, as it makes it easier to stay up-to-date with any Node.js version requirement changes in the project.

​
Initial Setup

1

Install Composer

Install Composer by following the installation instructions.Make sure to add composer to your $PATH if it is not already there. The local environment won’t run unless composer is in your $PATH.WSL users may also need to install make:
sudo apt-get install build-essential
2

Install PHP Dependencies

Install all required Composer packages:
composer install
3

Install JavaScript Dependencies

Install all required npm packages:
npm install

​
Development Workflow

​
PHP Development

Whether you use the pre-existing local environment or a custom one, any PHP code changes will be directly visible during development. No build process is required for PHP. PHP source files are located in:
  • includes/ - Core PHP classes and functionality
  • Plugin root files like web-stories.php

​
JavaScript Development

JavaScript requires a build process. Choose one of the following workflows: 
npm run dev

​
Development Mode Options

Development Build with Watch: 
npm run dev
Watches for JavaScript file changes and rebuilds automatically. This creates a development build that makes debugging easier. Development with React Fast Refresh: 
npm run serve
Automatically refreshes the app in the browser when you make changes. This provides the best developer experience as you don’t have to manually refresh your browser.
The npm run serve command is recommended for the best development experience with automatic browser refresh.

​
JavaScript Package Structure

The project uses a monorepo structure with packages in packages/:
  • story-editor/ - Main story editor UI
  • dashboard/ - Stories dashboard
  • design-system/ - Shared UI components
  • animation/ - Animation utilities
  • elements/ - Story element components
  • media/ - Media handling
  • e2e-tests/ - End-to-end tests
  • e2e-test-utils/ - E2E testing utilities

​
Next Steps

Local Environment

Set up your local WordPress environment

Project Architecture

Understand the project structure

Running Tests

Learn how to run and write tests

Contributing

Start contributing to the project

Build docs developers (and LLMs) love

Get started for freeTalk to us