Skip to content

workflow.md

Latest commit

 

History

History
166 lines (120 loc) · 3.77 KB

workflow.md

File metadata and controls

166 lines (120 loc) · 3.77 KB

Basecoat - Starter Theme

Basecoat is a simple WordPress starter theme designed for building block themes, featuring a development workflow with pre-made PHP includes for CSS and JS on both the front-end and Gutenberg editor, PHP linting, a modern npm/esbuild workflow, and a zip export function for easy manual deployment.

🚀 Getting Started

Prerequisites

  • PHP 7.4 or higher (tested up to PHP 8.4)
  • Composer
  • Node.js & npm
  • WordPress >= 6.0

Installation

Clone the repository and install the dependencies:

composer install
npm install --dev

Development Workflow

🧹 Code Quality

Basecoat enforces strict coding standards and static analysis to avoid bugs and maintain clean code.

PHP Linting

Run PHP linting with:

composer run lint:php

This will:

  • Use PHP CS Fixer to automatically fix code style issues.
  • Use PHPStan for static analysis and bug detection.

JavaScript Linting

Lint your JavaScript files using ESLint:

npm run lint-js

This will:

  • Check for code quality and consistency.
  • Automatically fix some issues using Prettier & ESLint.

SCSS Linting

Lint SCSS files with Prettier:

npm run lint-scss

This will:

  • Format SCSS code according to a consistent style.
  • Automatically fix code style issues where possible.

Theme.json Formatting

Format Theme.json file with Prettier:

npm run format-theme-json

This will:

  • Format Theme.json file according to a consistent style.

Code Build

npm scripts are used to automate tasks such as compiling SCSS, linting code, generating translations, and creating a zip archive of the theme. Below are the key build commands:

Build CSS

Compile SCSS files into CSS using esbuild, generating sourcemaps for easier debugging.

npm run build-css

This will:

  • Compile SCSS files into minified CSS (theme.css).
  • Create source maps for easier debugging (theme.css.map).
  • Process CSS with PostCSS (autoprefixer, media query optimization, etc.).

Build JavaScript

Process JavaScript files (currently only linting, no compilation).

npm run build-js

This will:

  • Lint JavaScript files for code quality and consistency.

Build Translations

Generate translation files (.pot) for internationalization.

npm run build-i18n

This will:

  • Generate or update the .pot translation file in the languages/ directory.
  • Use WP-CLI to extract translatable strings from PHP files.

Watch Files

Watch SCSS files and trigger the build task automatically.

npm run watch

or

npm run watch-scss

This will:

  • Watch all SCSS files in the assets/scss/ directory for changes.
  • Trigger a rebuild of the CSS whenever a change is detected.

Complete Build

Run the complete build process (linting, building, and packaging).

npm run build

or

npm run default

This will:

  • Lint SCSS files
  • Build CSS
  • Lint JavaScript
  • Lint PHP
  • Format theme.json
  • Generate translations
  • Create a zip archive of the theme

Zip Theme

Create a zip archive of the theme.

npm run zip-theme

This will:

  • Create a .zip archive of the theme, excluding unnecessary files like node_modules and .git.
  • Save the archive in the root directory of the project (e.g., basecoat.zip).
Uploading Your Theme

Once the zip file is created, you can upload it to a WordPress site:

  1. Log in to the WordPress admin dashboard.
  2. Navigate to Appearance > Themes.
  3. Click Add New and then click Upload Theme.
  4. Choose the zip file (basecoat.zip) generated by Gulp and click Install Now.
  5. After installation, click Activate to use the theme.

License

Basecoat is licensed under the GPL-2.0-or-later license. See the LICENSE file for more details.