From 02c6a8fa2f8996f1781d4df0e899c73a6de34c5f Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 10 May 2024 12:42:21 +1000 Subject: [PATCH] Background image: explicitly set background repeat value in user styles (#61526) * Update wrong key in style engine Fix edge case in which theme.json defines a backgroundSize value of 'cover' and a backgroundRepeat value. If a user backgroundSize is set, ignore the inherited backgroundRepeat value as style?.background?.backgroundRepeat is deliberately set to undefined in updateBackgroundSize(). * Add backgroundPosition to VALID STYLES. Roll back previous fix, and explicitly set backgroundRepeat to "repeat", because it seems as if it's being overwritten by merging styles (undefined values are stripped) * Update constants.js Co-authored-by: ramonjd Co-authored-by: andrewserong --- .../src/components/global-styles/background-panel.js | 2 +- packages/blocks/src/api/constants.js | 5 +++++ packages/style-engine/src/styles/background/index.ts | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/background-panel.js b/packages/block-editor/src/components/global-styles/background-panel.js index f45c787e45589b..a975de53a99d92 100644 --- a/packages/block-editor/src/components/global-styles/background-panel.js +++ b/packages/block-editor/src/components/global-styles/background-panel.js @@ -439,7 +439,7 @@ function BackgroundSizeToolsPanelItem( { setImmutably( style, [ 'background', 'backgroundRepeat' ], - repeatCheckedValue === true ? 'no-repeat' : undefined + repeatCheckedValue === true ? 'no-repeat' : 'repeat' ) ); diff --git a/packages/blocks/src/api/constants.js b/packages/blocks/src/api/constants.js index 68877c280d4dcf..620dfcbb8599c0 100644 --- a/packages/blocks/src/api/constants.js +++ b/packages/blocks/src/api/constants.js @@ -51,6 +51,11 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = { support: [ 'background', 'backgroundSize' ], useEngine: true, }, + backgroundPosition: { + value: [ 'background', 'backgroundPosition' ], + support: [ 'background', 'backgroundPosition' ], + useEngine: true, + }, borderColor: { value: [ 'border', 'color' ], support: [ '__experimentalBorder', 'color' ], diff --git a/packages/style-engine/src/styles/background/index.ts b/packages/style-engine/src/styles/background/index.ts index a8c8679888e153..6e79636cfda124 100644 --- a/packages/style-engine/src/styles/background/index.ts +++ b/packages/style-engine/src/styles/background/index.ts @@ -39,7 +39,7 @@ const backgroundImage = { }; const backgroundPosition = { - name: 'backgroundRepeat', + name: 'backgroundPosition', generate: ( style: Style, options: StyleOptions ) => { return generateRule( style,