Site Editor: Add new 'Push changes to Global Styles' button

packages/edit-site/src/components/global-styles/global-styles-provider.js

@@ -94,7 +94,7 @@ function useGlobalStylesUserConfig() {
 	}, [ settings, styles ] );
 
 	const setConfig = useCallback(
-		( callback ) => {
+		( callback, options = {} ) => {
 			const record = getEditedEntityRecord(
 				'root',
 				'globalStyles',
@@ -105,10 +105,16 @@ function useGlobalStylesUserConfig() {
 				settings: record?.settings ?? {},
 			};
 			const updatedConfig = callback( currentConfig );
-			editEntityRecord( 'root', 'globalStyles', globalStylesId, {
-				styles: cleanEmptyObject( updatedConfig.styles ) || {},
-				settings: cleanEmptyObject( updatedConfig.settings ) || {},
-			} );
+			editEntityRecord(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				{
+					styles: cleanEmptyObject( updatedConfig.styles ) || {},
+					settings: cleanEmptyObject( updatedConfig.settings ) || {},
+				},
+				options
+			);
 		},
 		[ globalStylesId ]
 	);

packages/edit-site/src/components/global-styles/utils.js

@@ -86,7 +86,7 @@ export const PRESET_METADATA = [
 	},
 ];
 
-const STYLE_PATH_TO_CSS_VAR_INFIX = {
+export const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'color.background': 'color',
 	'color.text': 'color',
 	'elements.link.color.text': 'color',
@@ -100,6 +100,15 @@ const STYLE_PATH_TO_CSS_VAR_INFIX = {
 	'typography.fontFamily': 'font-family',
 };
 
+// A static list of block attributes that store global style preset slugs.
+export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
+	'color.background': 'backgroundColor',
+	'color.text': 'textColor',
+	'color.gradient': 'gradient',
+	'typography.fontSize': 'fontSize',
+	'typography.fontFamily': 'fontFamily',
+};
+
 function findInPresetsBy(
 	features,
 	blockName,

packages/edit-site/src/hooks/index.js

@@ -2,4 +2,5 @@
  * Internal dependencies
  */
 import './components';
+import './push-changes-to-global-styles';
 import './template-part-edit';

packages/edit-site/src/hooks/push-changes-to-global-styles/index.js

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+	InspectorAdvancedControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { BaseControl, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
+	getBlockType,
+} from '@wordpress/blocks';
+import { useContext, useMemo, useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { getSupportedGlobalStylesPanels } from '../../components/global-styles/hooks';
+import { GlobalStylesContext } from '../../components/global-styles/context';
+import {
+	STYLE_PATH_TO_CSS_VAR_INFIX,
+	STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE,
+} from '../../components/global-styles/utils';
+
+function getChangesToPush( name, attributes ) {
+	return getSupportedGlobalStylesPanels( name ).flatMap( ( key ) => {
+		if ( ! STYLE_PROPERTY[ key ] ) {
+			return [];
+		}
+		const { value: path } = STYLE_PROPERTY[ key ];
+		const presetAttributeKey = path.join( '.' );
+		const presetAttributeValue =
+			attributes[
+				STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE[ presetAttributeKey ]
+			];
+		const value = presetAttributeValue
+			? `var:preset|${ STYLE_PATH_TO_CSS_VAR_INFIX[ presetAttributeKey ] }|${ presetAttributeValue }`
+			: get( attributes.style, path );
+		return value ? [ { path, value } ] : [];
+	} );
+}
+
+function cloneDeep( object ) {
+	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
+}
+
+function PushChangesToGlobalStylesControl( {
+	name,
+	attributes,
+	setAttributes,
+} ) {
+	const changes = useMemo(
+		() => getChangesToPush( name, attributes ),
+		[ name, attributes ]
+	);
+
+	const { user: userConfig, setUserConfig } =
+		useContext( GlobalStylesContext );
+
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+
+	const pushChanges = useCallback( () => {
+		if ( changes.length === 0 ) {
+			return;
+		}
+
+		const { style: blockStyles } = attributes;
+
+		const newBlockStyles = cloneDeep( blockStyles );
+		const newUserConfig = cloneDeep( userConfig );
+
+		for ( const { path, value } of changes ) {
+			set( newBlockStyles, path, undefined );
+			set( newUserConfig, [ 'styles', 'blocks', name, ...path ], value );
+		}
+
+		// @wordpress/core-data doesn't support editing multiple entity types in
+		// a single undo level. So for now, we disable @wordpress/core-data undo
+		// tracking and implement our own Undo button in the snackbar
+		// notification.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { style: newBlockStyles } );
+		setUserConfig( () => newUserConfig, { undoIgnore: true } );
+
+		createSuccessNotice(
+			sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( 'Pushed styles to all %s blocks.' ),
+				getBlockType( name ).title
+			),
+			{
+				type: 'snackbar',
+				actions: [
+					{
+						label: __( 'Undo' ),
+						onClick() {
+							__unstableMarkNextChangeAsNotPersistent();
+							setAttributes( { style: blockStyles } );
+							setUserConfig( () => userConfig, {
+								undoIgnore: true,
+							} );
+						},
+					},
+				],
+			}
+		);
+	}, [ changes, attributes, userConfig, name ] );
+
+	return (
+		<BaseControl
+			className="edit-site-push-changes-to-global-styles-control"
+			help={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__(
+					'Move this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
+				),
+				getBlockType( name ).title
+			) }
+		>
+			<BaseControl.VisualLabel>
+				{ __( 'Styles' ) }
+			</BaseControl.VisualLabel>
+			<Button
+				variant="primary"
+				disabled={ changes.length === 0 }
+				onClick={ pushChanges }
+			>
+				{ __( 'Push changes to Global Styles' ) }
+			</Button>
+		</BaseControl>
+	);
+}
+
+const withPushChangesToGlobalStyles = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) =>
+		(
+			<>
+				<BlockEdit { ...props } />
+				<InspectorAdvancedControls>
+					<PushChangesToGlobalStylesControl { ...props } />
+				</InspectorAdvancedControls>
+			</>
+		)
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/edit-site/push-changes-to-global-styles',
+	withPushChangesToGlobalStyles
+);

packages/edit-site/src/hooks/push-changes-to-global-styles/style.scss

@@ -0,0 +1,4 @@
+.edit-site-push-changes-to-global-styles-control .components-button {
+	justify-content: center;
+	width: 100%;
+}

packages/edit-site/src/style.scss

@@ -24,6 +24,7 @@
 @import "./components/sidebar-navigation-title/style.scss";
 @import "./components/site-icon/style.scss";
 @import "./components/style-book/style.scss";
+@import "./hooks/push-changes-to-global-styles/style.scss";
 
 html #wpadminbar {
 	display: none;

test/e2e/specs/site-editor/push-to-global-styles.spec.js

@@ -0,0 +1,109 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	test,
+	expect,
+	Editor,
+} = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.use( {
+	editor: async ( { page }, use ) => {
+		await use( new Editor( { page, hasIframe: true } ) );
+	},
+} );
+
+test.describe( 'Push to Global Styles button', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await Promise.all( [
+			requestUtils.activateTheme( 'emptytheme' ),
+			requestUtils.deleteAllTemplates( 'wp_template' ),
+			requestUtils.deleteAllTemplates( 'wp_template_part' ),
+		] );
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyone' );
+	} );
+
+	test.beforeEach( async ( { admin, siteEditor } ) => {
+		await admin.visitSiteEditor();
+		await siteEditor.enterEditMode();
+	} );
+
+	test( 'should apply Heading block styles to all Heading blocks', async ( {
+		page,
+		editor,
+	} ) => {
+		// Add a Heading block.
+		await editor.insertBlock( { name: 'core/heading' } );
+		await page.keyboard.type( 'A heading' );
+
+		// Navigate to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should not have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'false' );
+
+		// Go to block settings and open the Advanced panel
+		await page.getByRole( 'button', { name: 'Settings' } ).click();
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		// Push button should be disabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Make the Heading block uppercase
+		await page.getByRole( 'button', { name: 'Uppercase' } ).click();
+
+		// Push button should now be enabled
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeEnabled();
+
+		// Press the Push button
+		await page
+			.getByRole( 'button', { name: 'Push changes to Global Styles' } )
+			.click();
+
+		// Snackbar notification should appear
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Dismiss this notice',
+				text: 'Pushed styles to all Heading blocks.',
+			} )
+		).toBeVisible();
+
+		// Push button should be disabled again
+		await expect(
+			page.getByRole( 'button', {
+				name: 'Push changes to Global Styles',
+			} )
+		).toBeDisabled();
+
+		// Navigate again to Styles -> Blocks -> Heading -> Typography
+		await page.getByRole( 'button', { name: 'Styles' } ).click();
+		await page.getByRole( 'button', { name: 'Blocks styles' } ).click();
+		await page
+			.getByRole( 'button', { name: 'Heading block styles' } )
+			.click();
+		await page.getByRole( 'button', { name: 'Typography styles' } ).click();
+
+		// Headings should now have uppercase
+		await expect(
+			page.getByRole( 'button', { name: 'Uppercase' } )
+		).toHaveAttribute( 'aria-pressed', 'true' );
+	} );
+} );