From dfc432ab04492501f7fa6a08cdf3f291d3376302 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 27 Mar 2024 16:10:05 +1100 Subject: [PATCH] Adding background panel for blocks. --- .../theme-json-reference/theme-json-living.md | 13 ++ lib/class-wp-theme-json-gutenberg.php | 8 +- .../src/components/global-styles/hooks.js | 9 ++ packages/block-editor/src/hooks/index.js | 1 + packages/block-editor/src/private-apis.js | 8 +- .../components/global-styles/screen-block.js | 33 +++++ schemas/json/theme.json | 139 +++++++++--------- 7 files changed, 137 insertions(+), 74 deletions(-) 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 00b1f7971f3d91..1d6e9ca91ad349 100644 --- a/docs/reference-guides/theme-json-reference/theme-json-living.md +++ b/docs/reference-guides/theme-json-reference/theme-json-living.md @@ -204,6 +204,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/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index aafc20a2debd51..60b10dde512e2d 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -485,10 +485,10 @@ class WP_Theme_JSON_Gutenberg { */ const VALID_STYLES = array( 'background' => array( - 'backgroundImage' => 'top', - 'backgroundPosition' => 'top', - 'backgroundRepeat' => 'top', - 'backgroundSize' => 'top', + 'backgroundImage' => null, + 'backgroundPosition' => null, + 'backgroundRepeat' => null, + 'backgroundSize' => null, ), 'border' => array( 'color' => null, diff --git a/packages/block-editor/src/components/global-styles/hooks.js b/packages/block-editor/src/components/global-styles/hooks.js index bdda9563edae02..70812e0e5d8528 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/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 0c7c59b20ec674..70292edcf716ff 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -79,4 +79,5 @@ export { getSpacingClassesAndStyles } from './use-spacing-props'; export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; +export { setBackgroundStyleDefaults } from './background'; export { useZoomOut } from './use-zoom-out'; diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js index b51c019e791788..bf375bfede271a 100644 --- a/packages/block-editor/src/private-apis.js +++ b/packages/block-editor/src/private-apis.js @@ -20,7 +20,11 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils'; import BlockQuickNavigation from './components/block-quick-navigation'; import { LayoutStyle } from './components/block-list/layout'; import { BlockRemovalWarningModal } from './components/block-removal-warning-modal'; -import { useLayoutClasses, useLayoutStyles } from './hooks'; +import { + setBackgroundStyleDefaults, + useLayoutClasses, + useLayoutStyles, +} from './hooks'; import DimensionsTool from './components/dimensions-tool'; import ResolutionTool from './components/resolution-tool'; import { @@ -73,5 +77,5 @@ lock( privateApis, { selectBlockPatternsKey, requiresWrapperOnCopy, PrivateRichText, - reusableBlocksSelectKey, + setBackgroundStyleDefaults, } ); 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 9811f10b834dab..d73bcd93b0465f 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -25,6 +25,12 @@ import { VariationsPanel, } from './variations/variations-panel'; +// Default controls for the background panel for blocks. +const BACKGROUND_BLOCK_DEFAULT_VALUES = { + backgroundImage: true, + backgroundSize: false, +}; + function applyFallbackStyle( border ) { if ( ! border ) { return border; @@ -70,6 +76,8 @@ const { useHasFiltersPanel, useHasImageSettingsPanel, useGlobalStyle, + useHasBackgroundPanel, + BackgroundPanel: StylesBackgroundPanel, BorderPanel: StylesBorderPanel, ColorPanel: StylesColorPanel, TypographyPanel: StylesTypographyPanel, @@ -77,6 +85,7 @@ const { FiltersPanel: StylesFiltersPanel, ImageSettingsPanel, AdvancedPanel: StylesAdvancedPanel, + setBackgroundStyleDefaults, } = unlock( blockEditorPrivateApis ); function ScreenBlock( { name, variation } ) { @@ -121,6 +130,7 @@ function ScreenBlock( { name, variation } ) { } const blockVariations = useBlockVariations( name ); + const hasBackgroundPanel = useHasBackgroundPanel( settings ); const hasTypographyPanel = useHasTypographyPanel( settings ); const hasColorPanel = useHasColorPanel( settings ); const hasBorderPanel = useHasBorderPanel( settings ); @@ -232,6 +242,19 @@ function ScreenBlock( { name, variation } ) { setStyle( { ...newStyle, border: { ...updatedBorder, radius } } ); }; + const onChangeBackground = ( newStyle ) => { + const backgroundStyles = setBackgroundStyleDefaults( + newStyle?.background + ); + setStyle( { + ...newStyle, + background: { + ...newStyle?.background, + ...backgroundStyles, + }, + } ); + }; + return ( <> ) } + { hasBackgroundPanel && ( + + ) } + { canEditCSS && (

diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 63889366b7bd40..2a1a4ca62bde71 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