Skip to content

Latest commit

 

History

History
178 lines (128 loc) · 6.74 KB

readme.md

File metadata and controls

178 lines (128 loc) · 6.74 KB
Raw

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.