diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md index c9ffff1787861..373211e0a9b27 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -205,6 +205,19 @@ Generate custom CSS custom properties of the form `--wp--custom--{key}--{nested- ## Styles +### background + +Background styles. + +| Property | Type | Props | +| --- | --- |--- | +| backgroundImage | string, object | | +| backgroundPosition | string, object | | +| backgroundRepeat | string, object | | +| backgroundSize | string, object | | + +--- + ### border Border styles. diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index bdda9563edae0..70812e0e5d852 100644 --- a/packages/block-editor/src/components/global-styles/hooks.js +++ b/packages/block-editor/src/components/global-styles/hooks.js @@ -366,6 +366,15 @@ export function useSettingsForBlockElement( } } ); + [ 'backgroundImage', 'backgroundSize' ].forEach( ( key ) => { + if ( ! supportedStyles.includes( key ) ) { + updatedSettings.background = { + ...updatedSettings.background, + [ key ]: false, + }; + } + } ); + updatedSettings.shadow = supportedStyles.includes( 'shadow' ) ? updatedSettings.shadow : false; diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 79cd5aadabcb8..b7c5d72768596 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -30,6 +30,12 @@ const BACKGROUND_BLOCK_DEFAULT_CONTROL_VALUES = { backgroundSize: 'cover', }; +// Default controls for the background panel for blocks. +const BACKGROUND_BLOCK_DEFAULT_CONTROLS = { + backgroundImage: true, + backgroundSize: false, +}; + function applyFallbackStyle( border ) { if ( ! border ) { return border; @@ -323,6 +329,7 @@ function ScreenBlock( { name, variation } ) { value={ style } onChange={ onChangeBackground } settings={ settings } + defaultControls={ BACKGROUND_BLOCK_DEFAULT_CONTROLS } defaultControlValues={ BACKGROUND_BLOCK_DEFAULT_CONTROL_VALUES } diff --git a/schemas/json/theme.json b/schemas/json/theme.json index dac19a17749b4..45d80c27b7e6c 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -1115,6 +1115,74 @@ "stylesProperties": { "type": "object", "properties": { + "background": { + "description": "Background styles.", + "type": "object", + "properties": { + "backgroundImage": { + "description": "Sets the `background-image` CSS property.", + "oneOf": [ + { + "description": "A valid CSS value for the background-image property.", + "type": "string" + }, + { + "type": "object", + "properties": { + "source": { + "description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.", + "type": "string", + "enum": [ "file" ], + "default": "file" + }, + "url": { + "description": "A URL to an image file.", + "type": "string" + } + }, + "additionalProperties": false + }, + { + "$ref": "#/definitions/refComplete" + } + ] + }, + "backgroundPosition": { + "description": "Sets the `background-position` CSS property.", + "oneOf": [ + { + "type": "string" + }, + { + "$ref": "#/definitions/refComplete" + } + ] + }, + "backgroundRepeat": { + "description": "Sets the `background-repeat` CSS property.", + "oneOf": [ + { + "type": "string" + }, + { + "$ref": "#/definitions/refComplete" + } + ] + }, + "backgroundSize": { + "description": "Sets the `background-size` CSS property.", + "oneOf": [ + { + "type": "string" + }, + { + "$ref": "#/definitions/refComplete" + } + ] + } + }, + "additionalProperties": false + }, "border": { "description": "Border styles.", "type": "object", @@ -1763,6 +1831,7 @@ }, { "properties": { + "background": {}, "border": {}, "color": {}, "dimensions": {}, @@ -1789,6 +1858,7 @@ { "properties": { "border": {}, + "background": {}, "color": {}, "filter": {}, "shadow": {}, @@ -2197,6 +2267,7 @@ }, { "properties": { + "background": {}, "border": {}, "color": {}, "dimensions": {}, @@ -2302,74 +2373,6 @@ "blocks": { "description": "Styles defined on a per-block basis using the block's selector.", "$ref": "#/definitions/stylesBlocksPropertiesComplete" - }, - "background": { - "description": "Background styles.", - "type": "object", - "properties": { - "backgroundImage": { - "description": "Sets the `background-image` CSS property.", - "oneOf": [ - { - "description": "A valid CSS value for the background-image property.", - "type": "string" - }, - { - "type": "object", - "properties": { - "source": { - "description": "The origin of the image. 'file' denotes that the 'url' is a path to an image or other file.", - "type": "string", - "enum": [ "file" ], - "default": "file" - }, - "url": { - "description": "A URL to an image file.", - "type": "string" - } - }, - "additionalProperties": false - }, - { - "$ref": "#/definitions/refComplete" - } - ] - }, - "backgroundPosition": { - "description": "Sets the `background-position` CSS property.", - "oneOf": [ - { - "type": "string" - }, - { - "$ref": "#/definitions/refComplete" - } - ] - }, - "backgroundRepeat": { - "description": "Sets the `background-repeat` CSS property.", - "oneOf": [ - { - "type": "string" - }, - { - "$ref": "#/definitions/refComplete" - } - ] - }, - "backgroundSize": { - "description": "Sets the `background-size` CSS property.", - "oneOf": [ - { - "type": "string" - }, - { - "$ref": "#/definitions/refComplete" - } - ] - } - }, - "additionalProperties": false } }, "additionalProperties": false