Skip to content

Commit b1a43ff

Browse files
aaronrobertshawaaronrobertshaw
authored
Accept backgroundClip in the theme.json styles schema
The styles side of the schema closes to additional properties, so a theme.json carrying `styles.background.backgroundClip`, which is how this support is meant to be used, failed validation. Also stops getInlineStyles mangling a custom property. It camel-cased any key beginning with a dash, so a `--wp--*` key would have been rewritten rather than passed through. Nothing emits one through this path today; the guard keeps it that way.
1 parent 43f2796 commit b1a43ff

4 files changed

Lines changed: 40 additions & 4 deletions

File tree

‎docs/reference-guides/theme-json-reference/theme-json-living.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,7 @@ Background styles.
255255
| backgroundRepeat | Sets the `background-repeat` CSS property. | `string`, `{ ref }` |
256256
| backgroundSize | Sets the `background-size` CSS property. | `string`, `{ ref }` |
257257
| backgroundAttachment | Sets the `background-attachment` CSS property. | `string`, `{ ref }` |
258+
| backgroundClip | Sets the `background-clip` CSS property. One of `border-box`, `padding-box`, `content-box` or `text`. | `string`, `{ ref }` |
258259

259260
---
260261

‎packages/block-editor/src/hooks/style.jsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,10 +84,14 @@ export function getInlineStyles( styles = {} ) {
8484
// The goal is to move everything to server side generated engine styles
8585
// This is temporary as we absorb more and more styles into the engine.
8686
getCSSRules( styles ).forEach( ( rule ) => {
87-
// Vendor-prefixed CSS properties start with a dash (e.g. `-webkit-background-clip`).
88-
// React style objects require camelCase keys without the leading dash
89-
// (e.g. `WebkitBackgroundClip`), so convert them here.
90-
const key = rule.key.startsWith( '-' )
87+
// Vendor-prefixed CSS properties start with a single dash (e.g.
88+
// `-webkit-background-clip`). React style objects require camelCase
89+
// keys without the leading dash (e.g. `WebkitBackgroundClip`), so
90+
// convert those. Custom properties start with two and are passed
91+
// through, since React writes them verbatim.
92+
const isVendorPrefixed =
93+
rule.key.startsWith( '-' ) && ! rule.key.startsWith( '--' );
94+
const key = isVendorPrefixed
9195
? rule.key
9296
.slice( 1 )
9397
.replace( /-([a-z])/g, ( _, c ) => c.toUpperCase() )

‎packages/block-editor/src/hooks/test/style.jsdom.test.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,22 @@ describe( 'getInlineStyles', () => {
1818
expect( getInlineStyles( { color: 'red' } ) ).toEqual( {} );
1919
} );
2020

21+
it( 'camelCases vendor-prefixed properties for React', () => {
22+
expect(
23+
getInlineStyles( {
24+
background: {
25+
gradient: 'linear-gradient(red, blue)',
26+
backgroundClip: 'text',
27+
},
28+
} )
29+
).toEqual( {
30+
backgroundImage: 'linear-gradient(red, blue)',
31+
backgroundClip: 'text',
32+
WebkitBackgroundClip: 'text',
33+
WebkitTextFillColor: 'transparent',
34+
} );
35+
} );
36+
2137
it( 'should return the correct inline styles', () => {
2238
expect(
2339
getInlineStyles( {

‎schemas/json/theme.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1451,6 +1451,21 @@
14511451
{ "type": "string" },
14521452
{ "$ref": "#/definitions/refComplete" }
14531453
]
1454+
},
1455+
"backgroundClip": {
1456+
"description": "Sets the `background-clip` CSS property. One of `border-box`, `padding-box`, `content-box` or `text`.",
1457+
"oneOf": [
1458+
{
1459+
"type": "string",
1460+
"enum": [
1461+
"border-box",
1462+
"padding-box",
1463+
"content-box",
1464+
"text"
1465+
]
1466+
},
1467+
{ "$ref": "#/definitions/refComplete" }
1468+
]
14541469
}
14551470
},
14561471
"additionalProperties": false

0 commit comments

Comments
 (0)