Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update theme.json docs with new properties added #26891

Merged
merged 2 commits into from
Nov 11, 2020
Merged

Update theme.json docs with new properties added #26891

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e8148e1
Update docs with new properties added
oandregal Nov 11, 2020
843e2fa
Fix markdown
oandregal Nov 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 49 additions & 29 deletions docs/designers-developers/developers/themes/theme-json.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ Every context has the same structure, divided in two sections: `settings` and `s
"some/context": {
"settings": {
"color": [ ... ],
"typography": [ ... ],
"custom": [ ... ],
"spacing": [ ... ],
"custom": [ ... ]
"typography": [ ... ]
},
"styles": {
"color": { ... },
Expand All @@ -86,6 +86,7 @@ The settings section has the following structure and default values:
"link": false, /* true to opt-in, as in add_theme_support('experimental-link-color') */
"palette": [ ... ], /* color presets, as in add_theme_support('editor-color-palette', ... ) */
},
"custom": { ... },
"spacing": {
"customPadding": false, /* true to opt-in, as in add_theme_support('custom-spacing') */
"units": [ "px", "em", "rem", "vh", "vw" ], /* filter values, as in add_theme_support('custom-units', ... ) */
Expand All @@ -94,9 +95,12 @@ The settings section has the following structure and default values:
"customFontSize": true, /* false to opt-out, as in add_theme_support( 'disable-custom-font-sizes' ) */
"customLineHeight": false, /* true to opt-in, as in add_theme_support( 'custom-line-height' ) */
"dropCap": true, /* false to opt-out */
"fontFamilies": [ ... ], /* font family presets */
"fontSizes": [ ... ], /* font size presets, as in add_theme_support('editor-font-sizes', ... ) */
},
"custom": { ... }
"fontWeights": [ ... ], /* font weight presets */
"textDecorations": [ ... ], /* text decoration presets */
"textTransforms": [ ... ] /* text transform presets */
}
}
}
}
Expand Down Expand Up @@ -230,19 +234,24 @@ Note that, the name of the variable is created by adding `--` in between each ne

Each block declares which style properties it exposes. This has been coined as "implicit style attributes" of the block. These properties are then used to automatically generate the UI controls for the block in the editor, as well as being available through the `experimental-theme.json` file for themes to target.

```
```json
{
"some/context": {
"styles": {
"color": {
"background": <value>,
"gradient": <value>,
"link": <value>,
"text": <value>
"background": "value",
"gradient": "value",
"link": "value",
"text": "value"
},
"typography": {
"fontSize": <value>,
"lineHeight": <value>
"fontFamily": "value",
"fontSize": "value",
"fontStyle": "value",
"fontWeight": "value",
"lineHeight": "value",
"textDecoration": "value",
"textTransform": "value"
}
}
}
Expand Down Expand Up @@ -299,42 +308,53 @@ These are the current color properties supported by blocks:
| Columns | Yes | Yes | Yes | Yes |
| Group | Yes | Yes | Yes | Yes |
| Heading [1] | Yes | - | Yes | Yes |
| List | Yes | Yes | - | Yes |
| Media & text | Yes | Yes | Yes | Yes |
| Navigation | Yes | - | - | Yes |
| Paragraph | Yes | - | Yes | Yes |
| Post Author | Yes | Yes | Yes | Yes |
| Post Comments | Yes | Yes | Yes | Yes |
| Post Comments Count | Yes | Yes | - | Yes |
| Post Comments Form | Yes | Yes | Yes | Yes |
| Post Date | Yes | Yes | - | Yes |
| Post Excerpt | Yes | Yes | Yes | Yes |
| Post Hierarchical Terms | Yes | Yes | Yes | Yes |
| Post Tags | Yes | Yes | Yes | Yes |
| Post Title | Yes | Yes | - | Yes |
| Site Tagline | Yes | Yes | - | Yes |
| Site Title | Yes | Yes | - | Yes |
| Template Part | Yes | Yes | Yes | Yes |

[1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).

#### Spacing Properties

| Context | Padding |
| --- | --- |
| Cover | Yes |
| Group | Yes |

#### Typography Properties

These are the current typography properties supported by blocks:

| Context | Font Size | Line Height |
| --- | --- | --- |
| Global | Yes | Yes |
| Columns | - | - |
| Group | - | - |
| Heading [1] | Yes | Yes |
| Media & text | - | - |
| Paragraph | Yes | Yes |
| Post Author | Yes | Yes |
| Post Comments | Yes | Yes |
| Post Comments Count | Yes | Yes |
| Post Comments Form | Yes | Yes |
| Post Date | Yes | Yes |
| Post Excerpt | Yes | Yes |
| Post Tags | Yes | Yes |
| Post Title | Yes | Yes |
| Site Tagline | Yes | Yes |
| Site Title | Yes | Yes |
| Context | Font Family | Font Size | Font Style | Font Weight | Line Height | Text Decoration | Text Transform |
oandregal marked this conversation as resolved.
Show resolved Hide resolved
| --- | --- | --- | --- | --- | --- | --- | --- |
| Global | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Heading [1] | - | Yes | - | - | Yes | - | - |
| List | - | Yes | - | - | - | - | - |
| Navigation | Yes | Yes | Yes | Yes | - | Yes | Yes |
| Paragraph | - | Yes | - | - | Yes | - | - |
| Post Author | - | Yes | - | - | Yes | - | - |
| Post Comments | - | Yes | - | - | Yes | - | - |
| Post Comments Count | - | Yes | - | - | Yes | - | - |
| Post Comments Form | - | Yes | - | - | Yes | - | - |
| Post Date | - | Yes | - | - | Yes | - | - |
| Post Excerpt | - | Yes | - | - | Yes | - | - |
| Post Hierarchical Terms | - | Yes | - | - | Yes | - | - |
| Post Tags | - | Yes | - | - | Yes | - | - |
| Post Title | Yes | Yes | - | - | Yes | - | - |
| Site Tagline | Yes | Yes | - | - | Yes | - | - |
| Site Title | Yes | Yes | - | - | Yes | - | - |

[1] The heading block represents 6 distinct HTML elements: H1-H6. It comes with selectors to target each individual element (ex: core/heading/h1 for H1, etc).