WordPress.org Parent Theme, 2021 edition

Development

Prerequisites

• Docker
• Node/npm
• Yarn
• Composer

Setup

1. Set up repo dependencies.

   yarn setup:tools

2. Build the assets. The theme can't be activated until this step is done.

   yarn workspaces run build

3. Start the local environment.

   yarn wp-env start

4. Run the setup script.

   yarn setup:wp

5. 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.

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

• 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.