diff --git a/packages/edit-site/src/components/save-button/index.js b/packages/edit-site/src/components/save-button/index.js index d4c2969920c52a..c2a871a0dd458e 100644 --- a/packages/edit-site/src/components/save-button/index.js +++ b/packages/edit-site/src/components/save-button/index.js @@ -1,6 +1,8 @@ /** * WordPress dependencies */ +import { useMemo, useCallback } from '@wordpress/element'; +import { applyFilters } from '@wordpress/hooks'; import { useSelect, useDispatch } from '@wordpress/data'; import { Button } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; @@ -52,6 +54,7 @@ export default function SaveButton( { previewingThemeName: previewingTheme?.name?.rendered, }; }, [] ); + const { setIsSaveViewOpened } = useDispatch( editSiteStore ); const activateSaveEnabled = isPreviewingTheme() || isDirty; @@ -78,7 +81,27 @@ export default function SaveButton( { } return __( 'Save' ); }; - const label = getLabel(); + + /** + * We focus on adding the customization to the SaveButton's `onClick` and `label` for now. + * We will provide the customization to the other entry points (e.g., SavePanel, SaveHub) in the future if needed. + * @see https://github.com/WordPress/gutenberg/pull/56807 + */ + const onClick = useCallback( () => { + const callback = applyFilters( 'edit-site.SaveButton.onClick', () => + setIsSaveViewOpened( true ) + ); + callback(); + }, [ setIsSaveViewOpened ] ); + const label = useMemo( () => { + return applyFilters( 'edit-site.SaveButton.label', getLabel(), { + isSaving, + disabled, + isPreviewingTheme, + defaultLabel, + isDirty, + } ); + }, [ isSaving, disabled, defaultLabel, isDirty, getLabel ] ); return (