diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index f8359c9889312c..a17a59c3e8976a 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -212,7 +212,7 @@ export default function ReusableBlockEdit( { innerBlocks, userCanEdit, getBlockEditingMode, - getPostLinkProps, + onNavigateToEntityRecord, editingMode, } = useSelect( ( select ) => { @@ -230,20 +230,14 @@ export default function ReusableBlockEdit( { innerBlocks: blocks, userCanEdit: canEdit, getBlockEditingMode: _getBlockEditingMode, - getPostLinkProps: getSettings().getPostLinkProps, + onNavigateToEntityRecord: + getSettings().onNavigateToEntityRecord, editingMode: _getBlockEditingMode( patternClientId ), }; }, [ patternClientId, ref ] ); - const editOriginalProps = getPostLinkProps - ? getPostLinkProps( { - postId: ref, - postType: 'wp_block', - } ) - : {}; - // Sync the editing mode of the pattern block with the inner blocks. useEffect( () => { setBlockEditMode( @@ -342,8 +336,11 @@ export default function ReusableBlockEdit( { }, blockEditorStore ); }, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] ); - const handleEditOriginal = ( event ) => { - editOriginalProps.onClick( event ); + const handleEditOriginal = () => { + onNavigateToEntityRecord( { + postId: ref, + postType: 'wp_block', + } ); }; const resetContent = () => { @@ -380,13 +377,10 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && editOriginalProps && ( + { userCanEdit && onNavigateToEntityRecord && ( - + { __( 'Edit original' ) } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 152ccd0e1c390a..b573ac43fe5fa7 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -76,7 +76,9 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - hasHistory: !! select( editorStore ).getEditorSettings().goBack, + hasHistory: + !! select( editorStore ).getEditorSettings() + .onNavigateToPreviousEntityRecord, isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 55355999d3781d..9dd7314357e043 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -196,7 +196,7 @@ function Layout( { initialPost } ) { documentLabel: postTypeLabel || _x( 'Document', 'noun' ), hasBlockSelected: !! select( blockEditorStore ).getBlockSelectionStart(), - hasHistory: !! getEditorSettings().goBack, + hasHistory: !! getEditorSettings().onNavigateToPreviousEntityRecord, }; }, [] ); diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index ce99ed1eef38eb..5410cbfaeb816c 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -21,7 +21,7 @@ import Layout from './components/layout'; import EditorInitialization from './components/editor-initialization'; import { store as editPostStore } from './store'; import { unlock } from './lock-unlock'; -import usePostHistory from './hooks/use-post-history'; +import useNavigateToEntityRecord from './hooks/use-navigate-to-entity-record'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); @@ -32,8 +32,12 @@ function Editor( { initialEdits, ...props } ) { - const { currentPost, getPostLinkProps, initialPost, goBack } = - usePostHistory( initialPostId, initialPostType ); + const { + initialPost, + currentPost, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord, + } = useNavigateToEntityRecord( initialPostId, initialPostType ); const { hasInlineToolbar, post, preferredStyleVariations, template } = useSelect( @@ -81,8 +85,8 @@ function Editor( { const editorSettings = useMemo( () => ( { ...settings, - getPostLinkProps, - goBack, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord, defaultRenderingMode, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, @@ -95,8 +99,8 @@ function Editor( { hasInlineToolbar, preferredStyleVariations, updatePreferredStyleVariations, - getPostLinkProps, - goBack, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord, defaultRenderingMode, ] ); diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-navigate-to-entity-record.js similarity index 61% rename from packages/edit-post/src/hooks/use-post-history.js rename to packages/edit-post/src/hooks/use-navigate-to-entity-record.js index fa76258a0c2468..e891e7a3c5e6b0 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-navigate-to-entity-record.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { useCallback, useReducer, useMemo } from '@wordpress/element'; -import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; /** * A hook that records the 'entity' history in the post editor as a user @@ -16,9 +15,12 @@ import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; * @param {string} initialPostType The post type of the post when the editor loaded. * * @return {Object} An object containing the `currentPost` variable and - * `getPostLinkProps` and `goBack` functions. + * `onNavigateToEntityRecord` and `onNavigateToPreviousEntityRecord` functions. */ -export default function usePostHistory( initialPostId, initialPostType ) { +export default function useNavigateToEntityRecord( + initialPostId, + initialPostType +) { const [ postHistory, dispatch ] = useReducer( ( historyState, { type, post } ) => { if ( type === 'push' ) { @@ -42,31 +44,14 @@ export default function usePostHistory( initialPostId, initialPostType ) { }; }, [ initialPostType, initialPostId ] ); - const getPostLinkProps = useCallback( ( params ) => { - const currentArgs = getQueryArgs( window.location.href ); - const currentUrlWithoutArgs = removeQueryArgs( - window.location.href, - ...Object.keys( currentArgs ) - ); - - const newUrl = addQueryArgs( currentUrlWithoutArgs, { - post: params.postId, - action: 'edit', + const onNavigateToEntityRecord = useCallback( ( params ) => { + dispatch( { + type: 'push', + post: { postId: params.postId, postType: params.postType }, } ); - - return { - href: newUrl, - onClick: ( event ) => { - event?.preventDefault(); - dispatch( { - type: 'push', - post: { postId: params.postId, postType: params.postType }, - } ); - }, - }; }, [] ); - const goBack = useCallback( () => { + const onNavigateToPreviousEntityRecord = useCallback( () => { dispatch( { type: 'pop' } ); }, [] ); @@ -74,8 +59,11 @@ export default function usePostHistory( initialPostId, initialPostType ) { return { currentPost, - getPostLinkProps, initialPost, - goBack: postHistory.length > 1 ? goBack : undefined, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord: + postHistory.length > 1 + ? onNavigateToPreviousEntityRecord + : undefined, }; } diff --git a/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js new file mode 100644 index 00000000000000..120b15b8551d3d --- /dev/null +++ b/packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useHistory } = unlock( routerPrivateApis ); + +export default function useNavigateToEntityRecord() { + const history = useHistory(); + + const onNavigateToEntityRecord = useCallback( + ( params ) => { + history.push( { ...params, focusMode: true, canvas: 'edit' } ); + }, + [ history ] + ); + + return onNavigateToEntityRecord; +} diff --git a/packages/edit-site/src/components/block-editor/use-post-link-props.js b/packages/edit-site/src/components/block-editor/use-post-link-props.js deleted file mode 100644 index 3fee876ceb96d5..00000000000000 --- a/packages/edit-site/src/components/block-editor/use-post-link-props.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; -import { getPostLinkProps } from '../routes/link'; - -const { useHistory } = unlock( routerPrivateApis ); - -export function usePostLinkProps() { - const history = useHistory(); - - return ( params, state ) => { - return getPostLinkProps( - history, - { ...params, focusMode: true, canvas: 'edit' }, - state - ); - }; -} diff --git a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js index 77e9e69f02a984..b513e560ec5caa 100644 --- a/packages/edit-site/src/components/block-editor/use-site-editor-settings.js +++ b/packages/edit-site/src/components/block-editor/use-site-editor-settings.js @@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { usePostLinkProps } from './use-post-link-props'; +import useNavigateToEntityRecord from './use-navigate-to-entity-record'; import { FOCUSABLE_ENTITIES } from '../../utils/constants'; const { useBlockEditorSettings } = unlock( editorPrivateApis ); @@ -90,7 +90,7 @@ function useArchiveLabel( templateSlug ) { ); } -function useGoBack() { +function useNavigateToPreviousEntityRecord() { const location = useLocation(); const history = useHistory(); const goBack = useMemo( () => { @@ -103,7 +103,7 @@ function useGoBack() { } export function useSpecificEditorSettings() { - const getPostLinkProps = usePostLinkProps(); + const onNavigateToEntityRecord = useNavigateToEntityRecord(); const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect( ( select ) => { const { @@ -133,7 +133,8 @@ export function useSpecificEditorSettings() { ); const archiveLabels = useArchiveLabel( templateSlug ); const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all'; - const goBack = useGoBack(); + const onNavigateToPreviousEntityRecord = + useNavigateToPreviousEntityRecord(); const defaultEditorSettings = useMemo( () => { return { ...settings, @@ -142,8 +143,8 @@ export function useSpecificEditorSettings() { supportsTemplateMode: true, focusMode: canvasMode !== 'view', defaultRenderingMode, - getPostLinkProps, - goBack, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord, // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, __experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel, @@ -152,8 +153,8 @@ export function useSpecificEditorSettings() { settings, canvasMode, defaultRenderingMode, - getPostLinkProps, - goBack, + onNavigateToEntityRecord, + onNavigateToPreviousEntityRecord, archiveLabels.archiveTypeLabel, archiveLabels.archiveNameLabel, ] ); diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js index 1e358328942e68..4423eeeb1d6e8d 100644 --- a/packages/edit-site/src/components/routes/link.js +++ b/packages/edit-site/src/components/routes/link.js @@ -15,12 +15,8 @@ import { const { useHistory } = unlock( routerPrivateApis ); -export function getPostLinkProps( - history, - params = {}, - state, - shouldReplace = false -) { +export function useLink( params, state, shouldReplace = false ) { + const history = useHistory(); function onClick( event ) { event?.preventDefault(); @@ -52,11 +48,6 @@ export function getPostLinkProps( }; } -export function useLink( params, state, shouldReplace ) { - const history = useHistory(); - return getPostLinkProps( history, params, state, shouldReplace ); -} - export default function Link( { params = {}, state, diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 97e9c8a2cf779c..2ac03a63e73fbe 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -48,24 +48,27 @@ const icons = { }; export default function DocumentBar() { - const { postType, postId, goBack } = useSelect( ( select ) => { - const { - getCurrentPostId, - getCurrentPostType, - getEditorSettings: getSettings, - } = select( editorStore ); - const back = getSettings().goBack; - return { - postType: getCurrentPostType(), - postId: getCurrentPostId(), - goBack: typeof back === 'function' ? back : undefined, - getEditorSettings: getSettings, - }; - }, [] ); + const { postType, postId, onNavigateToPreviousEntityRecord } = useSelect( + ( select ) => { + const { + getCurrentPostId, + getCurrentPostType, + getEditorSettings: getSettings, + } = select( editorStore ); + return { + postType: getCurrentPostType(), + postId: getCurrentPostId(), + onNavigateToPreviousEntityRecord: + getSettings().onNavigateToPreviousEntityRecord, + getEditorSettings: getSettings, + }; + }, + [] + ); const handleOnBack = () => { - if ( goBack ) { - goBack(); + if ( onNavigateToPreviousEntityRecord ) { + onNavigateToPreviousEntityRecord(); } }; @@ -73,7 +76,9 @@ export default function DocumentBar() { ); } diff --git a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js index acf13c9025bce3..2000ae5727190c 100644 --- a/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js +++ b/packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js @@ -27,16 +27,15 @@ import { store as editorStore } from '../../store'; * editor iframe canvas. */ export default function EditTemplateBlocksNotification( { contentRef } ) { - const editTemplate = useSelect( ( select ) => { + const { onNavigateToEntityRecord, templateId } = useSelect( ( select ) => { const { getEditorSettings, getCurrentTemplateId } = select( editorStore ); - const { getPostLinkProps } = getEditorSettings(); - return getPostLinkProps - ? getPostLinkProps( { - postId: getCurrentTemplateId(), - postType: 'wp_template', - } ) - : {}; + + return { + onNavigateToEntityRecord: + getEditorSettings().onNavigateToEntityRecord, + templateId: getCurrentTemplateId(), + }; }, [] ); const { getNotices } = useSelect( noticesStore ); @@ -68,7 +67,11 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { actions: [ { label: __( 'Edit template' ), - onClick: () => editTemplate.onClick(), + onClick: () => + onNavigateToEntityRecord( { + postId: templateId, + postType: 'wp_template', + } ), }, ], } @@ -93,7 +96,15 @@ export default function EditTemplateBlocksNotification( { contentRef } ) { canvas?.removeEventListener( 'click', handleClick ); canvas?.removeEventListener( 'dblclick', handleDblClick ); }; - }, [ lastNoticeId, contentRef.current ] ); + }, [ + lastNoticeId, + contentRef, + getNotices, + createInfoNotice, + onNavigateToEntityRecord, + templateId, + removeNotice, + ] ); return ( { setIsDialogOpen( false ); - editTemplate.onClick(); + onNavigateToEntityRecord( { + postId: templateId, + postType: 'wp_template', + } ); } } onCancel={ () => setIsDialogOpen( false ) } > diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 5e6fad9f4eb627..489694bb8adfd5 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -139,7 +139,8 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - showEditorPadding: !! editorSettings.goBack, + showEditorPadding: + !! editorSettings.onNavigateToPreviousEntityRecord, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); diff --git a/packages/editor/src/components/post-template/block-theme.js b/packages/editor/src/components/post-template/block-theme.js index a6a102e8470187..88dbebade9c204 100644 --- a/packages/editor/src/components/post-template/block-theme.js +++ b/packages/editor/src/components/post-template/block-theme.js @@ -24,18 +24,24 @@ const POPOVER_PROPS = { }; export default function BlockThemeControl( { id } ) { - const { isTemplateHidden, getPostLinkProps, getEditorSettings, hasGoBack } = - useSelect( ( select ) => { - const { getRenderingMode, getEditorSettings: _getEditorSettings } = - unlock( select( editorStore ) ); - const editorSettings = _getEditorSettings(); - return { - isTemplateHidden: getRenderingMode() === 'post-only', - getPostLinkProps: editorSettings.getPostLinkProps, - getEditorSettings: _getEditorSettings, - hasGoBack: editorSettings.hasOwnProperty( 'goBack' ), - }; - }, [] ); + const { + isTemplateHidden, + onNavigateToEntityRecord, + getEditorSettings, + hasGoBack, + } = useSelect( ( select ) => { + const { getRenderingMode, getEditorSettings: _getEditorSettings } = + unlock( select( editorStore ) ); + const editorSettings = _getEditorSettings(); + return { + isTemplateHidden: getRenderingMode() === 'post-only', + onNavigateToEntityRecord: editorSettings.onNavigateToEntityRecord, + getEditorSettings: _getEditorSettings, + hasGoBack: editorSettings.hasOwnProperty( + 'onNavigateToPreviousEntityRecord' + ), + }; + }, [] ); const { editedRecord: template, hasResolved } = useEntityRecord( 'postType', @@ -44,23 +50,19 @@ export default function BlockThemeControl( { id } ) { ); const { createSuccessNotice } = useDispatch( noticesStore ); const { setRenderingMode } = useDispatch( editorStore ); - const editTemplate = getPostLinkProps - ? getPostLinkProps( { - postId: template.id, - postType: 'wp_template', - } ) - : {}; if ( ! hasResolved ) { return null; } - // The site editor does not have a `goBack` setting as it uses its own routing + + // The site editor does not have a `onNavigateToPreviousEntityRecord` setting as it uses its own routing // and assigns its own backlink to focusMode pages. const notificationAction = hasGoBack ? [ { label: __( 'Go back' ), - onClick: () => getEditorSettings().goBack(), + onClick: () => + getEditorSettings().onNavigateToPreviousEntityRecord(), }, ] : undefined; @@ -79,8 +81,11 @@ export default function BlockThemeControl( { id } ) { <> { - editTemplate.onClick( event ); + onClick={ () => { + onNavigateToEntityRecord( { + postId: template.id, + postType: 'wp_template', + } ); onClose(); createSuccessNotice( __( @@ -95,6 +100,7 @@ export default function BlockThemeControl( { id } ) { > { __( 'Edit template' ) } + diff --git a/packages/editor/src/components/post-template/classic-theme.js b/packages/editor/src/components/post-template/classic-theme.js index 3d731a500b9d17..46534db49dcc42 100644 --- a/packages/editor/src/components/post-template/classic-theme.js +++ b/packages/editor/src/components/post-template/classic-theme.js @@ -64,7 +64,7 @@ function PostTemplateDropdownContent( { onClose } ) { canCreate, canEdit, currentTemplateId, - getPostLinkProps, + onNavigateToEntityRecord, getEditorSettings, } = useSelect( ( select ) => { @@ -94,21 +94,14 @@ function PostTemplateDropdownContent( { onClose } ) { editorSettings.supportsTemplateMode && !! _currentTemplateId, currentTemplateId: _currentTemplateId, - getPostLinkProps: editorSettings.getPostLinkProps, + onNavigateToEntityRecord: + editorSettings.onNavigateToEntityRecord, getEditorSettings: select( editorStore ).getEditorSettings, }; }, [ allowSwitchingTemplate ] ); - const editTemplate = - getPostLinkProps && currentTemplateId - ? getPostLinkProps( { - postId: currentTemplateId, - postType: 'wp_template', - } ) - : {}; - const options = useMemo( () => Object.entries( { @@ -168,12 +161,15 @@ function PostTemplateDropdownContent( { onClose } ) { } /> ) } - { canEdit && ( + { canEdit && onNavigateToEntityRecord && (