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' ],