WP-React-Kit

A simple starter kit to work in WordPress plugin development using WordPress Rest API, WP-script, React, React Router, @wordpress/components, @wordpress/dataviews, SCSS, PostCSS, Eslint, WP-Data, WP-Data Store, React Components, React CRUD, i18n, PHPUnit Test, JestUnit Test, WordPress Playwright e2e Test, Gutenberg blocks and PHP OOP plugin architecture easily in a minute.

---

What's included?

1. WordPress Rest API
2. WP-script Setup
3. React
4. React Router
5. TypeScript
6. Scss
7. PostCSS
8. Eslint
9. WP-Data
10. WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
11. React Components
12. React CRUD Operations - Create, Reade, Update, Delete, Status changes and so many...
13. Internationalization - WP i18n
14. PHPUnit Test [Test + Fix]
15. JestUnit Test
16. WordPress Playwright e2e Test
17. PHP OOP plugin architecture [Traits + Interfaces + Abstract Classes]
18. Gutenberg blocks — admin + public job board (Interactivity API)
19. Block patterns with editor Replace layouts (jobs list + job detail)
20. Auto-created Jobs page on plugin activation

Quick Start

# Clone the Git repository
git clone https://github.com/ManiruzzamanAkash/wp-react-kit.git

# Install PHP-composer dependencies [It's empty]
composer install

# Install node module packages
npm i

# Start development mode
npm start

# Start development with hot reload (Frontend components will be updated automatically if any changes are made)
npm run start:hot

# To run in production
npm run build

After running start, or build command, there will be a folder called /build will be generated at the root directory.

Activate the plugin

You need activate the plugin from plugin list page. http://localhost/wpex/wp-admin/plugins.php

Zip making process [Build, Localization, Version replace & Zip]

# One by one.
npm run build
npm run makepot
npm run version
npm run zip

# Single release command - which actually will run the above all in single command.
npm run release

After running release command, there will be a folder called /dist will be generated at the root directory with wp-react-kit.zip project files.

Run PHP Unit Test

composer run test

Run all tests by single command - PHPCS, PHPUnit

composer run test:all

Run Jest Unit Test

npm run test:unit

Run Playwright e2e Test

Playwright doc link: https://playwright.dev/docs/running-tests

First-time setup

npm run test:e2e:prepare

Requirements: Docker running (npm run env:start).

Normal e2e test

npm run test:e2e

Interactive e2e test

npm run test:e2e:watch

For more about e2e Tests running please check - https://playwright.dev/docs/running-tests

PHP Coding Standards - PHPCS

Get all errors of the project:

composer run phpcs

Fix all errors of the project:

composer run phpcbf

Full Composer test run:

composer run test:all

Browse Plugin

http://localhost/wpex/wp-admin/admin.php?page=jobplace#/

Where, /wpex is the project root folder inside /htdocs.

Or, it could be your custom processed URL.

REST API

Namespace: job-place/v1 — base URL {site_url}/wp-json/job-place/v1.

Replace {site_url} with your install (e.g. http://foodfruitservice.local or http://localhost/wpex).

Resource	Methods	Route
Job types	GET	/job-types
Jobs	GET, POST, DELETE	/jobs, /jobs/stats, /jobs/{id|slug}
Jobs	PUT / PATCH	/jobs/{id}
Companies	GET, POST, DELETE	/companies, /companies/stats, /companies/dropdown, /companies/{id}
Companies	PUT / PATCH	/companies/{id}
Job categories	GET, POST, DELETE	/job-categories, /job-categories/stats, /job-categories/{id}
Job categories	PUT / PATCH	/job-categories/{id}
Settings	GET, PUT / PATCH	/settings (manage_options)

Postman: import docs/postman/Job-Place-v1.postman_collection.json and set the site_url collection variable. The old Postman cloud collection predates v1.0.0 and is no longer maintained.

Full reference (parameters, filters, response shapes, examples): Rest-API-Docs.MD

Version & Changelogs

See changelog.txt for the full history.

v1.0.0 - 31/05/2026

1. Feat: Jobs DataViews admin, categories, companies, and settings.
2. Feat: Public job board blocks with Interactivity API search and pagination.
3. Feat: Block patterns with editor Replace for list and detail layouts.
4. Enhancement: Full admin refactor with @wordpress/components and @wordpress/dataviews.

v0.9.0 - 20/12/2024

1. Fix: Updated PHP version support > 8.0 and some more library support
2. Fix: When Editing a Job, last job is being edited
3. Update: Tested upto WordPress 6.7.1

v0.8.0 - 24/05/2023

1. New feature: WordPress Playwright test-e2e-utils added.
2. New feature: Some Gutenberg blocks has support for Playwright test.

v0.7.0 - 01/01/2023

1. Fix: Dynamic block renderer issue.
2. Fix: Asset registering multiple times issue.

v0.5.0 - 15/11/2022

1. New Feature : Job Create.
2. New Feature : Job Update.
3. New Feature : Job Delete.
4. New Feature : Job Status change.
5. New API: Company dropdown list.
6. New: Updated logo icon and plugin name.
7. New Components: Input Text-Editor, Improved design.
8. Refactor: Refactored codebase and updated docs.
9. New: Job type seeder.
10. Chore: Zip file generator.
11. Chore: i18n localization generator.

Version & Changelogs

v0.4.1 - 18/08/2022

1. Added Jest Unit Test Setup.
2. Added some dummy Jest Unit Test.
3. Fix #11 - Version naming while installing.

v0.4.0 - 12/08/2022

1. Added many re-usable general components.
2. Header Component refactored and re-designed.
3. WP-Data setup and made Job Store.
4. Job List Page frontend added.

v0.3.1 - 11/08/2022

1. PHPUnit Test cases setup.
2. PHPUnit Test cases added for Job Manager and Job REST API's.

v0.3.0 - 02/08/2022

1. Necessary traits to handle - sanitization, query.
2. Advanced setup for migration, seeder, REST API.
3. Jobs, Job Types REST API developed.

Options for specific files:

Get specific file errors of the project:

vendor/bin/phpcs job-place.php

Fix specific file errors of the project:

vendor/bin/phpcbf job-place.php

Versions

Simple Version with raw PHP

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimple

Version with EsLint and i18n Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimpleEslint

Version with EsLint, i18n and React Router Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vReactRouter

Version with PostCSS and Tailwind CSS Setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vTailwindCss

Version with PHPCS setup

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPHPCS

Version with PHP OOP Architecture

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPhpOOP

File structure:

Simple Version Code-Structure:

Demo with Simple Version

Demo in WordPress plugin:

Screenshots

Screenshots live in demo-screenshots/.

Front-end job board

Block editor — Jobs List block

Block editor — layout patterns (Replace)

Published jobs page

wp-admin (Job Manager)

Dashboard

Jobs list

Jobs list — filters

Create job

Companies

Companies — side drawer

Job categories

Settings

Job board (front-end blocks)

Interactive job listings for block themes and classic themes with the block editor. Requires npm run build so build/blocks/* exists.

Quick setup

1. Activate the plugin — a Jobs page is created at /jobs/ (customizable slug).
2. Edit the page in the Site Editor or block editor.
3. Select the Jobs List block → use Replace in the toolbar to pick a layout pattern.
4. Publish. Search and pagination work without full page reloads (Interactivity API).

Plugin row links: View Jobs Board / Edit Jobs Board.

Block overview

Block	Purpose
wrc/jobs-list	Board wrapper (query, search, list, pagination)
wrc/jobs-template	Layout repeated for each job
wrc/job-page	Single job detail (used in single-job template)
Field blocks	Title, company, location, salary, badges, apply button, etc.

Patterns (templates/patterns/)

Jobs list: Default, Grid, Compact, Featured
Job detail: Default, Compact, Split

Patterns register against blockTypes so Replace only shows relevant layouts. Categories: jobplace_jobs, jobplace_jobs_list, jobplace_job_detail.

Single job pages

• Block template: templates/templates/single-job.html
• Permalink settings: Job Manager → permalinks (see admin app)
• Router: includes/Routing/JobDetailRouter.php

SEO-friendly markup

• List uses role="list"; each job is an <article>.
• Job titles link to the detail URL.
• Text fields are escaped in PHP view.php templates.

Settings

Open Job Manager → Settings in wp-admin (#/settings).

Setting	What it does
Global job detail layout	Picks a job detail pattern (Default, Compact, Split) for all /jobs/{slug}/ URLs
Jobs list page	Which WordPress page contains the Jobs List block
Default jobs per page	Fallback page size for listings
Default apply button text	Label when Apply blocks have no custom text

REST: GET/PUT /wp-json/job-place/v1/settings. Permalink base is still under Settings → Permalinks in WordPress.

Developer notes

• Block sources: src/blocks/ — editor JS + view.php render callbacks.
• Interactivity store: src/scripts/jobs/ (@jobplace/jobs).
• Global settings: includes/Common/Settings.php, src/pages/settings/SettingsPage.tsx.
• Shared styles: src/styles/jobs-board.scss (BEM: nest &__element under block roots).
• Agent/docs detail: see AGENTS.md and CLAUDE.md.

Gutenberg blocks (legacy demo)

Inside src/blocks you'll also find sample blocks (e.g. header). Job board blocks use the wrc/* namespace and dynamic PHP templates.

See the Screenshots section above for current Job Manager and job board demos. The legacy wrc/header sample block remains under src/blocks/header/.

Contribution

Contribution is open and kindly accepted. Before contributing, please check the issues tab if anything in enhancement or bug. If you want to contribute new, please create an issue first with your enhancement or feature idea. Then, fork this repository and make your Pull-Request. I'll approve, if everything goes well.

Contact

It's me, Maniruzzaman Akash. Find me at manirujjamanakash@gmail.com