itsamoreh.dev WordPress block theme

What is this?

This is the WordPress block theme in use on my personal website itsamoreh.dev.

This theme was started from itsamoreh/block-theme-starter.

Quick Start

1. Make sure you're on node version 18.12.1 or later.
2. Run npm install from this directory to install dependencies.
3. Run npm run watch to watch CSS, and JavaScript.
4. Optionally follow the local environment instructions below to spin up a wp-env environment.

CSS

This theme uses PostCSS. The main CSS entrypoint is assets/main.css. All CSS is imported in assets/js/editor/index.js and assets/js/frontend/index.js, built with the rest of the build files then enqueued in functions.php for both the editor and the frontend.

Editor and Frontend JavaScript

This theme uses wp-scripts to build editor and frontend JS. The main editor entry is at assets/js/editor/index.js and the main frontend entry is at assets/js/frontend/index.js. CSS is imported in the JS files.

To build the JS, run the following command in your terminal:

npm run build:js

This will take the entry files, build them and all imports with wp-scripts, and output the files to build/editor.js and build/frontend.js. To watch for changes to your JS and automatically rebuild, run the following command in your terminal:

npm run watch:js

Optional Local Environment

This theme includes a .wp-env.json. To spin up a WordPress environment with wp-env first make sure Docker is installed. Then run the following command to start the environment:

npm run env:start

You can stop the environment with Docker Desktop or the stop command:

npm run env:stop

See the wp-env documentation for more details.