Showcase Block Theme

A block-based child theme for WordPress.org Showcase, plus local environment.

This is as-yet incomplete, a starting point.

Development

Prerequisites

• Docker
• Node/npm
• Yarn
• Composer

Setup

1. Set up repo dependencies.

   yarn
   composer install
   yarn setup:tools

2. Start the local environment.

   yarn wp-env start

3. Run the setup script.

   yarn setup:wp

4. (optional) There may be times when you want to make changes to the Parent theme and test them with the Main them. To do that:

   1. Clone the Parent repo and follow the setup instructions in its readme.md file.
   2. Create a .wp-env.override.json file in this repo
   3. Copy the themes section from .wp-env.json and paste it into the override file. You must copy the entire section for it to work, because it won't be merged with .wp-env.json.
   4. Update the path to the Parent theme to the Parent theme folder inside the Parent repository you cloned above.

   {
   	"themes": [
   		"./source/wp-content/themes/wporg-showcase",
   		"./source/wp-content/themes/wporg-showcase-2022",
   		"../wporg-parent-2021/source/wp-content/themes/wporg-parent-2021"
   	]
   }

5. Visit site at localhost:8888.

6. Log in with username admin and password password.

Environment management

These must be run in the project's root folder, not in theme/plugin subfolders.

• Stop the environment.

  yarn wp-env stop

• Restart the environment.

  yarn wp-env start

• Build the theme's JavaScript

  yarn workspace wporg-showcase-2022-theme build

  or, automatically build on changes:

  yarn workspace wporg-showcase-2022-theme start

• Reset WordPress to a clean install, and reconfigure. This will nuke all local WordPress content!

  yarn wp-env clean all
  yarn setup:wp

• SSH into docker container.

  yarn wp-env run wordpress bash

• Run wp-cli commands. Keep the wp-cli command in quotes so that the flags are passed correctly.

  yarn wp-env run cli "post list --post_status=publish"

• Update composer dependencies and sync any repo-tools changes.

  yarn update:tools

• Run a lighthouse test.

  yarn lighthouse

• Check visual diffs.

Backstopjs can be manually run to create reference snapshots and then check for visual differences.

```bash
yarn backstop:reference
# change something in the code or content
yarn backstop:test
```