Skip to content

Commit fad270f

Browse files
committed
Updating theme.json to include background settings and styles
Ensuring the blocks in global styles only show background UI when it's allowed
1 parent b4b9126 commit fad270f

File tree

4 files changed

+100
-68
lines changed

4 files changed

+100
-68
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,19 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested-
205205
## Styles
206206

207207

208+
### background
209+
210+
Background styles.
211+
212+
| Property | Type | Props |
213+
| --- | --- |--- |
214+
| backgroundImage | string, object | |
215+
| backgroundPosition | string, object | |
216+
| backgroundRepeat | string, object | |
217+
| backgroundSize | string, object | |
218+
219+
---
220+
208221
### border
209222

210223
Border styles.

packages/block-editor/src/components/global-styles/hooks.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,15 @@ export function useSettingsForBlockElement(
366366
}
367367
} );
368368

369+
[ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => {
370+
if ( ! supportedStyles.includes( key ) ) {
371+
updatedSettings.background = {
372+
...updatedSettings.background,
373+
[ key ]: false,
374+
};
375+
}
376+
} );
377+
369378
updatedSettings.shadow = supportedStyles.includes( 'shadow' )
370379
? updatedSettings.shadow
371380
: false;

packages/edit-site/src/components/global-styles/screen-block.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ const BACKGROUND_BLOCK_DEFAULT_CONTROL_VALUES = {
3030
backgroundSize: 'cover',
3131
};
3232

33+
// Default controls for the background panel for blocks.
34+
const BACKGROUND_BLOCK_DEFAULT_CONTROLS = {
35+
backgroundImage: true,
36+
backgroundSize: false,
37+
};
38+
3339
function applyFallbackStyle( border ) {
3440
if ( ! border ) {
3541
return border;
@@ -323,6 +329,7 @@ function ScreenBlock( { name, variation } ) {
323329
value={ style }
324330
onChange={ onChangeBackground }
325331
settings={ settings }
332+
defaultControls={ BACKGROUND_BLOCK_DEFAULT_CONTROLS }
326333
defaultControlValues={
327334
BACKGROUND_BLOCK_DEFAULT_CONTROL_VALUES
328335
}

schemas/json/theme.json

Lines changed: 71 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1115,6 +1115,74 @@
11151115
"stylesProperties": {
11161116
"type": "object",
11171117
"properties": {
1118+
"background": {
1119+
"description": "Background styles.",
1120+
"type": "object",
1121+
"properties": {
1122+
"backgroundImage": {
1123+
"description": "Sets the `background-image` CSS property.",
1124+
"oneOf": [
1125+
{
1126+
"description": "A valid CSS value for the background-image property.",
1127+
"type": "string"
1128+
},
1129+
{
1130+
"type": "object",
1131+
"properties": {
1132+
"source": {
1133+
"description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.",
1134+
"type": "string",
1135+
"enum": [ "file" ],
1136+
"default": "file"
1137+
},
1138+
"url": {
1139+
"description": "A URL to an image file.",
1140+
"type": "string"
1141+
}
1142+
},
1143+
"additionalProperties": false
1144+
},
1145+
{
1146+
"$ref": "#/definitions/refComplete"
1147+
}
1148+
]
1149+
},
1150+
"backgroundPosition": {
1151+
"description": "Sets the `background-position` CSS property.",
1152+
"oneOf": [
1153+
{
1154+
"type": "string"
1155+
},
1156+
{
1157+
"$ref": "#/definitions/refComplete"
1158+
}
1159+
]
1160+
},
1161+
"backgroundRepeat": {
1162+
"description": "Sets the `background-repeat` CSS property.",
1163+
"oneOf": [
1164+
{
1165+
"type": "string"
1166+
},
1167+
{
1168+
"$ref": "#/definitions/refComplete"
1169+
}
1170+
]
1171+
},
1172+
"backgroundSize": {
1173+
"description": "Sets the `background-size` CSS property.",
1174+
"oneOf": [
1175+
{
1176+
"type": "string"
1177+
},
1178+
{
1179+
"$ref": "#/definitions/refComplete"
1180+
}
1181+
]
1182+
}
1183+
},
1184+
"additionalProperties": false
1185+
},
11181186
"border": {
11191187
"description": "Border styles.",
11201188
"type": "object",
@@ -1763,6 +1831,7 @@
17631831
},
17641832
{
17651833
"properties": {
1834+
"background": {},
17661835
"border": {},
17671836
"color": {},
17681837
"dimensions": {},
@@ -1789,6 +1858,7 @@
17891858
{
17901859
"properties": {
17911860
"border": {},
1861+
"background": {},
17921862
"color": {},
17931863
"filter": {},
17941864
"shadow": {},
@@ -2197,6 +2267,7 @@
21972267
},
21982268
{
21992269
"properties": {
2270+
"background": {},
22002271
"border": {},
22012272
"color": {},
22022273
"dimensions": {},
@@ -2302,74 +2373,6 @@
23022373
"blocks": {
23032374
"description": "Styles defined on a per-block basis using the block's selector.",
23042375
"$ref": "#/definitions/stylesBlocksPropertiesComplete"
2305-
},
2306-
"background": {
2307-
"description": "Background styles.",
2308-
"type": "object",
2309-
"properties": {
2310-
"backgroundImage": {
2311-
"description": "Sets the `background-image` CSS property.",
2312-
"oneOf": [
2313-
{
2314-
"description": "A valid CSS value for the background-image property.",
2315-
"type": "string"
2316-
},
2317-
{
2318-
"type": "object",
2319-
"properties": {
2320-
"source": {
2321-
"description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.",
2322-
"type": "string",
2323-
"enum": [ "file" ],
2324-
"default": "file"
2325-
},
2326-
"url": {
2327-
"description": "A URL to an image file.",
2328-
"type": "string"
2329-
}
2330-
},
2331-
"additionalProperties": false
2332-
},
2333-
{
2334-
"$ref": "#/definitions/refComplete"
2335-
}
2336-
]
2337-
},
2338-
"backgroundPosition": {
2339-
"description": "Sets the `background-position` CSS property.",
2340-
"oneOf": [
2341-
{
2342-
"type": "string"
2343-
},
2344-
{
2345-
"$ref": "#/definitions/refComplete"
2346-
}
2347-
]
2348-
},
2349-
"backgroundRepeat": {
2350-
"description": "Sets the `background-repeat` CSS property.",
2351-
"oneOf": [
2352-
{
2353-
"type": "string"
2354-
},
2355-
{
2356-
"$ref": "#/definitions/refComplete"
2357-
}
2358-
]
2359-
},
2360-
"backgroundSize": {
2361-
"description": "Sets the `background-size` CSS property.",
2362-
"oneOf": [
2363-
{
2364-
"type": "string"
2365-
},
2366-
{
2367-
"$ref": "#/definitions/refComplete"
2368-
}
2369-
]
2370-
}
2371-
},
2372-
"additionalProperties": false
23732376
}
23742377
},
23752378
"additionalProperties": false

0 commit comments

Comments
 (0)