Skip to content

WordPress/wporg-showcase-2022

Repository files navigation

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
```