WordPress.org Parent Theme, 2021 edition

Development

Prerequisites

Docker
Node/npm
Yarn
Composer

Setup

Set up repo dependencies.
```
yarn setup:tools
```
Build the assets. The theme can't be activated until this step is done.
```
yarn workspaces run build
```
Start the local environment.
```
yarn wp-env start
```
Run the setup script.
```
yarn setup:wp
```
Visit site at localhost:8898. Note the nonstandard port, this will enable the parent theme + any child theme projects to be up at the same time.
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
```
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
```

Asset management

Build assets once: yarn workspace wporg-parent-2021 build
Watch assets and build on changes: yarn workspace wporg-parent-2021 start

If you want to test changes to the parent theme against a child theme in another repository, you can follow the instructions in the Main theme readme.

Design

Layout

By default, the main content width is 680px and wide width is 1160px.

Colors

These colors map to the values used in Figma.

In block attributes (patterns, templates, etc), use the slug directly for a value, ex "backgroundColor":"blueberry-1", though some attributes will use the var format, ex "text":"var:preset|color|white".
In CSS, the custom property is generated using the format --wp--preset--color--${slug}, ex, --wp--preset--color--charcoal-1, --wp--preset--color--white.

Name	slug	Hex
Charcoal 0	`charcoal-0`	#1a1919
Charcoal	`charcoal-1`	#1e1e1e
Charcoal 2	`charcoal-2`	#23282d
Charcoal 3	`charcoal-3`	#40464d
Charcoal 4	`charcoal-4`	#656a71
Charcoal 5	`charcoal-5`	#979aa1
Light Grey	`light-grey-1`	#d9d9d9
Light Grey 2	`light-grey-2`	#f6f6f6
White	`white`	#ffffff
Dark Blueberry	`dark-blueberry`	#1d35b4
Deep Blueberry	`deep-blueberry`	#213fd4
Blueberry	`blueberry-1`	#3858e9
Blueberry 2	`blueberry-2`	#7b90ff
Blueberry 3	`blueberry-3`	#c7d1ff
Blueberry 4	`blueberry-4`	#eff2ff
Pomegrade	`pomegrade-1`	#e26f56
Pomegrade 2	`pomegrade-2`	#ffb7a7
Pomegrade 3	`pomegrade-3`	#ffe9de
Acid Green	`acid-green-1`	#33f078
Acid Green 2	`acid-green-2`	#c7ffdb
Acid Green 3	`acid-green-3`	#e2ffed
Lemon	`lemon-1`	#fff972
Lemon 2	`lemon-2`	#fffcb5
Lemon 3	`lemon-3`	#fffdd6

Fonts

Font families

These three font families are available to switch in the editor, for blocks that support custom font family (ex, Headings).

Example of the generated property: var(--wp--preset--font-family--eb-garamond)

Name	Slug	Font family
EB Garamond	`eb-garamond`	`'EB Garamond', serif`
Inter	`inter`	`'Inter', sans-serif`
Monospace	`monospace`	`'IBM Plex Mono', monospace`

Font sizes

These settings can be used in the editor & should also apply the correct line-height and switch to small-screen values (at 600px). The line heights are applied based on block classes, ex .has-heading-1-font-size applies the heading-1 line height too.

Example of the generated property: --wp--preset--font-size--extra-small

Name	Slug	Size / LH	Small Size / LH
Extra Small	`extra-small`	12px/1.67	no change
Small	`small`	14px/1.71	no change
Normal	`normal`	16px/1.875	no change
Large	`large`	20px/1.7	no change
Extra Large	`extra-large`	24px/1.58	20px/1.5
Huge	`huge`	32px/1.5	no change
Heading 6	`heading-6`	22px/1.27	18px/1.22
Heading 5	`heading-5`	26px/1.3	20px/1.2
Heading 4	`heading-4`	30px/1.33	22px/1.09
Heading 3	`heading-3`	36px/1.28	26px/1.15
Heading 2	`heading-2`	50px/1.2	30px/1.07
Heading 1	`heading-1`	70px/1.05	52px/1.08
CTA Heading	`heading-cta`	120px/1	52px/1.08

Spacing

The responsive/scaling size values are still being updated, but for now they are as follows. The "Min"/"Max" columns refer to where the scaling stops at each end of the scale. For example, at 590px, --wp--preset--spacing--40 is 30px; while at 1320px, --wp--preset--spacing--80 is 120px.

Name	Slug	Value	Min	Max
3X-Small	`10`	10px
2X-Small	`20`	20px
X-Small	`30`	30px
Small	`40`	clamp(30px, 5vw, 50px)	600	1000
Medium	`50`	clamp(40px, calc(5vw + 10px), 60px)	600	1000
Large	`60`	clamp(20px, calc(10vw - 40px), 80px)	600	1000
X-Large	`70`	100px
2X-Large	`80`	clamp(80px, calc(6.67vw + 40px), 120px)	600	1200
3X-Large	`90`	clamp(80px, 13.33vw, 160px)	600	1200
Edge Spacing	`edge-space`	80px; <890px = 20px

History

This is started as a fork of Blockbase. The News Theme was the first iteration of this generation of new sites.

WordPress / wporg-parent-2021

readme