Skip to content

Editor: Clarify the site-wide impact of 'Apply Globally' #79436

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
yyppsk wants to merge 3 commits into from
Closed

Editor: Clarify the site-wide impact of 'Apply Globally' #79436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8cbb04f
fix(#79343): Improve "Apply Globally" UX with persistent warning and …
yyppsk Jun 23, 2026
be24106
fix(editor): replace apply-globally notice with confirmation modal
yyppsk Jun 23, 2026
9b90fb6
test(e2e): confirm apply-globally modal before asserting snackbar
yyppsk Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 77 additions & 24 deletions packages/editor/src/hooks/push-changes-to-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ import {
privateApis as blockEditorPrivateApis,
useBlockEditingMode,
} from '@wordpress/block-editor';
import { BaseControl, Button } from '@wordpress/components';
import { BaseControl, Button, Modal } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import {
__EXPERIMENTAL_STYLE_PROPERTY,
getBlockType,
hasBlockSupport,
store as blocksStore,
} from '@wordpress/blocks';
import { useMemo, useCallback } from '@wordpress/element';
import { useMemo, useCallback, useState } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
Expand Down Expand Up @@ -246,6 +246,7 @@ function PushChangesToGlobalStylesControl( {
setAttributes,
} ) {
const { user: userConfig, setUser: setUserConfig } = useGlobalStyles();
const [ isConfirmModalOpen, setIsConfirmModalOpen ] = useState( false );

const changes = useChangesToPush( name, attributes, userConfig );

Expand Down Expand Up @@ -324,30 +325,82 @@ function PushChangesToGlobalStylesControl( {
userConfig,
] );

const openConfirmModal = useCallback( () => {
if ( changes.length === 0 ) {
return;
}

setIsConfirmModalOpen( true );
}, [ changes.length ] );

const closeConfirmModal = useCallback( () => {
setIsConfirmModalOpen( false );
}, [] );

const confirmApplyGlobally = useCallback( () => {
setIsConfirmModalOpen( false );
pushChanges();
}, [ pushChanges ] );

return (
<BaseControl
className="editor-push-changes-to-global-styles-control"
help={ sprintf(
// translators: %s: Title of the block e.g. 'Heading'.
__(
'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
),
getBlockType( name ).title
) }
>
<BaseControl.VisualLabel>
{ __( 'Styles' ) }
</BaseControl.VisualLabel>
<Button
__next40pxDefaultSize
variant="secondary"
accessibleWhenDisabled
disabled={ changes.length === 0 }
onClick={ pushChanges }
<>
<BaseControl
className="editor-push-changes-to-global-styles-control"
help={ sprintf(
// translators: %s: Title of the block e.g. 'Heading'.
__(
'Apply this block’s typography, spacing, dimensions, and color styles to all %s blocks.'
),
getBlockType( name ).title
) }
>
{ __( 'Apply globally' ) }
</Button>
</BaseControl>
<BaseControl.VisualLabel>
{ __( 'Styles' ) }
</BaseControl.VisualLabel>
<Button
__next40pxDefaultSize
variant="secondary"
accessibleWhenDisabled
disabled={ changes.length === 0 }
onClick={ openConfirmModal }
>
{ __( 'Apply globally' ) }
</Button>
</BaseControl>
{ isConfirmModalOpen && (
<Modal
title={ __( 'Apply styles globally' ) }
onRequestClose={ closeConfirmModal }
size="medium"
>
<p>
{ sprintf(
// translators: %s: Title of the block e.g. 'Paragraph'.
__(
'Applying these styles globally will affect every %s block across all content. Do you want to continue?'
),
getBlockType( name ).title
) }
</p>
<div className="editor-push-changes-to-global-styles-modal-actions">
<Button
__next40pxDefaultSize
variant="tertiary"
onClick={ closeConfirmModal }
>
{ __( 'Cancel' ) }
</Button>
<Button
__next40pxDefaultSize
variant="primary"
onClick={ confirmApplyGlobally }
>
{ __( 'Apply' ) }
</Button>
</div>
</Modal>
) }
</>
);
}

Expand Down
7 changes: 7 additions & 0 deletions packages/editor/src/hooks/push-changes-to-global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,10 @@
justify-content: center;
width: 100%;
}

.editor-push-changes-to-global-styles-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 24px;
}
6 changes: 6 additions & 0 deletions test/e2e/specs/site-editor/push-to-global-styles.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ test.describe( 'Push to Global Styles button', () => {
// Press the Push button
await page.getByRole( 'button', { name: 'Apply globally' } ).click();

// Confirm applying styles globally.
await page
.getByRole( 'dialog' )
.getByRole( 'button', { name: 'Apply' } )
.click();

// Snackbar notification should appear
await expect(
page.getByRole( 'button', {
Expand Down
Loading