Editor: allow selecting which block styles to apply globally

packages/editor/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   The "Apply globally" control now opens a review modal so you can choose which of a block's modified styles are pushed to Global Styles, showing each style's current and new value ([#79839](https://github.com/WordPress/gutenberg/pull/79839)).
+
 ## 14.51.0 (2026-07-14)
 
 ### New Features

packages/editor/src/hooks/push-changes-to-global-styles/apply-globally-modal.js

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { DataViewsPicker } from '@wordpress/dataviews';
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockType } from '@wordpress/blocks';
+import { useMemo, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useGlobalStyles } from '../../components/global-styles/hooks';
+import { useReviewRows } from './use-review-rows';
+
+// Show a simple table with a checkbox at the start of each row.
+const DEFAULT_LAYOUTS = { pickerTable: {} };
+
+const getItemId = ( row ) => row.id;
+
+/**
+ * Modal for reviewing a block's changed styles and choosing which ones to apply
+ * to every block of the same type.
+ *
+ * Each style is a row in the table and starts out selected. Apply pushes only
+ * the rows that are still selected, and is turned off when none are. Closing
+ * the modal or pressing Escape leaves the block untouched.
+ *
+ * @param {Object}   props                Component props.
+ * @param {string}   props.name           Block name.
+ * @param {Array}    props.rows           The block's changed styles, grouped into rows.
+ * @param {Function} props.onApply        Called with the selected rows to apply.
+ * @param {Function} props.onRequestClose Called to close the modal.
+ */
+export default function ApplyGloballyModal( {
+	name,
+	rows,
+	onApply,
+	onRequestClose,
+} ) {
+	const { merged } = useGlobalStyles();
+	const reviewRows = useReviewRows( rows, merged, name );
+
+	const [ selection, setSelection ] = useState( () =>
+		reviewRows.map( ( row ) => row.id )
+	);
+	const [ view, setView ] = useState( () => ( {
+		type: 'pickerTable',
+		titleField: 'label',
+		fields: [ 'current', 'new' ],
+		page: 1,
+		perPage: reviewRows.length,
+		layout: { enableMoving: false },
+	} ) );
+
+	const fields = useMemo(
+		() => [
+			{
+				id: 'label',
+				label: __( 'Style' ),
+				enableSorting: false,
+				enableHiding: false,
+				filterBy: false,
+				getValue: ( { item } ) => item.label,
+				render: ( { item } ) => item.label,
+			},
+			{
+				id: 'current',
+				label: __( 'Current' ),
+				enableSorting: false,
+				enableHiding: false,
+				filterBy: false,
+				getValue: ( { item } ) => item.formattedCurrentValue,
+				render: ( { item } ) => (
+					<span className="editor-push-changes-to-global-styles-modal__value">
+						{ item.formattedCurrentValue }
+					</span>
+				),
+			},
+			{
+				id: 'new',
+				label: __( 'New' ),
+				enableSorting: false,
+				enableHiding: false,
+				filterBy: false,
+				getValue: ( { item } ) => item.formattedNewValue,
+				render: ( { item } ) => (
+					<span className="editor-push-changes-to-global-styles-modal__value">
+						{ item.formattedNewValue }
+					</span>
+				),
+			},
+		],
+		[]
+	);
+
+	const actions = useMemo(
+		() => [
+			{
+				id: 'apply',
+				label: __( 'Apply' ),
+				isPrimary: true,
+				supportsBulk: true,
+				callback( items ) {
+					onApply( items );
+					onRequestClose();
+				},
+			},
+		],
+		[ onApply, onRequestClose ]
+	);
+
+	const blockTitle = getBlockType( name )?.title;
+
+	return (
+		<Modal
+			title={ sprintf(
+				// translators: %s: Title of the block e.g. 'Heading'.
+				__( 'Apply %s styles globally' ),
+				blockTitle
+			) }
+			onRequestClose={ onRequestClose }
+			size="large"
+			className="editor-push-changes-to-global-styles-modal"
+		>
+			<p>
+				{ sprintf(
+					// translators: %s: Title of the block e.g. 'Heading'.
+					__(
+						'Choose which styles to make default for all %s blocks.'
+					),
+					blockTitle
+				) }
+			</p>
+			<DataViewsPicker
+				data={ reviewRows }
+				fields={ fields }
+				view={ view }
+				onChangeView={ setView }
+				actions={ actions }
+				selection={ selection }
+				onChangeSelection={ setSelection }
+				getItemId={ getItemId }
+				paginationInfo={ {
+					totalItems: reviewRows.length,
+					totalPages: 1,
+				} }
+				defaultLayouts={ DEFAULT_LAYOUTS }
+				search={ false }
+				itemListLabel={ __( 'Styles to apply' ) }
+			>
+				<DataViewsPicker.Layout />
+				<DataViewsPicker.Footer />
+			</DataViewsPicker>
+		</Modal>
+	);
+}