diff --git a/docs/reference-guides/data/data-core-editor.md b/docs/reference-guides/data/data-core-editor.md index be2276bbf03641..5cae4759654018 100644 --- a/docs/reference-guides/data/data-core-editor.md +++ b/docs/reference-guides/data/data-core-editor.md @@ -1404,13 +1404,12 @@ _Returns_ Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes: - `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post. -- `template-only`: This mode renders the editor with only the template blocks visible. - `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template. - `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable. _Parameters_ -- _mode_ `string`: Mode (one of 'template-only', 'post-only', 'template-locked' or 'all'). +- _mode_ `string`: Mode (one of 'post-only', 'template-locked' or 'all'). ### setTemplateValidity diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 607f073323d996..d7f6d7c4fbd9f7 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -166,7 +166,7 @@ export default function ReusableBlockEdit( { } = useDispatch( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); - const { innerBlocks, userCanEdit, getBlockEditingMode, getPostLinkProps } = + const { innerBlocks, userCanEdit, getBlockEditingMode, getPostNavigation } = useSelect( ( select ) => { const { canUser } = select( coreStore ); @@ -183,19 +183,19 @@ export default function ReusableBlockEdit( { innerBlocks: blocks, userCanEdit: canEdit, getBlockEditingMode: editingMode, - getPostLinkProps: getSettings().getPostLinkProps, + getPostNavigation: getSettings().getPostNavigation, }; }, [ patternClientId, ref ] ); - const editOriginalProps = getPostLinkProps - ? getPostLinkProps( { + const originalPatternNavigation = getPostNavigation + ? getPostNavigation( { postId: ref, postType: 'wp_block', canvas: 'edit', } ) - : {}; + : undefined; useEffect( () => setBlockEditMode( setBlockEditingMode, innerBlocks ), @@ -283,7 +283,7 @@ export default function ReusableBlockEdit( { const handleEditOriginal = ( event ) => { setBlockEditMode( setBlockEditingMode, innerBlocks, 'default' ); - editOriginalProps.onClick( event ); + originalPatternNavigation?.goTo( event ); }; let children = null; @@ -314,11 +314,11 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && editOriginalProps && ( + { userCanEdit && originalPatternNavigation && ( { __( 'Edit original' ) } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index b76b89ff7673db..bdcfd3172e7327 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -64,7 +64,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection, hasActiveMetaboxes, hasFixedToolbar, - isEditingTemplate, isPublishSidebarOpened, showIconLabels, hasHistory, @@ -77,9 +76,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - hasHistory: !! select( editorStore ).getEditorSettings().goBack, - isEditingTemplate: - select( editorStore ).getRenderingMode() === 'template-only', + hasHistory: select( editorStore ).getEditorSettings().hasHistory, isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ), @@ -120,8 +117,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { 'selected-block-tools-wrapper', { 'is-collapsed': - isEditingTemplate && - isBlockToolsCollapsed, + hasHistory && isBlockToolsCollapsed, } ) } > @@ -131,7 +127,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { ref={ blockToolbarRef } name="block-toolbar" /> - { isEditingTemplate && hasBlockSelection && ( + { hasHistory && hasBlockSelection && (

) } diff --git a/packages/editor/src/components/post-template/create-new-template-modal.js b/packages/editor/src/components/post-template/create-new-template-modal.js index 61b1b165aca272..164dbf0181a442 100644 --- a/packages/editor/src/components/post-template/create-new-template-modal.js +++ b/packages/editor/src/components/post-template/create-new-template-modal.js @@ -23,15 +23,19 @@ import { store as editorStore } from '../../store'; const DEFAULT_TITLE = __( 'Custom Template' ); export default function CreateNewTemplateModal( { onClose } ) { - const defaultBlockTemplate = useSelect( - ( select ) => - select( editorStore ).getEditorSettings().defaultBlockTemplate, - [] + const { defaultBlockTemplate, getPostNavigation } = useSelect( + ( select ) => { + const { getEditorSettings, getCurrentTemplateId } = + select( editorStore ); + return { + defaultBlockTemplate: getEditorSettings().defaultBlockTemplate, + getPostNavigation: getEditorSettings().getPostNavigation, + getTemplateId: getCurrentTemplateId, + }; + } ); - const { createTemplate, setRenderingMode } = unlock( - useDispatch( editorStore ) - ); + const { createTemplate } = unlock( useDispatch( editorStore ) ); const [ title, setTitle ] = useState( '' ); @@ -86,15 +90,22 @@ export default function CreateNewTemplateModal( { onClose } ) { ), ] ); - await createTemplate( { + const newTemplate = await createTemplate( { slug: cleanForSlug( title || DEFAULT_TITLE ), content: newTemplateContent, title: title || DEFAULT_TITLE, } ); setIsBusy( false ); + const templateNavigation = getPostNavigation + ? getPostNavigation( { + postId: newTemplate.id, + postType: 'wp_template', + canvas: 'edit', + } ) + : undefined; + templateNavigation?.goTo(); cancel(); - setRenderingMode( 'template-only' ); }; return ( diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index fc49339c2c13ff..94b29298eb0e04 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -113,8 +113,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { const postContext = - rootLevelPost.type !== 'wp_template' || - ( shouldRenderTemplate && mode !== 'template-only' ) + rootLevelPost.type !== 'wp_template' ? { postId: post.id, postType: post.type } : {}; @@ -125,14 +124,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( ? rootLevelPost.slug : undefined, }; - }, [ - mode, - post.id, - post.type, - rootLevelPost.type, - rootLevelPost?.slug, - shouldRenderTemplate, - ] ); + }, [ post.id, post.type, rootLevelPost.type, rootLevelPost.slug ] ); const { editorSettings, selection, isReady } = useSelect( ( select ) => { const { @@ -195,12 +187,14 @@ export const ExperimentalEditorProvider = withRegistryProvider( } ); } + // Not sure if the missing no dependencies here is deliberate or not so ignoring lint warning for now. + // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); // Synchronizes the active post with the state useEffect( () => { setEditedPost( post.type, post.id ); - }, [ post.type, post.id ] ); + }, [ post.type, post.id, setEditedPost ] ); // Synchronize the editor settings as they change. useEffect( () => { @@ -215,7 +209,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( // Sets the right rendering mode when loading the editor. useEffect( () => { setRenderingMode( settings.defaultRenderingMode ?? 'post-only' ); - }, [ settings.defaultRenderingMode, setRenderingMode ] ); + }, [ settings.defaultRenderingMode, setRenderingMode, post.type ] ); if ( ! isReady ) { return null; diff --git a/packages/editor/src/components/provider/use-block-editor-settings.js b/packages/editor/src/components/provider/use-block-editor-settings.js index eddc295766f8ce..caba64391c23a5 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -50,7 +50,9 @@ const BLOCK_EDITOR_SETTINGS = [ 'fontSizes', 'gradients', 'generateAnchors', - 'getPostLinkProps', + 'getPostNavigation', + 'goBack', + 'hasHistory', 'hasInlineToolbar', 'imageDefaultSize', 'imageDimensions', diff --git a/packages/editor/src/store/actions.js b/packages/editor/src/store/actions.js index a0330321bac8f7..3b53deff6e0c08 100644 --- a/packages/editor/src/store/actions.js +++ b/packages/editor/src/store/actions.js @@ -576,11 +576,10 @@ export function updateEditorSettings( settings ) { * Returns an action used to set the rendering mode of the post editor. We support multiple rendering modes: * * - `all`: This is the default mode. It renders the post editor with all the features available. If a template is provided, it's preferred over the post. - * - `template-only`: This mode renders the editor with only the template blocks visible. * - `post-only`: This mode extracts the post blocks from the template and renders only those. The idea is to allow the user to edit the post/page in isolation without the wrapping template. * - `template-locked`: This mode renders both the template and the post blocks but the template blocks are locked and can't be edited. The post blocks are editable. * - * @param {string} mode Mode (one of 'template-only', 'post-only', 'template-locked' or 'all'). + * @param {string} mode Mode (one of 'post-only', 'template-locked' or 'all'). */ export const setRenderingMode = ( mode ) => diff --git a/packages/editor/src/store/private-actions.js b/packages/editor/src/store/private-actions.js index 7ddeab5f35734c..2bd5f74c7e1211 100644 --- a/packages/editor/src/store/private-actions.js +++ b/packages/editor/src/store/private-actions.js @@ -58,4 +58,5 @@ export const createTemplate = ], } ); + return savedTemplate; };