Skip to content
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.

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

Make SaveButton extensible #56807

Open
wants to merge 7 commits into
base: trunk
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
Use applyFilters
  • Loading branch information
okmttdhr committed Dec 8, 2023
commit d709e5c811e4b203822e1ee22c883e82af1514ca
42 changes: 17 additions & 25 deletions packages/edit-site/src/components/save-button/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/**
* 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';
import { store as coreStore } from '@wordpress/core-data';
import { displayShortcut } from '@wordpress/keycodes';
import { useCallback } from '@wordpress/element';

/**
* Internal dependencies
Expand All @@ -16,7 +17,6 @@ import {
currentlyPreviewingTheme,
isPreviewingTheme,
} from '../../utils/is-previewing-theme';
import { unlock } from '../../lock-unlock';

export default function SaveButton( {
className = 'edit-site-save-button__button',
Expand Down Expand Up @@ -56,34 +56,18 @@ export default function SaveButton( {
}, [] );

const { setIsSaveViewOpened } = useDispatch( editSiteStore );
const { customizedSaveButtonAction, customizedSaveButtonLabel } = useSelect(
( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );
return {
customizedSaveButtonAction:
getSettings().__experimentalSaveButtonAction,
customizedSaveButtonLabel:
getSettings().__experimentalSaveButtonLabel,
};
},
[]
);

const onClick = useCallback( () => {
if ( customizedSaveButtonAction ) {
customizedSaveButtonAction();
return;
}
setIsSaveViewOpened( true );
}, [ customizedSaveButtonAction, setIsSaveViewOpened ] );
const callback = applyFilters( 'edit-site.SaveButton.onClick', () =>
setIsSaveViewOpened( true )
);
callback();
}, [ setIsSaveViewOpened ] );

const activateSaveEnabled = isPreviewingTheme() || isDirty;
const disabled = isSaving || ! activateSaveEnabled;

const getLabel = () => {
if ( customizedSaveButtonLabel ) {
return customizedSaveButtonLabel;
}

if ( isPreviewingTheme() ) {
if ( isSaving ) {
return sprintf( 'Activating %s', previewingThemeName );
Expand All @@ -104,7 +88,15 @@ export default function SaveButton( {
}
return __( 'Save' );
};
const label = getLabel();
const label = useMemo( () => {
return applyFilters( 'edit-site.SaveButton.label', getLabel(), {
isSaving,
disabled,
isPreviewingTheme,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be better to add it to the deps as well even if it won't be changed.

But the naming is still confusing as people may not notice it's a function instead of the boolean value. However, it's out of the scope of this PR 🙂

defaultLabel,
isDirty,
} );
}, [ isSaving, disabled, defaultLabel, isDirty, getLabel ] );

return (
<Button
Expand Down