Celestial FSE Starterkit

A WordPress Full Site Editing starter kit that provides a foundation for building modern WordPress themes and plugins.

Introduction

Celestial FSE is a comprehensive starter kit for WordPress development that leverages the power of Full Site Editing (FSE). FSE is a new approach to WordPress theme development that allows users to visually edit all parts of their site using blocks, including headers, footers, and other template parts.

This starter kit includes:

• A custom FSE theme that supports modern WordPress site building
• Custom blocks developed with React and the WordPress Block API
• Block scaffolding using @wordpress/create-block
• A plugin structure for extending WordPress functionality
• Local development environment configuration using wp-env
• CI/CD integration with CircleCI for automated linting and deployment
• Custom color palette configuration with theme.json

Development Environment

This project uses wp-env for local WordPress development. wp-env provides a quick and easy way to create a local WordPress environment using Docker.

To set up the local development environment:

1. Make sure you have Docker installed and running
2. Install wp-env globally:

   npm install -g @wordpress/env
   

3. Start the environment:

   wp-env start
   

The local WordPress site will be available at http://localhost:8888 (default credentials: admin/password).

Quick Start

To get started with development:

1. Navigate to the blocks directory:

   cd blocks
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run start
   

This will compile your blocks and watch for changes. The blocks in this project are scaffolded using @wordpress/create-block, which provides a standardized way to create custom WordPress blocks.

CI/CD Integration

This project includes CI/CD integration with CircleCI for automated linting and deployment workflows. The configuration enables:

• Automated deployment to WP Engine environments (development, staging, production)
• Deployment triggered by specific tags or branch commits
• Automated building of custom blocks before deployment
• Proper file structure preparation for WP Engine environments

The deployment process is configured to work with WP Engine hosting and requires the following environment parameters:

• prod_wpengine: Production environment slug
• stage_wpengine: Staging environment slug
• dev_wpengine: Development environment slug

For more details on the CI/CD configuration, see the .circleci/config.yml file.

Theme Configuration

The Celestial FSE Theme includes custom theme.json configuration with the following features:

• Custom color palette with a primary blue color
• Disabled default WordPress color palette
• Disabled custom color options to maintain design consistency
• Custom spacing scale with responsive values using CSS clamp()
• Custom font sizes with fluid typography support
• Removed default block patterns by disabling core-block-patterns support

These configurations help maintain design consistency across the site while providing the necessary customization options for content creators.

Documentation

• Colors Management

For a complete list of changes and features, please see the Changelog.