You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/designers-developers/developers/themes/theme-json.md
+46-13Lines changed: 46 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,8 +16,6 @@ The Block Editor surface API has evolved at different velocities, and it's now a
16
16
17
17
This describes the current efforts to consolidate the various APIs into a single point – a `experimental-theme.json` file that should be located inside the root of the theme directory.
18
18
19
-
When this file is present a few Block Editor mechanisms are activated.
20
-
21
19
### Presets become CSS Custom Properties
22
20
23
21
Presets such as [color palettes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-color-palettes), [font sizes](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-font-sizes), and [gradients](https://developer.wordpress.org/block-editor/developers/themes/theme-support/#block-gradient-presets) will be enqueued as CSS Custom Properties for themes to use.
@@ -98,7 +96,7 @@ Some of the functions are context-dependant. Take, as an example, the drop cap:
98
96
}
99
97
```
100
98
101
-
In the example above, we aim to encapsulate that the drop cap should be disabled globally but enabled in the paragraph context. The drop cap in the Image block context wouldn't make sense based on the current implementation so would be ignored, but it could be used by plugins that extend its functionality.
99
+
In the example above, we aim to encapsulate that the drop cap should be disabled globally but enabled in the paragraph context. Based on the current implementation, the drop cap in the Image block context wouldn't make sense so it would be ignored (but it could be used by plugins that extend its functionality).
102
100
103
101
## Current Status
104
102
@@ -159,16 +157,29 @@ If the `experimental-theme.json` contains any presets, these will take precedenc
159
157
160
158
Each block will declare 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.
161
159
162
-
The list of properties that are currently exposed via this method are:
160
+
#### Color Properties
161
+
162
+
| Context | Background | Gradient | Link | Text |
163
+
| --- | --- | --- | --- | --- |
164
+
| Global | Yes | - | - | - |
165
+
| Paragraph | Yes | - | Yes | Yes |
166
+
| Heading [1]| Yes | - | Yes | Yes |
167
+
| Group | Yes | Yes | Yes | Yes |
168
+
| Columns | Yes | Yes | Yes | Yes |
169
+
| Media & text | Yes | Yes | Yes | Yes |
170
+
171
+
[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).
172
+
173
+
#### Typography Properties
163
174
164
-
| Context |Text's Color | Background's Color | Background's Gradient |Font Size | Line Height |
165
-
| --- | --- | --- | --- | --- | --- |
166
-
| Global | - |Yes | - | - |- |
167
-
| Paragraph | Yes | Yes | - | Yes | Yes |
168
-
| Heading [1]| Yes | Yes | - | Yes | Yes |
169
-
| Group |Yes | Yes | Yes |- | - |
170
-
| Columns |Yes | Yes | Yes |- | - |
171
-
| Media & text |Yes | Yes | Yes |- | - |
175
+
| Context | Font Size | Line Height |
176
+
| --- | --- | --- |
177
+
| Global | - | - |
178
+
| Paragraph | Yes | Yes |
179
+
| Heading [1]| Yes | Yes |
180
+
| Group | - | - |
181
+
| Columns | - | - |
182
+
| Media & text | - | - |
172
183
173
184
[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).
174
185
@@ -245,13 +256,14 @@ The list of features that are currently supported are:
245
256
"styles: {
246
257
"color: {
247
258
"background": <value>
248
-
}
259
+
}
249
260
}
250
261
},
251
262
"core/paragraph": {
252
263
"styles": {
253
264
"color": {
254
265
"background": <value>,
266
+
"link": <value>,
255
267
"text": <value>
256
268
},
257
269
"typography": {
@@ -264,6 +276,7 @@ The list of features that are currently supported are:
264
276
"styles": {
265
277
"color": {
266
278
"background": <value>,
279
+
"link": <value>,
267
280
"text": <value>
268
281
},
269
282
"typography": {
@@ -276,6 +289,7 @@ The list of features that are currently supported are:
276
289
"styles": {
277
290
"color": {
278
291
"background": <value>,
292
+
"link": <value>,
279
293
"text": <value>
280
294
},
281
295
"typography": {
@@ -288,6 +302,20 @@ The list of features that are currently supported are:
288
302
"styles": {
289
303
"color": {
290
304
"background": <value>,
305
+
"link": <value>,
306
+
"text": <value>
307
+
},
308
+
"typography": {
309
+
"fontSize": <value>,
310
+
"lineHeight": <value>
311
+
}
312
+
}
313
+
},
314
+
"core/heading/h4": {
315
+
"styles": {
316
+
"color": {
317
+
"background": <value>,
318
+
"link": <value>,
291
319
"text": <value>
292
320
},
293
321
"typography": {
@@ -300,6 +328,7 @@ The list of features that are currently supported are:
300
328
"styles": {
301
329
"color": {
302
330
"background": <value>,
331
+
"link": <value>,
303
332
"text": <value>
304
333
},
305
334
"typography": {
@@ -312,6 +341,7 @@ The list of features that are currently supported are:
312
341
"styles": {
313
342
"color": {
314
343
"background": <value>,
344
+
"link": <value>,
315
345
"text": <value>
316
346
},
317
347
"typography": {
@@ -325,6 +355,7 @@ The list of features that are currently supported are:
325
355
"color": {
326
356
"background": <value>,
327
357
"gradient": <value>,
358
+
"link": <value>,
328
359
"text": <value>
329
360
}
330
361
}
@@ -334,6 +365,7 @@ The list of features that are currently supported are:
334
365
"color": {
335
366
"background": <value>,
336
367
"gradient": <value>,
368
+
"link": <value>,
337
369
"text": <value>
338
370
}
339
371
}
@@ -343,6 +375,7 @@ The list of features that are currently supported are:
0 commit comments