From e3c47aadb908e95c1be2925090b5dae773ac29f3 Mon Sep 17 00:00:00 2001 From: Ramon <ramonjd@users.noreply.github.com> Date: Wed, 27 Mar 2024 16:46:37 +1100 Subject: [PATCH] Global styles: add background to global styles changes output (#60229) * Adding "background" top-level styles to the possible change list values. Updates tests. Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> --- .../get-global-styles-changes.js | 3 +++ .../test/get-global-styles-changes.js | 25 ++++++++++++++++--- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/get-global-styles-changes.js index 05ac3429e4b65e..c525cf45c6d52e 100644 --- a/packages/block-editor/src/components/global-styles/get-global-styles-changes.js +++ b/packages/block-editor/src/components/global-styles/get-global-styles-changes.js @@ -26,6 +26,7 @@ const translationMap = { 'settings.typography': __( 'Typography' ), 'styles.color': __( 'Colors' ), 'styles.spacing': __( 'Spacing' ), + 'styles.background': __( 'Background' ), 'styles.typography': __( 'Typography' ), }; const getBlockNames = memoize( () => @@ -126,6 +127,7 @@ export function getGlobalStylesChangelist( next, previous ) { const changedValueTree = deepCompare( { styles: { + background: next?.styles?.background, color: next?.styles?.color, typography: next?.styles?.typography, spacing: next?.styles?.spacing, @@ -136,6 +138,7 @@ export function getGlobalStylesChangelist( next, previous ) { }, { styles: { + background: previous?.styles?.background, color: previous?.styles?.color, typography: previous?.styles?.typography, spacing: previous?.styles?.spacing, diff --git a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js index 9ff840dc76730a..6eb4974ec041aa 100644 --- a/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js +++ b/packages/block-editor/src/components/global-styles/test/get-global-styles-changes.js @@ -17,6 +17,15 @@ import { describe( 'getGlobalStylesChanges and utils', () => { const next = { styles: { + background: { + backgroundImage: { + url: 'https://example.com/image.jpg', + source: 'file', + }, + backgroundSize: 'contain', + backgroundPosition: '30% 30%', + backgroundRepeat: 'no-repeat', + }, typography: { fontSize: 'var(--wp--preset--font-size--potato)', fontStyle: 'normal', @@ -84,6 +93,15 @@ describe( 'getGlobalStylesChanges and utils', () => { }; const previous = { styles: { + background: { + backgroundImage: { + url: 'https://example.com/image_new.jpg', + source: 'file', + }, + backgroundSize: 'contain', + backgroundPosition: '40% 77%', + backgroundRepeat: 'repeat', + }, typography: { fontSize: 'var(--wp--preset--font-size--fungus)', fontStyle: 'normal', @@ -195,7 +213,7 @@ describe( 'getGlobalStylesChanges and utils', () => { it( 'returns a list of changes', () => { const result = getGlobalStylesChanges( next, previous ); expect( result ).toEqual( [ - 'Colors, Typography styles.', + 'Background, Colors, Typography styles.', 'Test pumpkin flowers block.', 'H3, Caption, H6, Link elements.', 'Color, Typography settings.', @@ -204,10 +222,10 @@ describe( 'getGlobalStylesChanges and utils', () => { it( 'returns a list of truncated changes', () => { const resultA = getGlobalStylesChanges( next, previous, { - maxResults: 3, + maxResults: 4, } ); expect( resultA ).toEqual( [ - 'Colors, Typography styles.', + 'Background, Colors, Typography styles.', 'Test pumpkin flowers block.', ] ); } ); @@ -254,6 +272,7 @@ describe( 'getGlobalStylesChanges and utils', () => { const resultA = getGlobalStylesChangelist( next, previous ); expect( resultA ).toEqual( [ + [ 'styles', 'Background' ], [ 'styles', 'Colors' ], [ 'styles', 'Typography' ], [ 'blocks', 'Test pumpkin flowers' ],