Make SaveButton extensible

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 (
 		<Button
@@ -87,7 +110,7 @@ export default function SaveButton( {
 			aria-disabled={ disabled }
 			aria-expanded={ isSaveViewOpen }
 			isBusy={ isSaving }
-			onClick={ disabled ? undefined : () => setIsSaveViewOpened( true ) }
+			onClick={ disabled ? undefined : onClick }
 			label={ label }
 			/*
 			 * We want the tooltip to show the keyboard shortcut only when the

packages/edit-site/src/components/save-hub/index.js

@@ -9,6 +9,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { check } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as noticesStore } from '@wordpress/notices';
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -115,6 +117,32 @@ export default function SaveHub() {
 		};
 	}, [] );
 
+	// This is only for testing purposes.
+	useEffect( () => {
+		addFilter(
+			'edit-site.SaveButton.onClick',
+			'my-plugin',
+			( originalFunction ) => {
+				return () => {
+					// eslint-disable-next-line no-alert
+					window.alert( 'Custom action' );
+					originalFunction();
+				};
+			}
+		);
+		addFilter(
+			'edit-site.SaveButton.label',
+			'my-plugin',
+			( originalLabel ) => {
+				return `Custom ${ originalLabel }`;
+			}
+		);
+		return () => {
+			removeFilter( 'edit-site.SaveButton.onClick', 'my-plugin' );
+			removeFilter( 'edit-site.SaveButton.label', 'my-plugin' );
+		};
+	}, [] );
+
 	const saveCurrentEntity = async () => {
 		if ( ! dirtyCurrentEntity ) return;