From eb0e0af2749474cb0a277c5980f1d8dfeae1f445 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 16:55:50 +1300 Subject: [PATCH 01/32] Move synced patterns global editing to focus mode in editor --- .../src/components/block-inspector/index.js | 4 +- .../block-list/use-in-between-inserter.js | 5 +- packages/block-editor/src/store/selectors.js | 7 +- packages/block-library/package.json | 1 + packages/block-library/src/block/edit.js | 97 +++++++++++++------ .../edit-post/src/components/header/index.js | 14 ++- .../components/header/mode-switcher/index.js | 5 +- .../sidebar/settings-header/index.js | 27 ++++-- .../sidebar/settings-sidebar/index.js | 10 +- .../src/components/visual-editor/index.js | 7 +- .../src/components/document-bar/index.js | 62 +++++++++--- .../editor/src/components/provider/index.js | 16 ++- 12 files changed, 187 insertions(+), 68 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 18cd72cde057d..9cb3b89a7bc25 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -92,7 +92,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { blockType: _blockType, topLevelLockedBlock: __unstableGetContentLockingParent( _selectedBlockClientId ) || - ( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' + ( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' || + ( _selectedBlockName === 'core/block' && + window.__experimentalPatternPartialSyncing ) ? _selectedBlockClientId : undefined ), }; diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index a60453716ff29..bd323ed057d73 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -28,6 +28,7 @@ export function useInBetweenInserter() { getTemplateLock, __unstableIsWithinBlockOverlay, getBlockEditingMode, + getBlockName, } = useSelect( blockEditorStore ); const { showInsertionPoint, hideInsertionPoint } = useDispatch( blockEditorStore ); @@ -75,7 +76,9 @@ export function useInBetweenInserter() { if ( getTemplateLock( rootClientId ) || - getBlockEditingMode( rootClientId ) === 'disabled' + getBlockEditingMode( rootClientId ) === 'disabled' || + ( getBlockName( rootClientId ) === 'core/block' && + window.__experimentalPatternPartialSyncing ) ) { return; } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index b6d455333c7a5..94eebd32837a5 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2742,8 +2742,11 @@ export const __unstableGetContentLockingParent = createSelector( while ( state.blocks.parents.has( current ) ) { current = state.blocks.parents.get( current ); if ( - current && - getTemplateLock( state, current ) === 'contentOnly' + ( current && + getBlockName( state, current ) === 'core/block' && + window.__experimentalPatternPartialSyncing ) || + ( current && + getTemplateLock( state, current ) === 'contentOnly' ) ) { result = current; } diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 30e341d08923a..b736bee5b9ca6 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -44,6 +44,7 @@ "@wordpress/date": "file:../date", "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", + "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", "@wordpress/escape-html": "file:../escape-html", "@wordpress/hooks": "file:../hooks", diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 67b2680f6840e..0f7ddba63b447 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -8,12 +8,12 @@ import classnames from 'classnames'; */ import { useRegistry, useSelect, useDispatch } from '@wordpress/data'; import { useRef, useMemo, useEffect } from '@wordpress/element'; -import { useEntityProp, useEntityRecord } from '@wordpress/core-data'; +import { useEntityRecord, store as coreStore } from '@wordpress/core-data'; import { Placeholder, Spinner, - TextControl, - PanelBody, + ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { @@ -21,13 +21,15 @@ import { __experimentalRecursionProvider as RecursionProvider, __experimentalUseHasRecursion as useHasRecursion, InnerBlocks, - InspectorControls, useBlockProps, Warning, privateApis as blockEditorPrivateApis, store as blockEditorStore, + BlockControls, } from '@wordpress/block-editor'; import { getBlockSupport, parse } from '@wordpress/blocks'; +import { store as editorStore } from '@wordpress/editor'; +import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; /** * Internal dependencies @@ -132,6 +134,30 @@ function getOverridesFromBlocks( blocks, defaultValues ) { return Object.keys( overrides ).length > 0 ? overrides : undefined; } +function setBlockEditMode( setEditMode, blocks ) { + blocks.forEach( ( block ) => { + const editMode = isPartiallySynced( block ) + ? 'contentOnly' + : 'disabled'; + setEditMode( block.clientId, editMode ); + setBlockEditMode( setEditMode, block.innerBlocks ); + } ); +} + +function editSourcePattern( setRenderingMode, patternId ) { + const currentArgs = getQueryArgs( window.location.href ); + const currentUrlWithoutArgs = removeQueryArgs( + window.location.href, + ...Object.keys( currentArgs ) + ); + const newUrl = addQueryArgs( currentUrlWithoutArgs, { + ...currentArgs, + patternId, + } ); + window.history.pushState( null, '', newUrl ); + setRenderingMode( 'pattern-only' ); +} + export default function ReusableBlockEdit( { name, attributes: { ref, overrides }, @@ -139,6 +165,7 @@ export default function ReusableBlockEdit( { clientId: patternClientId, setAttributes, } ) { + const { setRenderingMode } = useDispatch( editorStore ); const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); const { record, editedRecord, hasResolved } = useEntityRecord( @@ -149,14 +176,38 @@ export default function ReusableBlockEdit( { const isMissing = hasResolved && ! record; const initialOverrides = useRef( overrides ); const defaultValuesRef = useRef( {} ); + const { replaceInnerBlocks, __unstableMarkNextChangeAsNotPersistent, setBlockEditingMode, } = useDispatch( blockEditorStore ); - const { getBlockEditingMode } = useSelect( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); + const { innerBlocks, userCanEdit, getBlockEditingMode } = useSelect( + ( select ) => { + const { canUser } = select( coreStore ); + const { getBlocks, getBlockEditingMode: editingMode } = + select( blockEditorStore ); + + const blocks = getBlocks( patternClientId ); + const canEdit = canUser( 'update', 'blocks', ref ); + + // For editing link to the site editor if the theme and user permissions support it. + return { + innerBlocks: blocks, + userCanEdit: canEdit, + getBlockEditingMode: editingMode, + }; + }, + [ patternClientId, ref ] + ); + + useEffect( + () => setBlockEditMode( setBlockEditingMode, innerBlocks ), + [ innerBlocks, setBlockEditingMode ] + ); + // Apply the initial overrides from the pattern block to the inner blocks. useEffect( () => { const initialBlocks = @@ -193,18 +244,6 @@ export default function ReusableBlockEdit( { syncDerivedUpdates, ] ); - const innerBlocks = useSelect( - ( select ) => select( blockEditorStore ).getBlocks( patternClientId ), - [ patternClientId ] - ); - - const [ title, setTitle ] = useEntityProp( - 'postType', - 'wp_block', - 'title', - ref - ); - const { alignment, layout } = useInferredLayout( innerBlocks, parentLayout @@ -275,17 +314,19 @@ export default function ReusableBlockEdit( { return ( - - - - - + { userCanEdit && ( + + + + editSourcePattern( setRenderingMode, ref ) + } + > + { __( 'Edit' ) } + + + + ) } { children === null ? (
) : ( diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 79229175185cd..ba90d6e47d1b3 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -67,17 +67,18 @@ function Header( { setEntitiesSavedStatesCallback } ) { isEditingTemplate, isPublishSidebarOpened, showIconLabels, + isEditingPattern, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); - + const renderingMode = select( editorStore ).getRenderingMode(); return { isTextEditor: getEditorMode() === 'text', hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - isEditingTemplate: - select( editorStore ).getRenderingMode() === 'template-only', + isEditingTemplate: renderingMode === 'template-only', + isEditingPattern: renderingMode === 'pattern-only', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ), @@ -122,7 +123,8 @@ function Header( { setEntitiesSavedStatesCallback } ) { 'selected-block-tools-wrapper', { 'is-collapsed': - isEditingTemplate && + ( isEditingTemplate || + isEditingPattern ) && isBlockToolsCollapsed, } ) } @@ -161,7 +163,9 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { isEditingTemplate && } + { ( isEditingTemplate || isEditingPattern ) && ( + + ) }
( { @@ -46,13 +47,15 @@ function ModeSwitcher() { select( editorStore ).getEditorSettings().codeEditingEnabled, isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', + isEditingPattern: + select( editorStore ).getRenderingMode() === 'pattern-only', mode: select( editPostStore ).getEditorMode(), } ), [] ); const { switchEditorMode } = useDispatch( editPostStore ); - if ( isEditingTemplate ) { + if ( isEditingTemplate || isEditingPattern ) { return null; } diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index 368bd3e9e50db..3ce177b5624a2 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -15,20 +15,27 @@ import { sidebars } from '../settings-sidebar'; const { Tabs } = unlock( componentsPrivateApis ); const SettingsHeader = () => { - const { documentLabel, isTemplateMode } = useSelect( ( select ) => { - const { getPostTypeLabel, getRenderingMode } = select( editorStore ); - - return { - // translators: Default label for the Document sidebar tab, not selected. - documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), - isTemplateMode: getRenderingMode() === 'template-only', - }; - }, [] ); + const { documentLabel, isTemplateMode, isPatternMode } = useSelect( + ( select ) => { + const { getPostTypeLabel, getRenderingMode } = + select( editorStore ); + const renderingMode = getRenderingMode(); + return { + // translators: Default label for the Document sidebar tab, not selected. + documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), + isTemplateMode: renderingMode === 'template-only', + isPatternMode: renderingMode === 'pattern-only', + }; + }, + [] + ); return ( - { isTemplateMode ? __( 'Template' ) : documentLabel } + { isTemplateMode && __( 'Template' ) } + { isPatternMode && __( 'Pattern' ) } + { ! isTemplateMode && ! isPatternMode && documentLabel } { /* translators: Text label for the Block Settings Sidebar tab. */ } diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index 0cd69cb11538c..ef31a7ce7dc91 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -49,6 +49,7 @@ const SidebarContent = ( { sidebarName, keyboardShortcut, isTemplateMode, + isPatternMode, } ) => { // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we // need to forward the `Tabs` context so it can be passed through the @@ -77,7 +78,7 @@ const SidebarContent = ( { > - { ! isTemplateMode && ( + { ! isTemplateMode && ! isPatternMode && ( <> @@ -106,6 +107,7 @@ const SettingsSidebar = () => { isSettingsSidebarActive, keyboardShortcut, isTemplateMode, + isPatternMode, } = useSelect( ( select ) => { // The settings sidebar is used by the edit-post/document and edit-post/block sidebars. // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed. @@ -128,12 +130,13 @@ const SettingsSidebar = () => { const shortcut = select( keyboardShortcutsStore ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ); + const renderingMode = select( editorStore ).getRenderingMode(); return { sidebarName: sidebar, isSettingsSidebarActive: isSettingsSidebar, keyboardShortcut: shortcut, - isTemplateMode: - select( editorStore ).getRenderingMode() === 'template-only', + isTemplateMode: renderingMode === 'template-only', + isPatternMode: renderingMode === 'pattern-only', }; }, [] ); @@ -162,6 +165,7 @@ const SettingsSidebar = () => { sidebarName={ sidebarName } keyboardShortcut={ keyboardShortcut } isTemplateMode={ isTemplateMode } + isPatternMode={ isPatternMode } /> ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index fd9b4a6ff8bb6..3b2535a1d79b3 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -74,12 +74,15 @@ export default function VisualEditor( { styles } ) { const isToBeIframed = ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && ! hasMetaBoxes ) || - renderingMode === 'template-only'; + renderingMode === 'template-only' || + renderingMode === 'pattern-only'; return (
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index da43533bfa5bc..8556bc5b4d114 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -22,9 +22,11 @@ import { symbol, } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; -import { useEntityRecord } from '@wordpress/core-data'; +import { useEntityRecord, store as coreDataStore } from '@wordpress/core-data'; import { store as commandsStore } from '@wordpress/commands'; import { useState, useEffect, useRef } from '@wordpress/element'; +import { getQueryArg } from '@wordpress/url'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -48,7 +50,18 @@ const icons = { }; export default function DocumentBar() { - const { isEditingTemplate, templateId, postType, postId } = useSelect( + const patternId = parseInt( + getQueryArg( window.location.href, 'patternId' ) + ); + + const { + isEditingTemplate, + templateId, + postType, + postId, + isEditingPattern, + dirtyEntityRecords, + } = useSelect( ( select ) => { const { getRenderingMode, @@ -56,31 +69,56 @@ export default function DocumentBar() { getCurrentPostId, getCurrentPostType, } = select( editorStore ); + const { __experimentalGetDirtyEntityRecords } = + select( coreDataStore ); const _templateId = getCurrentTemplateId(); + const renderingMode = getRenderingMode(); return { isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', + !! _templateId && renderingMode === 'template-only', + isEditingPattern: renderingMode === 'pattern-only', templateId: _templateId, - postType: getCurrentPostType(), - postId: getCurrentPostId(), + postType: + renderingMode !== 'pattern-only' + ? getCurrentPostType() + : 'wp_block', + postId: + renderingMode !== 'pattern-only' + ? getCurrentPostId() + : patternId, + dirtyEntityRecords: __experimentalGetDirtyEntityRecords(), }; }, - [] + [ patternId ] ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); + const { createWarningNotice } = useDispatch( noticesStore ); + + function handleOnBack() { + if ( + patternId && + dirtyEntityRecords.length > 0 && + dirtyEntityRecords.find( ( record ) => record.key === patternId ) + ) { + createWarningNotice( + __( + 'Your pattern changes will not show in the post until they are saved' + ), + { + type: 'snackbar', + } + ); + } + setRenderingMode( getEditorSettings().defaultRenderingMode ); + } return ( - setRenderingMode( - getEditorSettings().defaultRenderingMode - ) - : undefined + isEditingTemplate || isEditingPattern ? handleOnBack : undefined } /> ); diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index fc49339c2c13f..69581043eff9f 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -13,6 +13,7 @@ import { import { store as noticesStore } from '@wordpress/notices'; import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; import { createBlock } from '@wordpress/blocks'; +import { getQueryArg } from '@wordpress/url'; /** * Internal dependencies @@ -40,7 +41,9 @@ const noop = () => {}; */ function useBlockEditorProps( post, template, mode ) { const rootLevelPost = - mode === 'post-only' || ! template ? 'post' : 'template'; + mode === 'post-only' || mode === 'pattern-only' || ! template + ? 'post' + : 'template'; const [ postBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', post.type, @@ -109,7 +112,8 @@ export const ExperimentalEditorProvider = withRegistryProvider( ( select ) => select( editorStore ).getRenderingMode(), [] ); - const shouldRenderTemplate = !! template && mode !== 'post-only'; + const shouldRenderTemplate = + !! template && mode !== 'post-only' && mode !== 'pattern-only'; const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { const postContext = @@ -154,8 +158,14 @@ export const ExperimentalEditorProvider = withRegistryProvider( type, id ); + + const patternId = getQueryArg( window.location.href, 'patternId' ); + const postData = + mode !== 'pattern-only' + ? post + : { id: patternId, type: 'wp_block' }; const [ blocks, onInput, onChange ] = useBlockEditorProps( - post, + postData, template, mode ); From 46f0d79d55f3456e6741c3ed82e6b91caa53c2f2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 14 Dec 2023 14:19:02 +1300 Subject: [PATCH 02/32] Add back padding to focus mode and notice to indicate global nature of changes --- packages/block-library/src/block/edit.js | 41 +++++++++++++++++-- .../src/components/visual-editor/index.js | 5 +-- .../src/components/visual-editor/style.scss | 4 ++ 3 files changed, 43 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 0f7ddba63b447..c7226c61744bd 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -30,6 +30,7 @@ import { import { getBlockSupport, parse } from '@wordpress/blocks'; import { store as editorStore } from '@wordpress/editor'; import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; +import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -144,7 +145,12 @@ function setBlockEditMode( setEditMode, blocks ) { } ); } -function editSourcePattern( setRenderingMode, patternId ) { +function editSourcePattern( + setRenderingMode, + patternId, + createSuccessNotice, + defaultRenderingMode +) { const currentArgs = getQueryArgs( window.location.href ); const currentUrlWithoutArgs = removeQueryArgs( window.location.href, @@ -156,6 +162,20 @@ function editSourcePattern( setRenderingMode, patternId ) { } ); window.history.pushState( null, '', newUrl ); setRenderingMode( 'pattern-only' ); + createSuccessNotice( + __( + 'Editing source pattern. Changes made here affect all posts and pages that use this pattern. Changes will not show in the post/page editor until you save the pattern.' + ), + { + type: 'snackbar', + actions: [ + { + label: __( 'Go back' ), + onClick: () => setRenderingMode( defaultRenderingMode ), + }, + ], + } + ); } export default function ReusableBlockEdit( { @@ -183,21 +203,29 @@ export default function ReusableBlockEdit( { setBlockEditingMode, } = useDispatch( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); + const { createSuccessNotice } = useDispatch( noticesStore ); - const { innerBlocks, userCanEdit, getBlockEditingMode } = useSelect( + const { + innerBlocks, + userCanEdit, + getBlockEditingMode, + defaultRenderingMode, + } = useSelect( ( select ) => { const { canUser } = select( coreStore ); const { getBlocks, getBlockEditingMode: editingMode } = select( blockEditorStore ); - + const { getEditorSettings } = select( editorStore ); const blocks = getBlocks( patternClientId ); const canEdit = canUser( 'update', 'blocks', ref ); + const defaultRenderMode = getEditorSettings().defaultRenderingMode; // For editing link to the site editor if the theme and user permissions support it. return { innerBlocks: blocks, userCanEdit: canEdit, getBlockEditingMode: editingMode, + defaultRenderingMode: defaultRenderMode, }; }, [ patternClientId, ref ] @@ -319,7 +347,12 @@ export default function ReusableBlockEdit( { - editSourcePattern( setRenderingMode, ref ) + editSourcePattern( + setRenderingMode, + ref, + createSuccessNotice, + defaultRenderingMode + ) } > { __( 'Edit' ) } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 3b2535a1d79b3..002e51e42c078 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -80,9 +80,8 @@ export default function VisualEditor( { styles } ) { return (
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 46838c97f8799..94b0d42ad6042 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -36,6 +36,10 @@ // as align-items: stretch is inherited by default.Additionally due to older browser's flex height // interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping. // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property. + + &.is-pattern-mode { + padding: 48px 48px 0; + } } .edit-post-visual-editor__content-area { From 026616bba67a06cc104e2ea05f0fd298149693dd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 14 Dec 2023 14:59:39 +1300 Subject: [PATCH 03/32] Update experiment wording --- lib/experiments-page.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index b77a69b692ff1..c2c7beb01cff8 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -140,12 +140,12 @@ function gutenberg_initialize_experiments_settings() { add_settings_field( 'gutenberg-pattern-partial-syncing', - __( 'Synced patterns partial syncing', 'gutenberg' ), + __( 'Pattern overrides', 'gutenberg' ), 'gutenberg_display_experiment_field', 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test partial syncing of patterns', 'gutenberg' ), + 'label' => __( 'Test overrides in synced patterns', 'gutenberg' ), 'id' => 'gutenberg-pattern-partial-syncing', ) ); From a5cfffc6ba590b0fc7a789add64ddb629ef65b5f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 15 Dec 2023 11:23:34 +1300 Subject: [PATCH 04/32] Move the edit mode function to the editor package --- packages/block-library/package.json | 1 - packages/block-library/src/block/edit.js | 47 +++---------------- .../src/hooks/pattern-partial-syncing.js | 31 +++++++++++- 3 files changed, 36 insertions(+), 43 deletions(-) diff --git a/packages/block-library/package.json b/packages/block-library/package.json index b736bee5b9ca6..30e341d08923a 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -44,7 +44,6 @@ "@wordpress/date": "file:../date", "@wordpress/deprecated": "file:../deprecated", "@wordpress/dom": "file:../dom", - "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", "@wordpress/escape-html": "file:../escape-html", "@wordpress/hooks": "file:../hooks", diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index c7226c61744bd..0b98a11c30f31 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -28,9 +28,7 @@ import { BlockControls, } from '@wordpress/block-editor'; import { getBlockSupport, parse } from '@wordpress/blocks'; -import { store as editorStore } from '@wordpress/editor'; import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; -import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -145,12 +143,7 @@ function setBlockEditMode( setEditMode, blocks ) { } ); } -function editSourcePattern( - setRenderingMode, - patternId, - createSuccessNotice, - defaultRenderingMode -) { +function editSourcePattern( editInPatternOnlyMode, patternId ) { const currentArgs = getQueryArgs( window.location.href ); const currentUrlWithoutArgs = removeQueryArgs( window.location.href, @@ -161,21 +154,7 @@ function editSourcePattern( patternId, } ); window.history.pushState( null, '', newUrl ); - setRenderingMode( 'pattern-only' ); - createSuccessNotice( - __( - 'Editing source pattern. Changes made here affect all posts and pages that use this pattern. Changes will not show in the post/page editor until you save the pattern.' - ), - { - type: 'snackbar', - actions: [ - { - label: __( 'Go back' ), - onClick: () => setRenderingMode( defaultRenderingMode ), - }, - ], - } - ); + editInPatternOnlyMode(); } export default function ReusableBlockEdit( { @@ -184,8 +163,8 @@ export default function ReusableBlockEdit( { __unstableParentLayout: parentLayout, clientId: patternClientId, setAttributes, + editInPatternOnlyMode, } ) { - const { setRenderingMode } = useDispatch( editorStore ); const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); const { record, editedRecord, hasResolved } = useEntityRecord( @@ -203,29 +182,20 @@ export default function ReusableBlockEdit( { setBlockEditingMode, } = useDispatch( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); - const { createSuccessNotice } = useDispatch( noticesStore ); - const { - innerBlocks, - userCanEdit, - getBlockEditingMode, - defaultRenderingMode, - } = useSelect( + const { innerBlocks, userCanEdit, getBlockEditingMode } = useSelect( ( select ) => { const { canUser } = select( coreStore ); const { getBlocks, getBlockEditingMode: editingMode } = select( blockEditorStore ); - const { getEditorSettings } = select( editorStore ); const blocks = getBlocks( patternClientId ); const canEdit = canUser( 'update', 'blocks', ref ); - const defaultRenderMode = getEditorSettings().defaultRenderingMode; // For editing link to the site editor if the theme and user permissions support it. return { innerBlocks: blocks, userCanEdit: canEdit, getBlockEditingMode: editingMode, - defaultRenderingMode: defaultRenderMode, }; }, [ patternClientId, ref ] @@ -342,17 +312,12 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && ( + { userCanEdit && editInPatternOnlyMode && ( - editSourcePattern( - setRenderingMode, - ref, - createSuccessNotice, - defaultRenderingMode - ) + editSourcePattern( editInPatternOnlyMode, ref ) } > { __( 'Edit' ) } diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index 40bd1e16dfc00..2b8c3e3e7da32 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -6,7 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; import { createHigherOrderComponent } from '@wordpress/compose'; import { useBlockEditingMode } from '@wordpress/block-editor'; import { hasBlockSupport } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies @@ -64,10 +64,39 @@ const withPartialSyncingControls = createHigherOrderComponent( } ); +/** + * Adds an editInPatternOnlyMode prop which allows the block to switch between post and pattern + * editing modes. + * + * @param {Component} BlockEdit Original component. + * + * @return {Component} Wrapped component. + */ +const withPatternOnlyRenderMode = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + if ( props.name !== 'core/block' ) { + return ; + } + + const { setRenderingMode } = useDispatch( editorStore ); + + const newProps = { + ...props, + editInPatternOnlyMode: () => setRenderingMode( 'pattern-only' ), + }; + return ; + } +); + if ( window.__experimentalPatternPartialSyncing ) { addFilter( 'editor.BlockEdit', 'core/editor/with-partial-syncing-controls', withPartialSyncingControls ); + addFilter( + 'editor.BlockEdit', + 'core/editor/with-pattern-only-render-mode', + withPatternOnlyRenderMode + ); } From 8ec78b40769d5d86c57ff88747ddd6a1e488548f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 15 Dec 2023 11:37:01 +1300 Subject: [PATCH 05/32] Change label on edit button --- packages/block-library/src/block/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 0b98a11c30f31..9ea3c4dd8cf49 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -320,7 +320,7 @@ export default function ReusableBlockEdit( { editSourcePattern( editInPatternOnlyMode, ref ) } > - { __( 'Edit' ) } + { __( 'Edit original' ) } From 4764b56f7cc7700b3308108fc0509c3694ca1c4c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 16:57:16 +1300 Subject: [PATCH 06/32] Remove `pattern-only` mode --- packages/block-library/src/block/edit.js | 21 ++----- .../edit-post/src/components/header/index.js | 9 +-- .../components/header/mode-switcher/index.js | 7 +-- .../sidebar/settings-header/index.js | 25 +++------ .../sidebar/settings-sidebar/index.js | 8 +-- .../src/components/visual-editor/index.js | 4 +- .../src/components/document-bar/index.js | 55 +++++++------------ .../editor/src/components/provider/index.js | 15 +---- .../src/hooks/pattern-partial-syncing.js | 6 +- 9 files changed, 49 insertions(+), 101 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 9ea3c4dd8cf49..b78d49e9c8524 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -28,7 +28,6 @@ import { BlockControls, } from '@wordpress/block-editor'; import { getBlockSupport, parse } from '@wordpress/blocks'; -import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; /** * Internal dependencies @@ -143,18 +142,8 @@ function setBlockEditMode( setEditMode, blocks ) { } ); } -function editSourcePattern( editInPatternOnlyMode, patternId ) { - const currentArgs = getQueryArgs( window.location.href ); - const currentUrlWithoutArgs = removeQueryArgs( - window.location.href, - ...Object.keys( currentArgs ) - ); - const newUrl = addQueryArgs( currentUrlWithoutArgs, { - ...currentArgs, - patternId, - } ); - window.history.pushState( null, '', newUrl ); - editInPatternOnlyMode(); +function editSourcePattern( setEditedPost, patternId ) { + setEditedPost( 'wp_block', patternId ); } export default function ReusableBlockEdit( { @@ -163,7 +152,7 @@ export default function ReusableBlockEdit( { __unstableParentLayout: parentLayout, clientId: patternClientId, setAttributes, - editInPatternOnlyMode, + setEditedPost, } ) { const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); @@ -312,12 +301,12 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && editInPatternOnlyMode && ( + { userCanEdit && ( - editSourcePattern( editInPatternOnlyMode, ref ) + editSourcePattern( setEditedPost, ref ) } > { __( 'Edit original' ) } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index ba90d6e47d1b3..59421e7b90b26 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -67,7 +67,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { isEditingTemplate, isPublishSidebarOpened, showIconLabels, - isEditingPattern, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); @@ -78,7 +77,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), isEditingTemplate: renderingMode === 'template-only', - isEditingPattern: renderingMode === 'pattern-only', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ), @@ -123,8 +121,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { 'selected-block-tools-wrapper', { 'is-collapsed': - ( isEditingTemplate || - isEditingPattern ) && + isEditingTemplate && isBlockToolsCollapsed, } ) } @@ -163,9 +160,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { ( isEditingTemplate || isEditingPattern ) && ( - - ) } + { isEditingTemplate && }
( { @@ -47,15 +47,14 @@ function ModeSwitcher() { select( editorStore ).getEditorSettings().codeEditingEnabled, isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', - isEditingPattern: - select( editorStore ).getRenderingMode() === 'pattern-only', + mode: select( editPostStore ).getEditorMode(), } ), [] ); const { switchEditorMode } = useDispatch( editPostStore ); - if ( isEditingTemplate || isEditingPattern ) { + if ( isEditingTemplate ) { return null; } diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index 3ce177b5624a2..5be9d92cdf9a8 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -15,27 +15,20 @@ import { sidebars } from '../settings-sidebar'; const { Tabs } = unlock( componentsPrivateApis ); const SettingsHeader = () => { - const { documentLabel, isTemplateMode, isPatternMode } = useSelect( - ( select ) => { - const { getPostTypeLabel, getRenderingMode } = - select( editorStore ); - const renderingMode = getRenderingMode(); - return { - // translators: Default label for the Document sidebar tab, not selected. - documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), - isTemplateMode: renderingMode === 'template-only', - isPatternMode: renderingMode === 'pattern-only', - }; - }, - [] - ); + const { documentLabel, isTemplateMode } = useSelect( ( select ) => { + const { getPostTypeLabel, getRenderingMode } = select( editorStore ); + return { + // translators: Default label for the Document sidebar tab, not selected. + documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), + isTemplateMode: getRenderingMode() === 'template-only', + }; + }, [] ); return ( { isTemplateMode && __( 'Template' ) } - { isPatternMode && __( 'Pattern' ) } - { ! isTemplateMode && ! isPatternMode && documentLabel } + { ! isTemplateMode && documentLabel } { /* translators: Text label for the Block Settings Sidebar tab. */ } diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index ef31a7ce7dc91..e03528958bc10 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -107,7 +107,6 @@ const SettingsSidebar = () => { isSettingsSidebarActive, keyboardShortcut, isTemplateMode, - isPatternMode, } = useSelect( ( select ) => { // The settings sidebar is used by the edit-post/document and edit-post/block sidebars. // sidebarName represents the sidebar that is active or that should be active when the SettingsSidebar toggle button is pressed. @@ -130,13 +129,13 @@ const SettingsSidebar = () => { const shortcut = select( keyboardShortcutsStore ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ); - const renderingMode = select( editorStore ).getRenderingMode(); + return { sidebarName: sidebar, isSettingsSidebarActive: isSettingsSidebar, keyboardShortcut: shortcut, - isTemplateMode: renderingMode === 'template-only', - isPatternMode: renderingMode === 'pattern-only', + isTemplateMode: + select( editorStore ).getRenderingMode() === 'template-only', }; }, [] ); @@ -165,7 +164,6 @@ const SettingsSidebar = () => { sidebarName={ sidebarName } keyboardShortcut={ keyboardShortcut } isTemplateMode={ isTemplateMode } - isPatternMode={ isPatternMode } /> ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 002e51e42c078..fd9b4a6ff8bb6 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -74,14 +74,12 @@ export default function VisualEditor( { styles } ) { const isToBeIframed = ( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) && ! hasMetaBoxes ) || - renderingMode === 'template-only' || - renderingMode === 'pattern-only'; + renderingMode === 'template-only'; return (
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 8556bc5b4d114..deaa59da7d1df 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -59,38 +59,27 @@ export default function DocumentBar() { templateId, postType, postId, - isEditingPattern, + dirtyEntityRecords, - } = useSelect( - ( select ) => { - const { - getRenderingMode, - getCurrentTemplateId, - getCurrentPostId, - getCurrentPostType, - } = select( editorStore ); - const { __experimentalGetDirtyEntityRecords } = - select( coreDataStore ); - const _templateId = getCurrentTemplateId(); - const renderingMode = getRenderingMode(); - return { - isEditingTemplate: - !! _templateId && renderingMode === 'template-only', - isEditingPattern: renderingMode === 'pattern-only', - templateId: _templateId, - postType: - renderingMode !== 'pattern-only' - ? getCurrentPostType() - : 'wp_block', - postId: - renderingMode !== 'pattern-only' - ? getCurrentPostId() - : patternId, - dirtyEntityRecords: __experimentalGetDirtyEntityRecords(), - }; - }, - [ patternId ] - ); + } = useSelect( ( select ) => { + const { + getRenderingMode, + getCurrentTemplateId, + getCurrentPostId, + getCurrentPostType, + } = select( editorStore ); + const { __experimentalGetDirtyEntityRecords } = select( coreDataStore ); + const _templateId = getCurrentTemplateId(); + + return { + isEditingTemplate: + !! _templateId && getRenderingMode() === 'template-only', + templateId: _templateId, + postType: getCurrentPostType(), + postId: getCurrentPostId(), + dirtyEntityRecords: __experimentalGetDirtyEntityRecords(), + }; + }, [] ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); const { createWarningNotice } = useDispatch( noticesStore ); @@ -117,9 +106,7 @@ export default function DocumentBar() { ); } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 69581043eff9f..021910489ed2e 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -13,7 +13,6 @@ import { import { store as noticesStore } from '@wordpress/notices'; import { privateApis as editPatternsPrivateApis } from '@wordpress/patterns'; import { createBlock } from '@wordpress/blocks'; -import { getQueryArg } from '@wordpress/url'; /** * Internal dependencies @@ -41,9 +40,7 @@ const noop = () => {}; */ function useBlockEditorProps( post, template, mode ) { const rootLevelPost = - mode === 'post-only' || mode === 'pattern-only' || ! template - ? 'post' - : 'template'; + mode === 'post-only' || ! template ? 'post' : 'template'; const [ postBlocks, onInput, onChange ] = useEntityBlockEditor( 'postType', post.type, @@ -112,8 +109,7 @@ export const ExperimentalEditorProvider = withRegistryProvider( ( select ) => select( editorStore ).getRenderingMode(), [] ); - const shouldRenderTemplate = - !! template && mode !== 'post-only' && mode !== 'pattern-only'; + const shouldRenderTemplate = !! template && mode !== 'post-only'; const rootLevelPost = shouldRenderTemplate ? template : post; const defaultBlockContext = useMemo( () => { const postContext = @@ -159,13 +155,8 @@ export const ExperimentalEditorProvider = withRegistryProvider( id ); - const patternId = getQueryArg( window.location.href, 'patternId' ); - const postData = - mode !== 'pattern-only' - ? post - : { id: patternId, type: 'wp_block' }; const [ blocks, onInput, onChange ] = useBlockEditorProps( - postData, + post, template, mode ); diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index 2b8c3e3e7da32..4ae019f15b159 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -77,12 +77,10 @@ const withPatternOnlyRenderMode = createHigherOrderComponent( if ( props.name !== 'core/block' ) { return ; } - - const { setRenderingMode } = useDispatch( editorStore ); - + const { setEditedPost } = useDispatch( editorStore ); const newProps = { ...props, - editInPatternOnlyMode: () => setRenderingMode( 'pattern-only' ), + setEditedPost, }; return ; } From 76904b99588743022319c28a33cc01193ff2dbd0 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 10:58:07 +1300 Subject: [PATCH 07/32] Revert more pattern-only mode code --- .../components/header/mode-switcher/index.js | 2 - .../sidebar/settings-header/index.js | 4 +- .../sidebar/settings-sidebar/index.js | 4 +- .../src/components/visual-editor/style.scss | 4 - .../src/components/document-bar/index.js | 79 +++++++------------ .../editor/src/components/provider/index.js | 1 - 6 files changed, 30 insertions(+), 64 deletions(-) diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 50a95900089ee..34521bba19e96 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -34,7 +34,6 @@ function ModeSwitcher() { isRichEditingEnabled, isCodeEditingEnabled, isEditingTemplate, - mode, } = useSelect( ( select ) => ( { @@ -47,7 +46,6 @@ function ModeSwitcher() { select( editorStore ).getEditorSettings().codeEditingEnabled, isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', - mode: select( editPostStore ).getEditorMode(), } ), [] diff --git a/packages/edit-post/src/components/sidebar/settings-header/index.js b/packages/edit-post/src/components/sidebar/settings-header/index.js index 5be9d92cdf9a8..368bd3e9e50db 100644 --- a/packages/edit-post/src/components/sidebar/settings-header/index.js +++ b/packages/edit-post/src/components/sidebar/settings-header/index.js @@ -17,6 +17,7 @@ const { Tabs } = unlock( componentsPrivateApis ); const SettingsHeader = () => { const { documentLabel, isTemplateMode } = useSelect( ( select ) => { const { getPostTypeLabel, getRenderingMode } = select( editorStore ); + return { // translators: Default label for the Document sidebar tab, not selected. documentLabel: getPostTypeLabel() || _x( 'Document', 'noun' ), @@ -27,8 +28,7 @@ const SettingsHeader = () => { return ( - { isTemplateMode && __( 'Template' ) } - { ! isTemplateMode && documentLabel } + { isTemplateMode ? __( 'Template' ) : documentLabel } { /* translators: Text label for the Block Settings Sidebar tab. */ } diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js index e03528958bc10..0cd69cb11538c 100644 --- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js +++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js @@ -49,7 +49,6 @@ const SidebarContent = ( { sidebarName, keyboardShortcut, isTemplateMode, - isPatternMode, } ) => { // Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we // need to forward the `Tabs` context so it can be passed through the @@ -78,7 +77,7 @@ const SidebarContent = ( { > - { ! isTemplateMode && ! isPatternMode && ( + { ! isTemplateMode && ( <> @@ -129,7 +128,6 @@ const SettingsSidebar = () => { const shortcut = select( keyboardShortcutsStore ).getShortcutRepresentation( 'core/edit-post/toggle-sidebar' ); - return { sidebarName: sidebar, isSettingsSidebarActive: isSettingsSidebar, diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 94b0d42ad6042..46838c97f8799 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -36,10 +36,6 @@ // as align-items: stretch is inherited by default.Additionally due to older browser's flex height // interpretation, any percentage value is likely going to cause issues, such as metaboxes overlapping. // See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property. - - &.is-pattern-mode { - padding: 48px 48px 0; - } } .edit-post-visual-editor__content-area { diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index deaa59da7d1df..da43533bfa5bc 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -22,11 +22,9 @@ import { symbol, } from '@wordpress/icons'; import { displayShortcut } from '@wordpress/keycodes'; -import { useEntityRecord, store as coreDataStore } from '@wordpress/core-data'; +import { useEntityRecord } from '@wordpress/core-data'; import { store as commandsStore } from '@wordpress/commands'; import { useState, useEffect, useRef } from '@wordpress/element'; -import { getQueryArg } from '@wordpress/url'; -import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -50,63 +48,40 @@ const icons = { }; export default function DocumentBar() { - const patternId = parseInt( - getQueryArg( window.location.href, 'patternId' ) + const { isEditingTemplate, templateId, postType, postId } = useSelect( + ( select ) => { + const { + getRenderingMode, + getCurrentTemplateId, + getCurrentPostId, + getCurrentPostType, + } = select( editorStore ); + const _templateId = getCurrentTemplateId(); + return { + isEditingTemplate: + !! _templateId && getRenderingMode() === 'template-only', + templateId: _templateId, + postType: getCurrentPostType(), + postId: getCurrentPostId(), + }; + }, + [] ); - - const { - isEditingTemplate, - templateId, - postType, - postId, - - dirtyEntityRecords, - } = useSelect( ( select ) => { - const { - getRenderingMode, - getCurrentTemplateId, - getCurrentPostId, - getCurrentPostType, - } = select( editorStore ); - const { __experimentalGetDirtyEntityRecords } = select( coreDataStore ); - const _templateId = getCurrentTemplateId(); - - return { - isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', - templateId: _templateId, - postType: getCurrentPostType(), - postId: getCurrentPostId(), - dirtyEntityRecords: __experimentalGetDirtyEntityRecords(), - }; - }, [] ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); - const { createWarningNotice } = useDispatch( noticesStore ); - - function handleOnBack() { - if ( - patternId && - dirtyEntityRecords.length > 0 && - dirtyEntityRecords.find( ( record ) => record.key === patternId ) - ) { - createWarningNotice( - __( - 'Your pattern changes will not show in the post until they are saved' - ), - { - type: 'snackbar', - } - ); - } - setRenderingMode( getEditorSettings().defaultRenderingMode ); - } return ( + setRenderingMode( + getEditorSettings().defaultRenderingMode + ) + : undefined + } /> ); } diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 021910489ed2e..fc49339c2c13f 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -154,7 +154,6 @@ export const ExperimentalEditorProvider = withRegistryProvider( type, id ); - const [ blocks, onInput, onChange ] = useBlockEditorProps( post, template, From 4bb23e78e1d501971717718f756f633c26f3f0cd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 11:01:35 +1300 Subject: [PATCH 08/32] Another revert --- packages/edit-post/src/components/header/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 59421e7b90b26..79229175185cd 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -70,13 +70,14 @@ function Header( { setEntitiesSavedStatesCallback } ) { } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); - const renderingMode = select( editorStore ).getRenderingMode(); + return { isTextEditor: getEditorMode() === 'text', hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - isEditingTemplate: renderingMode === 'template-only', + isEditingTemplate: + select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: select( editPostStore ).isPublishSidebarOpened(), hasFixedToolbar: getPreference( 'core/edit-post', 'fixedToolbar' ), From 501e5d5d4dd6ba171627a832bb9b787f6a229c62 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 16:58:55 +1300 Subject: [PATCH 09/32] Add basic routing to post editor --- packages/block-library/src/block/edit.js | 14 +---- packages/edit-post/package.json | 1 + .../use-init-edited-entity-from-url.js | 16 ++++++ packages/edit-post/src/editor.js | 5 +- packages/edit-post/src/index.js | 16 ++++-- packages/editor/package.json | 1 + packages/editor/src/components/routes/link.js | 55 +++++++++++++++++++ .../src/hooks/pattern-partial-syncing.js | 17 ++++-- 8 files changed, 101 insertions(+), 24 deletions(-) create mode 100644 packages/edit-post/src/components/sync-state-with-url/use-init-edited-entity-from-url.js create mode 100644 packages/editor/src/components/routes/link.js diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index b78d49e9c8524..2b2ed48d30fea 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -142,17 +142,13 @@ function setBlockEditMode( setEditMode, blocks ) { } ); } -function editSourcePattern( setEditedPost, patternId ) { - setEditedPost( 'wp_block', patternId ); -} - export default function ReusableBlockEdit( { name, attributes: { ref, overrides }, __unstableParentLayout: parentLayout, clientId: patternClientId, setAttributes, - setEditedPost, + editOriginalPattern, } ) { const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); @@ -301,14 +297,10 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && ( + { userCanEdit && editOriginalPattern && ( - - editSourcePattern( setEditedPost, ref ) - } - > + { __( 'Edit original' ) } diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 1b3b107a83413..2d783a5a500aa 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -53,6 +53,7 @@ "@wordpress/plugins": "file:../plugins", "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", + "@wordpress/router": "file:../router", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", "@wordpress/warning": "file:../warning", diff --git a/packages/edit-post/src/components/sync-state-with-url/use-init-edited-entity-from-url.js b/packages/edit-post/src/components/sync-state-with-url/use-init-edited-entity-from-url.js new file mode 100644 index 0000000000000..f32f96eb90370 --- /dev/null +++ b/packages/edit-post/src/components/sync-state-with-url/use-init-edited-entity-from-url.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useLocation } = unlock( routerPrivateApis ); + +export default function useInitEditedEntityFromURL() { + const { params = {} } = useLocation(); + return { postId: params.post, postType: params.postType }; +} diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index aa9a4dd42b83b..372abcbb84974 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -23,11 +23,12 @@ import Layout from './components/layout'; import EditorInitialization from './components/editor-initialization'; import { store as editPostStore } from './store'; import { unlock } from './lock-unlock'; - +import useInitEditedEntityFromURL from './components/sync-state-with-url/use-init-edited-entity-from-url'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); -function Editor( { postId, postType, settings, initialEdits, ...props } ) { +function Editor( { settings, initialEdits, ...props } ) { const isLargeViewport = useViewportMatch( 'medium' ); + const { postId, postType = 'post' } = useInitEditedEntityFromURL(); const { hasFixedToolbar, diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 0d52a9f8ed512..0d85c2930dfab 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -19,6 +19,7 @@ import { privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies @@ -31,6 +32,7 @@ import { unlock } from './lock-unlock'; const { PluginPostExcerpt: __experimentalPluginPostExcerpt } = unlock( editorPrivateApis ); +const { RouterProvider } = unlock( routerPrivateApis ); /** * Initializes and returns an instance of Editor. @@ -187,12 +189,14 @@ export function initializeEditor( window.addEventListener( 'drop', ( e ) => e.preventDefault(), false ); root.render( - + + + ); return root; diff --git a/packages/editor/package.json b/packages/editor/package.json index 63656899e587c..435ae6e20678f 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -58,6 +58,7 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/reusable-blocks": "file:../reusable-blocks", "@wordpress/rich-text": "file:../rich-text", + "@wordpress/router": "file:../router", "@wordpress/server-side-render": "file:../server-side-render", "@wordpress/url": "file:../url", "@wordpress/wordcount": "file:../wordcount", diff --git a/packages/editor/src/components/routes/link.js b/packages/editor/src/components/routes/link.js new file mode 100644 index 0000000000000..7763e1a6c1164 --- /dev/null +++ b/packages/editor/src/components/routes/link.js @@ -0,0 +1,55 @@ +/** + * WordPress dependencies + */ +import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useHistory } = unlock( routerPrivateApis ); + +export function useLink( params = {}, state, shouldReplace = false ) { + const history = useHistory(); + + function onClick( event ) { + event.preventDefault(); + + if ( shouldReplace ) { + history.replace( params, state ); + } else { + history.push( params, state ); + } + } + + const currentArgs = getQueryArgs( window.location.href ); + const currentUrlWithoutArgs = removeQueryArgs( + window.location.href, + ...Object.keys( currentArgs ) + ); + + const newUrl = addQueryArgs( currentUrlWithoutArgs, params ); + + return { + href: newUrl, + onClick, + }; +} + +export default function Link( { + params = {}, + state, + replace: shouldReplace = false, + children, + ...props +} ) { + const { href, onClick } = useLink( params, state, shouldReplace ); + + return ( + + { children } + + ); +} diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index 4ae019f15b159..ba9164c2f673d 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -6,12 +6,13 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; import { createHigherOrderComponent } from '@wordpress/compose'; import { useBlockEditingMode } from '@wordpress/block-editor'; import { hasBlockSupport } from '@wordpress/blocks'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import { store as editorStore } from '../store'; +import { useLink } from '../components/routes/link'; import { unlock } from '../lock-unlock'; const { @@ -65,7 +66,7 @@ const withPartialSyncingControls = createHigherOrderComponent( ); /** - * Adds an editInPatternOnlyMode prop which allows the block to switch between post and pattern + * Adds an editOriginalPattern prop which allows the block to switch between post and pattern * editing modes. * * @param {Component} BlockEdit Original component. @@ -77,11 +78,17 @@ const withPatternOnlyRenderMode = createHigherOrderComponent( if ( props.name !== 'core/block' ) { return ; } - const { setEditedPost } = useDispatch( editorStore ); + + const { onClick } = useLink( { + post: props.attributes?.ref, + postType: 'wp_block', + } ); + const newProps = { ...props, - setEditedPost, + editOriginalPattern: onClick, }; + return ; } ); @@ -94,7 +101,7 @@ if ( window.__experimentalPatternPartialSyncing ) { ); addFilter( 'editor.BlockEdit', - 'core/editor/with-pattern-only-render-mode', + 'core/editor/with-pattern-edit-original-mode', withPatternOnlyRenderMode ); } From d57e06b9d3c136d888b8403c53cf790ea6ec59c7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 15:20:20 +1300 Subject: [PATCH 10/32] Add document bar and padding --- .../edit-post/src/components/header/index.js | 9 ++++++++- .../use-init-edited-entity-from-url.js | 3 ++- .../src/components/visual-editor/index.js | 8 +++++++- .../src/components/visual-editor/style.scss | 3 +++ .../editor/src/components/document-bar/index.js | 17 +++++++++++------ .../editor/src/hooks/pattern-partial-syncing.js | 3 ++- .../editor/src/utils/editor-interface-config.js | 7 +++++++ packages/editor/src/utils/index.js | 1 + 8 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 packages/editor/src/utils/editor-interface-config.js diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 79229175185cd..889b611a7421d 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -16,6 +16,7 @@ import { store as editorStore, DocumentBar, privateApis as editorPrivateApis, + POST_TYPE_EDITOR_INTERFACE, } from '@wordpress/editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; @@ -67,6 +68,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isEditingTemplate, isPublishSidebarOpened, showIconLabels, + postType, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); @@ -76,6 +78,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), + postType: select( editorStore ).getEditedPostAttribute( 'type' ), isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: @@ -86,6 +89,8 @@ function Header( { setEntitiesSavedStatesCallback } ) { }; }, [] ); + const hasDocumentBar = + POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasDocumentBar; const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = useState( true ); @@ -161,7 +166,9 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { isEditingTemplate && } + { ( isEditingTemplate || hasDocumentBar ) && ( + + ) }
{ const { isFeatureActive } = select( editPostStore ); - const { getEditorSettings, getRenderingMode } = select( editorStore ); + const { getEditorSettings, getRenderingMode, getEditedPostAttribute } = + select( editorStore ); const { getBlockTypes } = select( blocksStore ); const editorSettings = getEditorSettings(); @@ -43,6 +46,7 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), + postType: getEditedPostAttribute( 'type' ), }; }, [] ); const hasMetaBoxes = useSelect( @@ -50,6 +54,7 @@ export default function VisualEditor( { styles } ) { [] ); + const hasSurround = POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasSurround; let paddingBottom; // Add a constant padding for the typewritter effect. When typing at the @@ -81,6 +86,7 @@ export default function VisualEditor( { styles } ) { className={ classnames( 'edit-post-visual-editor', { 'is-template-mode': renderingMode === 'template-only', 'has-inline-canvas': ! isToBeIframed, + 'has-surround': hasSurround, } ) } > { + if ( isEditingTemplate ) { + setRenderingMode( getEditorSettings().defaultRenderingMode ); + return; + } + window.history.back(); + }; return ( - setRenderingMode( - getEditorSettings().defaultRenderingMode - ) - : undefined + isEditingTemplate || hasBackLink ? handleOnBack : undefined } /> ); diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index ba9164c2f673d..f6fae2eedadae 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -80,8 +80,9 @@ const withPatternOnlyRenderMode = createHigherOrderComponent( } const { onClick } = useLink( { - post: props.attributes?.ref, + postId: props.attributes?.ref, postType: 'wp_block', + canvas: 'edit', } ); const newProps = { diff --git a/packages/editor/src/utils/editor-interface-config.js b/packages/editor/src/utils/editor-interface-config.js new file mode 100644 index 0000000000000..c44fb43119b22 --- /dev/null +++ b/packages/editor/src/utils/editor-interface-config.js @@ -0,0 +1,7 @@ +export const POST_TYPE_EDITOR_INTERFACE = { + wp_block: { + hasDocumentBar: true, + hasBackLink: true, + hasSurround: true, + }, +}; diff --git a/packages/editor/src/utils/index.js b/packages/editor/src/utils/index.js index d85892a57bd0a..d51f31a443707 100644 --- a/packages/editor/src/utils/index.js +++ b/packages/editor/src/utils/index.js @@ -6,3 +6,4 @@ import mediaUpload from './media-upload'; export { mediaUpload }; export { cleanForSlug } from './url.js'; export { getTemplatePartIcon } from './get-template-part-icon'; +export { POST_TYPE_EDITOR_INTERFACE } from './editor-interface-config'; From de518fab239b41f1d9d1fd057e8a2142e48ae7ae Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 15:36:31 +1300 Subject: [PATCH 11/32] Fix initialisation of post id and post type --- packages/edit-post/src/editor.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 372abcbb84974..78a8cca1ad050 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -26,10 +26,19 @@ import { unlock } from './lock-unlock'; import useInitEditedEntityFromURL from './components/sync-state-with-url/use-init-edited-entity-from-url'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); -function Editor( { settings, initialEdits, ...props } ) { +function Editor( { + postId: postIdInit, + postType: postTypeInit, + settings, + initialEdits, + ...props +} ) { const isLargeViewport = useViewportMatch( 'medium' ); - const { postId, postType = 'post' } = useInitEditedEntityFromURL(); + const { postId: postIdUrl, postType: postTypeUrl } = + useInitEditedEntityFromURL(); + const postId = postIdUrl || postIdInit; + const postType = postTypeUrl || postTypeInit; const { hasFixedToolbar, focusMode, From 5a2a0e7b24fc84ca66224bce4c2b18a813bdb667 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 15:58:20 +1300 Subject: [PATCH 12/32] Only show header bar and padding if edit mode is set to focused --- packages/edit-post/src/components/browser-url/index.js | 5 ++++- packages/edit-post/src/components/header/index.js | 4 +++- packages/edit-post/src/components/visual-editor/index.js | 7 +++++-- packages/editor/src/hooks/pattern-partial-syncing.js | 1 + 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js index 798753cfea357..4939caa55852b 100644 --- a/packages/edit-post/src/components/browser-url/index.js +++ b/packages/edit-post/src/components/browser-url/index.js @@ -3,7 +3,7 @@ */ import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; -import { addQueryArgs } from '@wordpress/url'; +import { addQueryArgs, getQueryArg } from '@wordpress/url'; import { store as editorStore } from '@wordpress/editor'; /** @@ -82,6 +82,9 @@ export class BrowserURL extends Component { * @param {number} postId Post ID for which to generate post editor URL. */ setBrowserURL( postId ) { + if ( getQueryArg( window.location.href, 'editMode' ) ) { + return; + } window.history.replaceState( { id: postId }, 'Post ' + postId, diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 889b611a7421d..295cfdaed5ffe 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -30,6 +30,7 @@ import { Popover, } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; +import { getQueryArg } from '@wordpress/url'; /** * Internal dependencies @@ -90,7 +91,8 @@ function Header( { setEntitiesSavedStatesCallback } ) { }, [] ); const hasDocumentBar = - POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasDocumentBar; + POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasDocumentBar && + getQueryArg( window.location.href, 'editMode' ) === 'focused'; const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = useState( true ); diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 937838308125d..fe92c1c43d309 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -14,7 +14,7 @@ import { import { useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as blocksStore } from '@wordpress/blocks'; - +import { getQueryArg } from '@wordpress/url'; /** * Internal dependencies */ @@ -54,7 +54,10 @@ export default function VisualEditor( { styles } ) { [] ); - const hasSurround = POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasSurround; + const hasSurround = + POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasSurround && + getQueryArg( window.location.href, 'editMode' ) === 'focused'; + let paddingBottom; // Add a constant padding for the typewritter effect. When typing at the diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index f6fae2eedadae..97e2120034277 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -83,6 +83,7 @@ const withPatternOnlyRenderMode = createHigherOrderComponent( postId: props.attributes?.ref, postType: 'wp_block', canvas: 'edit', + editMode: 'focused', } ); const newProps = { From e55a16327d2ac04c89bdab6ad0996fefce7bedd3 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 18 Dec 2023 16:11:05 +1300 Subject: [PATCH 13/32] refine check for edit mode --- packages/edit-post/src/components/browser-url/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js index 4939caa55852b..7e6a5eca2df37 100644 --- a/packages/edit-post/src/components/browser-url/index.js +++ b/packages/edit-post/src/components/browser-url/index.js @@ -82,7 +82,7 @@ export class BrowserURL extends Component { * @param {number} postId Post ID for which to generate post editor URL. */ setBrowserURL( postId ) { - if ( getQueryArg( window.location.href, 'editMode' ) ) { + if ( getQueryArg( window.location.href, 'editMode' ) === 'focused' ) { return; } window.history.replaceState( From 4fb62733bb4eef55850ae19629b4b4e9e60e4d15 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Dec 2023 13:17:57 +1300 Subject: [PATCH 14/32] Remove routing --- packages/edit-post/package.json | 1 - .../src/components/browser-url/index.js | 5 +- .../edit-post/src/components/header/index.js | 11 +--- .../use-init-edited-entity-from-url.js | 17 ------ .../src/components/visual-editor/index.js | 13 +---- .../src/components/visual-editor/style.scss | 3 - packages/edit-post/src/editor.js | 14 +---- packages/edit-post/src/index.js | 17 ++---- packages/editor/package.json | 1 - .../src/components/document-bar/index.js | 6 +- packages/editor/src/components/routes/link.js | 55 ------------------- .../src/hooks/pattern-partial-syncing.js | 7 +-- .../src/utils/editor-interface-config.js | 7 --- packages/editor/src/utils/index.js | 1 - 14 files changed, 17 insertions(+), 141 deletions(-) delete mode 100644 packages/edit-post/src/components/sync-state-with-url/use-init-edited-entity-from-url.js delete mode 100644 packages/editor/src/components/routes/link.js delete mode 100644 packages/editor/src/utils/editor-interface-config.js diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json index 2d783a5a500aa..1b3b107a83413 100644 --- a/packages/edit-post/package.json +++ b/packages/edit-post/package.json @@ -53,7 +53,6 @@ "@wordpress/plugins": "file:../plugins", "@wordpress/preferences": "file:../preferences", "@wordpress/private-apis": "file:../private-apis", - "@wordpress/router": "file:../router", "@wordpress/url": "file:../url", "@wordpress/viewport": "file:../viewport", "@wordpress/warning": "file:../warning", diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js index 7e6a5eca2df37..798753cfea357 100644 --- a/packages/edit-post/src/components/browser-url/index.js +++ b/packages/edit-post/src/components/browser-url/index.js @@ -3,7 +3,7 @@ */ import { Component } from '@wordpress/element'; import { withSelect } from '@wordpress/data'; -import { addQueryArgs, getQueryArg } from '@wordpress/url'; +import { addQueryArgs } from '@wordpress/url'; import { store as editorStore } from '@wordpress/editor'; /** @@ -82,9 +82,6 @@ export class BrowserURL extends Component { * @param {number} postId Post ID for which to generate post editor URL. */ setBrowserURL( postId ) { - if ( getQueryArg( window.location.href, 'editMode' ) === 'focused' ) { - return; - } window.history.replaceState( { id: postId }, 'Post ' + postId, diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 295cfdaed5ffe..a9ccf64505058 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -16,7 +16,6 @@ import { store as editorStore, DocumentBar, privateApis as editorPrivateApis, - POST_TYPE_EDITOR_INTERFACE, } from '@wordpress/editor'; import { useEffect, useRef, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; @@ -69,7 +68,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { isEditingTemplate, isPublishSidebarOpened, showIconLabels, - postType, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); @@ -79,7 +77,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - postType: select( editorStore ).getEditedPostAttribute( 'type' ), + isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: @@ -90,9 +88,6 @@ function Header( { setEntitiesSavedStatesCallback } ) { }; }, [] ); - const hasDocumentBar = - POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasDocumentBar && - getQueryArg( window.location.href, 'editMode' ) === 'focused'; const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] = useState( true ); @@ -168,9 +163,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { ( isEditingTemplate || hasDocumentBar ) && ( - - ) } + { isEditingTemplate && }
{ const { isFeatureActive } = select( editPostStore ); - const { getEditorSettings, getRenderingMode, getEditedPostAttribute } = - select( editorStore ); + const { getEditorSettings, getRenderingMode } = select( editorStore ); const { getBlockTypes } = select( blocksStore ); const editorSettings = getEditorSettings(); @@ -46,7 +43,6 @@ export default function VisualEditor( { styles } ) { hasV3BlocksOnly: getBlockTypes().every( ( type ) => { return type.apiVersion >= 3; } ), - postType: getEditedPostAttribute( 'type' ), }; }, [] ); const hasMetaBoxes = useSelect( @@ -54,10 +50,6 @@ export default function VisualEditor( { styles } ) { [] ); - const hasSurround = - POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasSurround && - getQueryArg( window.location.href, 'editMode' ) === 'focused'; - let paddingBottom; // Add a constant padding for the typewritter effect. When typing at the @@ -89,7 +81,6 @@ export default function VisualEditor( { styles } ) { className={ classnames( 'edit-post-visual-editor', { 'is-template-mode': renderingMode === 'template-only', 'has-inline-canvas': ! isToBeIframed, - 'has-surround': hasSurround, } ) } > e.preventDefault(), false ); root.render( - - - + ); return root; diff --git a/packages/editor/package.json b/packages/editor/package.json index 435ae6e20678f..63656899e587c 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -58,7 +58,6 @@ "@wordpress/private-apis": "file:../private-apis", "@wordpress/reusable-blocks": "file:../reusable-blocks", "@wordpress/rich-text": "file:../rich-text", - "@wordpress/router": "file:../router", "@wordpress/server-side-render": "file:../server-side-render", "@wordpress/url": "file:../url", "@wordpress/wordcount": "file:../wordcount", diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index b7cd874b2b38c..57d0b752eade5 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -30,7 +30,6 @@ import { useState, useEffect, useRef } from '@wordpress/element'; * Internal dependencies */ import { store as editorStore } from '../../store'; -import { POST_TYPE_EDITOR_INTERFACE } from '../../utils/editor-interface-config'; const typeLabels = { // translators: 1: Pattern title. @@ -70,7 +69,6 @@ export default function DocumentBar() { ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); - const hasBackLink = POST_TYPE_EDITOR_INTERFACE[ postType ]?.hasBackLink; const handleOnBack = () => { if ( isEditingTemplate ) { @@ -84,9 +82,7 @@ export default function DocumentBar() { ); } diff --git a/packages/editor/src/components/routes/link.js b/packages/editor/src/components/routes/link.js deleted file mode 100644 index 7763e1a6c1164..0000000000000 --- a/packages/editor/src/components/routes/link.js +++ /dev/null @@ -1,55 +0,0 @@ -/** - * WordPress dependencies - */ -import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; - -const { useHistory } = unlock( routerPrivateApis ); - -export function useLink( params = {}, state, shouldReplace = false ) { - const history = useHistory(); - - function onClick( event ) { - event.preventDefault(); - - if ( shouldReplace ) { - history.replace( params, state ); - } else { - history.push( params, state ); - } - } - - const currentArgs = getQueryArgs( window.location.href ); - const currentUrlWithoutArgs = removeQueryArgs( - window.location.href, - ...Object.keys( currentArgs ) - ); - - const newUrl = addQueryArgs( currentUrlWithoutArgs, params ); - - return { - href: newUrl, - onClick, - }; -} - -export default function Link( { - params = {}, - state, - replace: shouldReplace = false, - children, - ...props -} ) { - const { href, onClick } = useLink( params, state, shouldReplace ); - - return ( - - { children } - - ); -} diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index 97e2120034277..012d9594dfc48 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -12,7 +12,6 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import { store as editorStore } from '../store'; -import { useLink } from '../components/routes/link'; import { unlock } from '../lock-unlock'; const { @@ -79,11 +78,11 @@ const withPatternOnlyRenderMode = createHigherOrderComponent( return ; } - const { onClick } = useLink( { + const { + onClick, + } = () => ( { postId: props.attributes?.ref, postType: 'wp_block', - canvas: 'edit', - editMode: 'focused', } ); const newProps = { diff --git a/packages/editor/src/utils/editor-interface-config.js b/packages/editor/src/utils/editor-interface-config.js deleted file mode 100644 index c44fb43119b22..0000000000000 --- a/packages/editor/src/utils/editor-interface-config.js +++ /dev/null @@ -1,7 +0,0 @@ -export const POST_TYPE_EDITOR_INTERFACE = { - wp_block: { - hasDocumentBar: true, - hasBackLink: true, - hasSurround: true, - }, -}; diff --git a/packages/editor/src/utils/index.js b/packages/editor/src/utils/index.js index d51f31a443707..d85892a57bd0a 100644 --- a/packages/editor/src/utils/index.js +++ b/packages/editor/src/utils/index.js @@ -6,4 +6,3 @@ import mediaUpload from './media-upload'; export { mediaUpload }; export { cleanForSlug } from './url.js'; export { getTemplatePartIcon } from './get-template-part-icon'; -export { POST_TYPE_EDITOR_INTERFACE } from './editor-interface-config'; From 5fe18da6beb1e39e3ba39e39cb52697bdfa6ee68 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 15:51:09 +1300 Subject: [PATCH 15/32] Switch to a simple postHistory array for switching back from pattern editing --- packages/block-library/src/block/edit.js | 6 +- .../edit-post/src/components/header/index.js | 8 ++- packages/edit-post/src/editor.js | 72 +++++++++++++++---- .../src/components/document-bar/index.js | 56 +++++++++------ .../src/components/editor-canvas/index.js | 3 + .../src/components/editor-canvas/style.scss | 5 ++ .../src/hooks/pattern-partial-syncing.js | 15 ++-- packages/editor/src/style.scss | 1 + 8 files changed, 120 insertions(+), 46 deletions(-) create mode 100644 packages/editor/src/components/editor-canvas/style.scss diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 2b2ed48d30fea..baab00676cea9 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -300,7 +300,11 @@ export default function ReusableBlockEdit( { { userCanEdit && editOriginalPattern && ( - + + editOriginalPattern( ref, 'wp_block' ) + } + > { __( 'Edit original' ) } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index a9ccf64505058..4dc9edf7ab431 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -29,7 +29,6 @@ import { Popover, } from '@wordpress/components'; import { store as preferencesStore } from '@wordpress/preferences'; -import { getQueryArg } from '@wordpress/url'; /** * Internal dependencies @@ -68,6 +67,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isEditingTemplate, isPublishSidebarOpened, showIconLabels, + hasHistory, } = useSelect( ( select ) => { const { get: getPreference } = select( preferencesStore ); const { getEditorMode } = select( editPostStore ); @@ -77,7 +77,9 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - + hasHistory: + select( editorStore ).getEditorSettings().postHistory?.length > + 0, isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: @@ -163,7 +165,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isLargeViewport, } ) } > - { isEditingTemplate && } + { ( isEditingTemplate || hasHistory ) && } { + postHistory.unshift( currentPost ); + setCurrentPost( { postId, postType } ); + }, + [ currentPost ] + ); + + const goBack = () => { + const previousPost = postHistory.shift(); + setCurrentPost( { + postId: previousPost.postId ? previousPost.postId : initialPostId, + postType: previousPost.postType + ? previousPost.postType + : initialPostType, + } ); + }; const { hasFixedToolbar, @@ -52,22 +82,31 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { const { getEditorSettings } = select( editorStore ); const { getBlockTypes } = select( blocksStore ); const isTemplate = [ 'wp_template', 'wp_template_part' ].includes( - postType + currentPost.postType ); // Ideally the initializeEditor function should be called using the ID of the REST endpoint. // to avoid the special case. let postObject; if ( isTemplate ) { - const posts = getEntityRecords( 'postType', postType, { - wp_id: postId, - } ); + const posts = getEntityRecords( + 'postType', + currentPost.postType, + { + wp_id: currentPost.postId, + } + ); postObject = posts?.[ 0 ]; } else { - postObject = getEntityRecord( 'postType', postType, postId ); + postObject = getEntityRecord( + 'postType', + currentPost.postType, + currentPost.postId + ); } const supportsTemplateMode = getEditorSettings().supportsTemplateMode; - const isViewable = getPostType( postType )?.viewable ?? false; + const isViewable = + getPostType( currentPost.postType )?.viewable ?? false; const canEditTemplate = canUser( 'create', 'templates' ); return { hasFixedToolbar: @@ -89,7 +128,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { post: postObject, }; }, - [ postType, postId, isLargeViewport ] + [ currentPost.postType, currentPost.postId, isLargeViewport ] ); const { updatePreferredStyleVariations } = useDispatch( editPostStore ); @@ -97,6 +136,9 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { const editorSettings = useMemo( () => { const result = { ...settings, + onSelectPost, + goBack, + postHistory, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, @@ -130,15 +172,17 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { return result; }, [ settings, + onSelectPost, + goBack, + preferredStyleVariations, + updatePreferredStyleVariations, hasFixedToolbar, - hasInlineToolbar, focusMode, isDistractionFree, + hasInlineToolbar, + keepCaretInsideBlock, hiddenBlockTypes, blockTypes, - preferredStyleVariations, - updatePreferredStyleVariations, - keepCaretInsideBlock, ] ); if ( ! post ) { @@ -157,7 +201,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) { > - + diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 57d0b752eade5..75ba8d45611c0 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -48,25 +48,35 @@ const icons = { }; export default function DocumentBar() { - const { isEditingTemplate, templateId, postType, postId } = useSelect( - ( select ) => { - const { - getRenderingMode, - getCurrentTemplateId, - getCurrentPostId, - getCurrentPostType, - } = select( editorStore ); - const _templateId = getCurrentTemplateId(); - return { - isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', - templateId: _templateId, - postType: getCurrentPostType(), - postId: getCurrentPostId(), - }; - }, - [] - ); + const { + isEditingTemplate, + templateId, + postType, + postId, + hasHistory, + goBack, + } = useSelect( ( select ) => { + const { + getRenderingMode, + getCurrentTemplateId, + getCurrentPostId, + getCurrentPostType, + getEditorSettings, + } = select( editorStore ); + const _templateId = getCurrentTemplateId(); + const back = getEditorSettings().goBack; + return { + isEditingTemplate: + !! _templateId && getRenderingMode() === 'template-only', + templateId: _templateId, + postType: getCurrentPostType(), + postId: getCurrentPostId(), + hasHistory: + select( editorStore ).getEditorSettings().postHistory?.length > + 0, + goBack: typeof back === 'function' ? back : undefined, + }; + }, [] ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); @@ -75,6 +85,10 @@ export default function DocumentBar() { setRenderingMode( getEditorSettings().defaultRenderingMode ); return; } + if ( hasHistory && goBack ) { + goBack(); + return; + } window.history.back(); }; @@ -82,7 +96,9 @@ export default function DocumentBar() { ); } diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 6d4c51dc6a097..bafd874fa9c6f 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -91,6 +91,7 @@ function EditorCanvas( { wrapperBlockName, wrapperUniqueId, deviceType, + hasHistory, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -137,6 +138,7 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), + hasHistory: getEditorSettings().postHistory?.length > 0, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); @@ -299,6 +301,7 @@ function EditorCanvas( { styles={ styles } height="100%" iframeProps={ { + className: classnames( { 'has-history': hasHistory } ), ...iframeProps, style: { ...iframeProps?.style, diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss new file mode 100644 index 0000000000000..4f3d838184455 --- /dev/null +++ b/packages/editor/src/components/editor-canvas/style.scss @@ -0,0 +1,5 @@ +.edit-post-visual-editor { + .has-history { + padding: $grid-unit-60 $grid-unit-60 0; + } +} diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index 012d9594dfc48..cd74b317ca358 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -74,20 +74,19 @@ const withPartialSyncingControls = createHigherOrderComponent( */ const withPatternOnlyRenderMode = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { + const onSelectPost = useSelect( + ( select ) => + select( editorStore ).getEditorSettings().onSelectPost, + [] + ); if ( props.name !== 'core/block' ) { return ; } - const { - onClick, - } = () => ( { - postId: props.attributes?.ref, - postType: 'wp_block', - } ); - const newProps = { ...props, - editOriginalPattern: onClick, + editOriginalPattern: + typeof onSelectPost === 'function' ? onSelectPost : undefined, }; return ; diff --git a/packages/editor/src/style.scss b/packages/editor/src/style.scss index c699d13c55a07..a350da8bba1b7 100644 --- a/packages/editor/src/style.scss +++ b/packages/editor/src/style.scss @@ -27,3 +27,4 @@ @import "./components/preview-dropdown/style.scss"; @import "./components/table-of-contents/style.scss"; @import "./components/template-validation-notice/style.scss"; +@import "./components/editor-canvas/style.scss"; From 88e76a2bb777ab3ea473bad5e5a6e70cc70efd3c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Dec 2023 15:48:49 +1300 Subject: [PATCH 16/32] move postHistory to a ref --- packages/edit-post/src/editor.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 092f8e5b91c7f..646148698d26a 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -9,7 +9,7 @@ import { store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; -import { useMemo, useState, useCallback } from '@wordpress/element'; +import { useMemo, useState, useCallback, useRef } from '@wordpress/element'; import { SlotFillProvider } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -26,8 +26,6 @@ import { unlock } from './lock-unlock'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); -const postHistory = []; - function Editor( { postId: initialPostId, postType: initialPostType, @@ -36,6 +34,8 @@ function Editor( { ...props } ) { const isLargeViewport = useViewportMatch( 'medium' ); + + const postHistory = useRef( [] ); const [ currentPost, setCurrentPost ] = useState( { postId: initialPostId, postType: initialPostType, @@ -43,14 +43,14 @@ function Editor( { const onSelectPost = useCallback( ( postId, postType ) => { - postHistory.unshift( currentPost ); + postHistory.current.unshift( currentPost ); setCurrentPost( { postId, postType } ); }, [ currentPost ] ); const goBack = () => { - const previousPost = postHistory.shift(); + const previousPost = postHistory.current.shift(); setCurrentPost( { postId: previousPost.postId ? previousPost.postId : initialPostId, postType: previousPost.postType @@ -138,7 +138,7 @@ function Editor( { ...settings, onSelectPost, goBack, - postHistory, + postHistory: postHistory.current, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, From afb742b01f9ce52739685d915377ec8aef0ca15a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Dec 2023 17:23:59 +1300 Subject: [PATCH 17/32] Move history settings into hook --- .../edit-post/src/components/header/index.js | 4 +- packages/edit-post/src/editor.js | 30 ++-------- .../edit-post/src/hooks/use-post-history.js | 37 +++++++++++++ .../src/components/document-bar/index.js | 55 ++++++++----------- .../src/components/editor-canvas/index.js | 2 +- 5 files changed, 66 insertions(+), 62 deletions(-) create mode 100644 packages/edit-post/src/hooks/use-post-history.js diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 4dc9edf7ab431..1aba3738e9f40 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -77,9 +77,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { hasBlockSelection: !! select( blockEditorStore ).getBlockSelectionStart(), hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(), - hasHistory: - select( editorStore ).getEditorSettings().postHistory?.length > - 0, + hasHistory: !! select( editorStore ).getEditorSettings().goBack, isEditingTemplate: select( editorStore ).getRenderingMode() === 'template-only', isPublishSidebarOpened: diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 646148698d26a..d9b626199fba5 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -9,7 +9,7 @@ import { store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; -import { useMemo, useState, useCallback, useRef } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { SlotFillProvider } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { store as preferencesStore } from '@wordpress/preferences'; @@ -23,6 +23,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'; const { ExperimentalEditorProvider } = unlock( editorPrivateApis ); @@ -34,31 +35,11 @@ function Editor( { ...props } ) { const isLargeViewport = useViewportMatch( 'medium' ); - - const postHistory = useRef( [] ); - const [ currentPost, setCurrentPost ] = useState( { - postId: initialPostId, - postType: initialPostType, - } ); - - const onSelectPost = useCallback( - ( postId, postType ) => { - postHistory.current.unshift( currentPost ); - setCurrentPost( { postId, postType } ); - }, - [ currentPost ] + const { currentPost, onSelectPost, goBack } = usePostHistory( + initialPostId, + initialPostType ); - const goBack = () => { - const previousPost = postHistory.current.shift(); - setCurrentPost( { - postId: previousPost.postId ? previousPost.postId : initialPostId, - postType: previousPost.postType - ? previousPost.postType - : initialPostType, - } ); - }; - const { hasFixedToolbar, focusMode, @@ -138,7 +119,6 @@ function Editor( { ...settings, onSelectPost, goBack, - postHistory: postHistory.current, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js new file mode 100644 index 0000000000000..09bb9fa347577 --- /dev/null +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { useCallback, useRef, useState } from '@wordpress/element'; + +export default function usePostHistory( initialPostId, initialPostType ) { + const postHistory = useRef( [] ); + const [ currentPost, setCurrentPost ] = useState( { + postId: initialPostId, + postType: initialPostType, + } ); + + const onSelectPost = useCallback( + ( postId, postType ) => { + postHistory.current.unshift( currentPost ); + setCurrentPost( { postId, postType } ); + }, + [ currentPost ] + ); + + const goBack = + postHistory.current.length > 0 + ? () => { + const previousPost = postHistory.current.shift(); + setCurrentPost( { + postId: previousPost.postId + ? previousPost.postId + : initialPostId, + postType: previousPost.postType + ? previousPost.postType + : initialPostType, + } ); + } + : undefined; + + return { currentPost, onSelectPost, goBack }; +} diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 75ba8d45611c0..d3e5688001548 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -48,35 +48,26 @@ const icons = { }; export default function DocumentBar() { - const { - isEditingTemplate, - templateId, - postType, - postId, - hasHistory, - goBack, - } = useSelect( ( select ) => { - const { - getRenderingMode, - getCurrentTemplateId, - getCurrentPostId, - getCurrentPostType, - getEditorSettings, - } = select( editorStore ); - const _templateId = getCurrentTemplateId(); - const back = getEditorSettings().goBack; - return { - isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', - templateId: _templateId, - postType: getCurrentPostType(), - postId: getCurrentPostId(), - hasHistory: - select( editorStore ).getEditorSettings().postHistory?.length > - 0, - goBack: typeof back === 'function' ? back : undefined, - }; - }, [] ); + const { isEditingTemplate, templateId, postType, postId, goBack } = + useSelect( ( select ) => { + const { + getRenderingMode, + getCurrentTemplateId, + getCurrentPostId, + getCurrentPostType, + getEditorSettings, + } = select( editorStore ); + const _templateId = getCurrentTemplateId(); + const back = getEditorSettings().goBack; + return { + isEditingTemplate: + !! _templateId && getRenderingMode() === 'template-only', + templateId: _templateId, + postType: getCurrentPostType(), + postId: getCurrentPostId(), + goBack: typeof back === 'function' ? back : undefined, + }; + }, [] ); const { getEditorSettings } = useSelect( editorStore ); const { setRenderingMode } = useDispatch( editorStore ); @@ -85,7 +76,7 @@ export default function DocumentBar() { setRenderingMode( getEditorSettings().defaultRenderingMode ); return; } - if ( hasHistory && goBack ) { + if ( goBack ) { goBack(); return; } @@ -96,9 +87,7 @@ export default function DocumentBar() { ); } diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index bafd874fa9c6f..17750e6414b43 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -138,7 +138,7 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - hasHistory: getEditorSettings().postHistory?.length > 0, + hasHistory: !! getEditorSettings().goBack, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); From caa3349c311526b0c0f4215e22c0b22cb84809f7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 19 Dec 2023 18:04:48 +1300 Subject: [PATCH 18/32] refine history stack slightly --- .../edit-post/src/hooks/use-post-history.js | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index 09bb9fa347577..2fe0a63435b28 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -4,32 +4,24 @@ import { useCallback, useRef, useState } from '@wordpress/element'; export default function usePostHistory( initialPostId, initialPostType ) { - const postHistory = useRef( [] ); + const postHistory = useRef( [ + { postId: initialPostId, postType: initialPostType }, + ] ); const [ currentPost, setCurrentPost ] = useState( { postId: initialPostId, postType: initialPostType, } ); - const onSelectPost = useCallback( - ( postId, postType ) => { - postHistory.current.unshift( currentPost ); - setCurrentPost( { postId, postType } ); - }, - [ currentPost ] - ); + const onSelectPost = useCallback( ( postId, postType ) => { + postHistory.current.push( { postId, postType } ); + setCurrentPost( { postId, postType } ); + }, [] ); const goBack = - postHistory.current.length > 0 + postHistory.current.length > 1 ? () => { - const previousPost = postHistory.current.shift(); - setCurrentPost( { - postId: previousPost.postId - ? previousPost.postId - : initialPostId, - postType: previousPost.postType - ? previousPost.postType - : initialPostType, - } ); + postHistory.current.pop(); + setCurrentPost( [ ...postHistory.current ].pop() ); } : undefined; From 8fd30e6479b68e56a28616fc8bc404d8e8c54a0b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 19 Dec 2023 13:19:43 +0800 Subject: [PATCH 19/32] Refactor `usePostHistory` to keep all history in a single array. Use useReducer. --- .../edit-post/src/hooks/use-post-history.js | 59 +++++++++++++------ 1 file changed, 41 insertions(+), 18 deletions(-) diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index 2fe0a63435b28..eb7b257deec85 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -1,29 +1,52 @@ /** * WordPress dependencies */ -import { useCallback, useRef, useState } from '@wordpress/element'; +import { useCallback, useReducer } from '@wordpress/element'; +/** + * A hook that records the 'entity' history in the post editor as a user + * navigates between editing a post and editing the post template or patterns. + * + * Implemented as a stack, so a little similar to the browser history API. + * + * Used to control displaying UI elements like the back button. + * + * @param {number} initialPostId The post id of the post when the editor loaded. + * @param {string} initialPostType The post type of the post when the editor loaded. + * + * @return {Object} An object containing the `currentPost` variable and + * `onSelectPost` and `goBack` functions. + */ export default function usePostHistory( initialPostId, initialPostType ) { - const postHistory = useRef( [ - { postId: initialPostId, postType: initialPostType }, - ] ); - const [ currentPost, setCurrentPost ] = useState( { - postId: initialPostId, - postType: initialPostType, - } ); + const [ postHistory, dispatch ] = useReducer( + ( historyState, { type, post } ) => { + if ( type === 'push' ) { + return [ ...historyState, post ]; + } + if ( type === 'pop' ) { + // Try to leave one item in the history. + if ( historyState.length > 1 ) { + return historyState.slice( 0, -1 ); + } + } + return historyState; + }, + [ { postId: initialPostId, postType: initialPostType } ] + ); const onSelectPost = useCallback( ( postId, postType ) => { - postHistory.current.push( { postId, postType } ); - setCurrentPost( { postId, postType } ); + dispatch( { type: 'push', post: { postId, postType } } ); + }, [] ); + + const goBack = useCallback( () => { + dispatch( { type: 'pop' } ); }, [] ); - const goBack = - postHistory.current.length > 1 - ? () => { - postHistory.current.pop(); - setCurrentPost( [ ...postHistory.current ].pop() ); - } - : undefined; + const currentPost = postHistory[ postHistory.length - 1 ]; - return { currentPost, onSelectPost, goBack }; + return { + currentPost, + onSelectPost, + goBack: postHistory.length > 1 ? goBack : undefined, + }; } From e8826479f8aeced591fc436fa1782c8c3a8c898a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 20 Dec 2023 11:48:00 +1300 Subject: [PATCH 20/32] fix edit post specific classname --- packages/editor/src/components/editor-canvas/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss index 4f3d838184455..83c166553e60d 100644 --- a/packages/editor/src/components/editor-canvas/style.scss +++ b/packages/editor/src/components/editor-canvas/style.scss @@ -1,4 +1,4 @@ -.edit-post-visual-editor { +.block-editor__container { .has-history { padding: $grid-unit-60 $grid-unit-60 0; } From 64a462e0545f65edcf5495ae97524f0d51bb6285 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 08:59:15 +1300 Subject: [PATCH 21/32] Fix iframe classes --- packages/editor/src/components/editor-canvas/index.js | 4 +++- packages/editor/src/components/editor-canvas/style.scss | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 17750e6414b43..35c521823ce8f 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -301,7 +301,9 @@ function EditorCanvas( { styles={ styles } height="100%" iframeProps={ { - className: classnames( { 'has-history': hasHistory } ), + className: classnames( 'editor-canvas__iframe', { + 'has-history': hasHistory, + } ), ...iframeProps, style: { ...iframeProps?.style, diff --git a/packages/editor/src/components/editor-canvas/style.scss b/packages/editor/src/components/editor-canvas/style.scss index 83c166553e60d..d5baf48012452 100644 --- a/packages/editor/src/components/editor-canvas/style.scss +++ b/packages/editor/src/components/editor-canvas/style.scss @@ -1,5 +1,5 @@ -.block-editor__container { - .has-history { +.editor-canvas__iframe { + &.has-history { padding: $grid-unit-60 $grid-unit-60 0; } } From ab7f344b86f72fc0168c9994fea30c41ed53b8f5 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 15:51:47 +1300 Subject: [PATCH 22/32] Editing in focus mode - pass onSelectPost as editor setting --- packages/block-library/src/block/edit.js | 56 +++++++++++-------- .../edit-post/src/hooks/use-post-history.js | 28 +++++++++- .../components/block-editor/back-button.js | 6 +- .../block-editor/use-site-editor-settings.js | 3 +- .../provider/use-block-editor-settings.js | 6 ++ .../src/hooks/pattern-partial-syncing.js | 34 ----------- 6 files changed, 70 insertions(+), 63 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index baab00676cea9..5edc423ffa009 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -148,7 +148,6 @@ export default function ReusableBlockEdit( { __unstableParentLayout: parentLayout, clientId: patternClientId, setAttributes, - editOriginalPattern, } ) { const registry = useRegistry(); const hasAlreadyRendered = useHasRecursion( ref ); @@ -168,23 +167,36 @@ export default function ReusableBlockEdit( { } = useDispatch( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); - const { innerBlocks, userCanEdit, getBlockEditingMode } = useSelect( - ( select ) => { - const { canUser } = select( coreStore ); - const { getBlocks, getBlockEditingMode: editingMode } = - select( blockEditorStore ); - const blocks = getBlocks( patternClientId ); - const canEdit = canUser( 'update', 'blocks', ref ); - - // For editing link to the site editor if the theme and user permissions support it. - return { - innerBlocks: blocks, - userCanEdit: canEdit, - getBlockEditingMode: editingMode, - }; - }, - [ patternClientId, ref ] - ); + const { innerBlocks, userCanEdit, getBlockEditingMode, onSelectPost } = + useSelect( + ( select ) => { + const { canUser } = select( coreStore ); + const { + getBlocks, + getBlockEditingMode: editingMode, + getSettings, + } = select( blockEditorStore ); + const blocks = getBlocks( patternClientId ); + const canEdit = canUser( 'update', 'blocks', ref ); + + // For editing link to the site editor if the theme and user permissions support it. + return { + innerBlocks: blocks, + userCanEdit: canEdit, + getBlockEditingMode: editingMode, + onSelectPost: getSettings().__experimentalOnSelectPost, + }; + }, + [ patternClientId, ref ] + ); + + const editOriginalProps = onSelectPost + ? onSelectPost( { + postId: ref, + postType: 'wp_block', + canvas: 'edit', + } ) + : {}; useEffect( () => setBlockEditMode( setBlockEditingMode, innerBlocks ), @@ -297,14 +309,10 @@ export default function ReusableBlockEdit( { return ( - { userCanEdit && editOriginalPattern && ( + { userCanEdit && editOriginalProps && ( - - editOriginalPattern( ref, 'wp_block' ) - } - > + { __( 'Edit original' ) } diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index eb7b257deec85..5e678b18fd432 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { useCallback, useReducer } from '@wordpress/element'; +import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; /** * A hook that records the 'entity' history in the post editor as a user @@ -34,8 +35,31 @@ export default function usePostHistory( initialPostId, initialPostType ) { [ { postId: initialPostId, postType: initialPostType } ] ); - const onSelectPost = useCallback( ( postId, postType ) => { - dispatch( { type: 'push', post: { postId, postType } } ); + const onSelectPost = 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', + } ); + + // This return signature is matched to `useLink` in the site editor to allow the onSelectPost + // setting to be easily shared between edit-post and edit-site. In edit-site useLink is passed in + // as onSelectPost in order to use the existing edit-site client side routing to move between posts. + return { + href: newUrl, + onClick: ( event ) => { + event.preventDefault(); + dispatch( { + type: 'push', + post: { postId: params.postId, postType: params.postType }, + } ); + }, + }; }, [] ); const goBack = useCallback( () => { diff --git a/packages/edit-site/src/components/block-editor/back-button.js b/packages/edit-site/src/components/block-editor/back-button.js index 924dedd4f853e..acd9cf7028e65 100644 --- a/packages/edit-site/src/components/block-editor/back-button.js +++ b/packages/edit-site/src/components/block-editor/back-button.js @@ -12,6 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { TEMPLATE_PART_POST_TYPE, NAVIGATION_POST_TYPE, + PATTERN_TYPES, } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; @@ -22,11 +23,12 @@ function BackButton() { const history = useHistory(); const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE; const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE; + const isPattern = location.params.postType === PATTERN_TYPES.user; const previousTemplateId = location.state?.fromTemplateId; - const isFocusMode = isTemplatePart || isNavigationMenu; + const isFocusMode = isTemplatePart || isNavigationMenu || isPattern; - if ( ! isFocusMode || ! previousTemplateId ) { + if ( ! isFocusMode || ( ! previousTemplateId && ! isPattern ) ) { return null; } 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 d1ccd9e73f15d..8caa9a3b3eec4 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 @@ -13,6 +13,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; +import { useLink } from '../routes/link'; const { useBlockEditorSettings } = unlock( editorPrivateApis ); @@ -152,7 +153,7 @@ export function useSpecificEditorSettings() { hasFixedToolbar, keepCaretInsideBlock, defaultRenderingMode, - + onSelectPost: useLink, // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, __experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel, 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 1afbf98150d27..d289e44aa0a4f 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -76,6 +76,7 @@ const BLOCK_EDITOR_SETTINGS = [ '__unstableIsBlockBasedTheme', '__experimentalArchiveTitleTypeLabel', '__experimentalArchiveTitleNameLabel', + '__experimentalOnSelectPost', ]; /** @@ -99,6 +100,7 @@ function useBlockEditorSettings( settings, postType, postId ) { userPatternCategories, restBlockPatterns, restBlockPatternCategories, + selectPost, } = useSelect( ( select ) => { const isWeb = Platform.OS === 'web'; @@ -111,6 +113,7 @@ function useBlockEditorSettings( settings, postType, postId ) { getBlockPatterns, getBlockPatternCategories, } = select( coreStore ); + const { onSelectPost } = select( editorStore ).getEditorSettings(); const siteSettings = canUser( 'read', 'settings' ) ? getEntityRecord( 'root', 'site' ) @@ -138,6 +141,7 @@ function useBlockEditorSettings( settings, postType, postId ) { userPatternCategories: getUserPatternCategories(), restBlockPatterns: getBlockPatterns(), restBlockPatternCategories: getBlockPatternCategories(), + selectPost: onSelectPost, }; }, [ postType, postId ] @@ -245,6 +249,7 @@ function useBlockEditorSettings( settings, postType, postId ) { ? [ [ 'core/navigation', {}, [] ] ] : settings.template, __experimentalSetIsInserterOpened: setIsInserterOpened, + __experimentalOnSelectPost: selectPost, } ), [ allowRightClickOverrides, @@ -262,6 +267,7 @@ function useBlockEditorSettings( settings, postType, postId ) { pageForPosts, postType, setIsInserterOpened, + selectPost, ] ); } diff --git a/packages/editor/src/hooks/pattern-partial-syncing.js b/packages/editor/src/hooks/pattern-partial-syncing.js index cd74b317ca358..40bd1e16dfc00 100644 --- a/packages/editor/src/hooks/pattern-partial-syncing.js +++ b/packages/editor/src/hooks/pattern-partial-syncing.js @@ -64,44 +64,10 @@ const withPartialSyncingControls = createHigherOrderComponent( } ); -/** - * Adds an editOriginalPattern prop which allows the block to switch between post and pattern - * editing modes. - * - * @param {Component} BlockEdit Original component. - * - * @return {Component} Wrapped component. - */ -const withPatternOnlyRenderMode = createHigherOrderComponent( - ( BlockEdit ) => ( props ) => { - const onSelectPost = useSelect( - ( select ) => - select( editorStore ).getEditorSettings().onSelectPost, - [] - ); - if ( props.name !== 'core/block' ) { - return ; - } - - const newProps = { - ...props, - editOriginalPattern: - typeof onSelectPost === 'function' ? onSelectPost : undefined, - }; - - return ; - } -); - if ( window.__experimentalPatternPartialSyncing ) { addFilter( 'editor.BlockEdit', 'core/editor/with-partial-syncing-controls', withPartialSyncingControls ); - addFilter( - 'editor.BlockEdit', - 'core/editor/with-pattern-edit-original-mode', - withPatternOnlyRenderMode - ); } From 917e6a1ae7692da1a85da41f091fa3a19052c02f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 16:38:36 +1300 Subject: [PATCH 23/32] Minor tidy ups --- packages/edit-post/src/editor.js | 10 +++++----- packages/edit-post/src/index.js | 1 + packages/editor/src/components/document-bar/index.js | 2 -- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index d9b626199fba5..b6dda892ab34b 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -152,17 +152,17 @@ function Editor( { return result; }, [ settings, - onSelectPost, - goBack, - preferredStyleVariations, - updatePreferredStyleVariations, hasFixedToolbar, + hasInlineToolbar, focusMode, isDistractionFree, - hasInlineToolbar, keepCaretInsideBlock, hiddenBlockTypes, blockTypes, + preferredStyleVariations, + updatePreferredStyleVariations, + onSelectPost, + goBack, ] ); if ( ! post ) { diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index e60719ebb647c..0d52a9f8ed512 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -19,6 +19,7 @@ import { privateApis as editorPrivateApis, store as editorStore, } from '@wordpress/editor'; + /** * Internal dependencies */ diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index d3e5688001548..29e1cf7c606fd 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -78,9 +78,7 @@ export default function DocumentBar() { } if ( goBack ) { goBack(); - return; } - window.history.back(); }; return ( From 266c6c6f40d2c0aa98784d5d22b15266e877095e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 20:13:38 +1300 Subject: [PATCH 24/32] Move from onSelectPost to getPostLinkProps and add new hook in site editor instead of trying to reuse useLink --- packages/block-library/src/block/edit.js | 9 ++-- packages/edit-post/src/editor.js | 6 +-- .../edit-post/src/hooks/use-post-history.js | 9 ++-- .../block-editor/use-post-link-props.js | 42 +++++++++++++++++++ .../block-editor/use-site-editor-settings.js | 10 +++-- .../provider/use-block-editor-settings.js | 13 +++--- 6 files changed, 66 insertions(+), 23 deletions(-) create mode 100644 packages/edit-site/src/components/block-editor/use-post-link-props.js diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 5edc423ffa009..f54a207a757d9 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -167,7 +167,7 @@ export default function ReusableBlockEdit( { } = useDispatch( blockEditorStore ); const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); - const { innerBlocks, userCanEdit, getBlockEditingMode, onSelectPost } = + const { innerBlocks, userCanEdit, getBlockEditingMode, getPostLinkProps } = useSelect( ( select ) => { const { canUser } = select( coreStore ); @@ -184,14 +184,15 @@ export default function ReusableBlockEdit( { innerBlocks: blocks, userCanEdit: canEdit, getBlockEditingMode: editingMode, - onSelectPost: getSettings().__experimentalOnSelectPost, + getPostLinkProps: + getSettings().__experimentalGetPostLinkProps, }; }, [ patternClientId, ref ] ); - const editOriginalProps = onSelectPost - ? onSelectPost( { + const editOriginalProps = getPostLinkProps + ? getPostLinkProps( { postId: ref, postType: 'wp_block', canvas: 'edit', diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index b6dda892ab34b..7e03314b646f0 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -35,7 +35,7 @@ function Editor( { ...props } ) { const isLargeViewport = useViewportMatch( 'medium' ); - const { currentPost, onSelectPost, goBack } = usePostHistory( + const { currentPost, getPostLinkProps, goBack } = usePostHistory( initialPostId, initialPostType ); @@ -117,7 +117,7 @@ function Editor( { const editorSettings = useMemo( () => { const result = { ...settings, - onSelectPost, + getPostLinkProps, goBack, __experimentalPreferredStyleVariations: { value: preferredStyleVariations, @@ -161,7 +161,7 @@ function Editor( { blockTypes, preferredStyleVariations, updatePreferredStyleVariations, - onSelectPost, + getPostLinkProps, goBack, ] ); diff --git a/packages/edit-post/src/hooks/use-post-history.js b/packages/edit-post/src/hooks/use-post-history.js index 5e678b18fd432..02c34a26727b1 100644 --- a/packages/edit-post/src/hooks/use-post-history.js +++ b/packages/edit-post/src/hooks/use-post-history.js @@ -16,7 +16,7 @@ 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 - * `onSelectPost` and `goBack` functions. + * `getPostLinkProps` and `goBack` functions. */ export default function usePostHistory( initialPostId, initialPostType ) { const [ postHistory, dispatch ] = useReducer( @@ -35,7 +35,7 @@ export default function usePostHistory( initialPostId, initialPostType ) { [ { postId: initialPostId, postType: initialPostType } ] ); - const onSelectPost = useCallback( ( params ) => { + const getPostLinkProps = useCallback( ( params ) => { const currentArgs = getQueryArgs( window.location.href ); const currentUrlWithoutArgs = removeQueryArgs( window.location.href, @@ -47,9 +47,6 @@ export default function usePostHistory( initialPostId, initialPostType ) { action: 'edit', } ); - // This return signature is matched to `useLink` in the site editor to allow the onSelectPost - // setting to be easily shared between edit-post and edit-site. In edit-site useLink is passed in - // as onSelectPost in order to use the existing edit-site client side routing to move between posts. return { href: newUrl, onClick: ( event ) => { @@ -70,7 +67,7 @@ export default function usePostHistory( initialPostId, initialPostType ) { return { currentPost, - onSelectPost, + getPostLinkProps, goBack: postHistory.length > 1 ? goBack : undefined, }; } 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 new file mode 100644 index 0000000000000..6f26bda3afc8f --- /dev/null +++ b/packages/edit-site/src/components/block-editor/use-post-link-props.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; + +const { useHistory } = unlock( routerPrivateApis ); + +export function usePostLinkProps() { + const history = useHistory(); + 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', + } ); + + return { + href: newUrl, + onClick: ( event ) => { + event.preventDefault(); + history.push( params ); + }, + }; + }, + [ history ] + ); + + return getPostLinkProps; +} 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 8caa9a3b3eec4..fcf50a724c8d1 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 @@ -13,7 +13,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { useLink } from '../routes/link'; +import { usePostLinkProps } from './use-post-link-props'; const { useBlockEditorSettings } = unlock( editorPrivateApis ); @@ -91,6 +91,7 @@ function useArchiveLabel( templateSlug ) { export function useSpecificEditorSettings() { const isLargeViewport = useViewportMatch( 'medium' ); + const getPostLinkProps = usePostLinkProps(); const { templateSlug, focusMode, @@ -153,21 +154,22 @@ export function useSpecificEditorSettings() { hasFixedToolbar, keepCaretInsideBlock, defaultRenderingMode, - onSelectPost: useLink, + getPostLinkProps, // I wonder if they should be set in the post editor too __experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel, __experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel, }; }, [ settings, + canvasMode, focusMode, isDistractionFree, hasFixedToolbar, keepCaretInsideBlock, - canvasMode, + defaultRenderingMode, + getPostLinkProps, archiveLabels.archiveTypeLabel, archiveLabels.archiveNameLabel, - defaultRenderingMode, ] ); return defaultEditorSettings; 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 d289e44aa0a4f..73d051e3d0542 100644 --- a/packages/editor/src/components/provider/use-block-editor-settings.js +++ b/packages/editor/src/components/provider/use-block-editor-settings.js @@ -76,7 +76,7 @@ const BLOCK_EDITOR_SETTINGS = [ '__unstableIsBlockBasedTheme', '__experimentalArchiveTitleTypeLabel', '__experimentalArchiveTitleNameLabel', - '__experimentalOnSelectPost', + '__experimentalGetPostLinkProps', ]; /** @@ -100,7 +100,7 @@ function useBlockEditorSettings( settings, postType, postId ) { userPatternCategories, restBlockPatterns, restBlockPatternCategories, - selectPost, + getPostLinkProps, } = useSelect( ( select ) => { const isWeb = Platform.OS === 'web'; @@ -113,7 +113,8 @@ function useBlockEditorSettings( settings, postType, postId ) { getBlockPatterns, getBlockPatternCategories, } = select( coreStore ); - const { onSelectPost } = select( editorStore ).getEditorSettings(); + const { getPostLinkProps: postLinkProps } = + select( editorStore ).getEditorSettings(); const siteSettings = canUser( 'read', 'settings' ) ? getEntityRecord( 'root', 'site' ) @@ -141,7 +142,7 @@ function useBlockEditorSettings( settings, postType, postId ) { userPatternCategories: getUserPatternCategories(), restBlockPatterns: getBlockPatterns(), restBlockPatternCategories: getBlockPatternCategories(), - selectPost: onSelectPost, + getPostLinkProps: postLinkProps, }; }, [ postType, postId ] @@ -249,7 +250,7 @@ function useBlockEditorSettings( settings, postType, postId ) { ? [ [ 'core/navigation', {}, [] ] ] : settings.template, __experimentalSetIsInserterOpened: setIsInserterOpened, - __experimentalOnSelectPost: selectPost, + __experimentalGetPostLinkProps: getPostLinkProps, } ), [ allowRightClickOverrides, @@ -267,7 +268,7 @@ function useBlockEditorSettings( settings, postType, postId ) { pageForPosts, postType, setIsInserterOpened, - selectPost, + getPostLinkProps, ] ); } From 4a6c7c35c1b3da9b4f1e52ca576a25e4e3a5de4e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 20:28:21 +1300 Subject: [PATCH 25/32] Fixes from code review --- .../src/components/document-bar/index.js | 49 +++++++++++-------- .../src/components/editor-canvas/index.js | 2 +- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js index 29e1cf7c606fd..fdf9cbe55dbca 100644 --- a/packages/editor/src/components/document-bar/index.js +++ b/packages/editor/src/components/document-bar/index.js @@ -48,27 +48,34 @@ const icons = { }; export default function DocumentBar() { - const { isEditingTemplate, templateId, postType, postId, goBack } = - useSelect( ( select ) => { - const { - getRenderingMode, - getCurrentTemplateId, - getCurrentPostId, - getCurrentPostType, - getEditorSettings, - } = select( editorStore ); - const _templateId = getCurrentTemplateId(); - const back = getEditorSettings().goBack; - return { - isEditingTemplate: - !! _templateId && getRenderingMode() === 'template-only', - templateId: _templateId, - postType: getCurrentPostType(), - postId: getCurrentPostId(), - goBack: typeof back === 'function' ? back : undefined, - }; - }, [] ); - const { getEditorSettings } = useSelect( editorStore ); + const { + isEditingTemplate, + templateId, + postType, + postId, + goBack, + getEditorSettings, + } = useSelect( ( select ) => { + const { + getRenderingMode, + getCurrentTemplateId, + getCurrentPostId, + getCurrentPostType, + getEditorSettings: getSettings, + } = select( editorStore ); + const _templateId = getCurrentTemplateId(); + const back = getSettings().goBack; + return { + isEditingTemplate: + !! _templateId && getRenderingMode() === 'template-only', + templateId: _templateId, + postType: getCurrentPostType(), + postId: getCurrentPostId(), + goBack: typeof back === 'function' ? back : undefined, + getEditorSettings: getSettings, + }; + }, [] ); + const { setRenderingMode } = useDispatch( editorStore ); const handleOnBack = () => { diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 35c521823ce8f..9230bc24697ca 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -138,7 +138,7 @@ function EditorCanvas( { wrapperBlockName: _wrapperBlockName, wrapperUniqueId: getCurrentPostId(), deviceType: getDeviceType(), - hasHistory: !! getEditorSettings().goBack, + hasHistory: !! editorSettings.goBack, }; }, [] ); const { isCleanNewPost } = useSelect( editorStore ); From 925efaf7145541f9047692016536324d374fe7c1 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 20:29:20 +1300 Subject: [PATCH 26/32] Another fix from review --- packages/editor/src/components/editor-canvas/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js index 9230bc24697ca..e5e663f821a64 100644 --- a/packages/editor/src/components/editor-canvas/index.js +++ b/packages/editor/src/components/editor-canvas/index.js @@ -128,7 +128,7 @@ function EditorCanvas( { return { renderingMode: _renderingMode, - postContentAttributes: getEditorSettings().postContentAttributes, + postContentAttributes: editorSettings.postContentAttributes, // Post template fetch returns a 404 on classic themes, which // messes with e2e tests, so check it's a block theme first. editedPostTemplate: From c37010de00ae9b69af544196e4e568b5ce81dfc5 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 21 Dec 2023 20:43:52 +1300 Subject: [PATCH 27/32] Add optional state param to call to history.push --- .../src/components/block-editor/use-post-link-props.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index 6f26bda3afc8f..3a613f8843e32 100644 --- 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 @@ -15,7 +15,7 @@ const { useHistory } = unlock( routerPrivateApis ); export function usePostLinkProps() { const history = useHistory(); const getPostLinkProps = useCallback( - ( params ) => { + ( params, state ) => { const currentArgs = getQueryArgs( window.location.href ); const currentUrlWithoutArgs = removeQueryArgs( window.location.href, @@ -31,7 +31,7 @@ export function usePostLinkProps() { href: newUrl, onClick: ( event ) => { event.preventDefault(); - history.push( params ); + history.push( params, state ); }, }; }, From de462a0f071c94690c7f15bb80b185d32a178867 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Dec 2023 09:32:25 +1300 Subject: [PATCH 28/32] Remove code duplication in usePostLinkProps hook --- .../block-editor/use-post-link-props.js | 30 +++---------------- .../edit-site/src/components/routes/link.js | 14 +++++++-- 2 files changed, 15 insertions(+), 29 deletions(-) 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 index 3a613f8843e32..dd02305393122 100644 --- 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 @@ -1,42 +1,20 @@ /** * WordPress dependencies */ -import { addQueryArgs, getQueryArgs, removeQueryArgs } from '@wordpress/url'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useCallback } from '@wordpress/element'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; +import { getPostLinkProps } from '../routes/link'; const { useHistory } = unlock( routerPrivateApis ); export function usePostLinkProps() { const history = useHistory(); - const getPostLinkProps = useCallback( - ( params, state ) => { - const currentArgs = getQueryArgs( window.location.href ); - const currentUrlWithoutArgs = removeQueryArgs( - window.location.href, - ...Object.keys( currentArgs ) - ); - const newUrl = addQueryArgs( currentUrlWithoutArgs, { - post: params.postId, - action: 'edit', - } ); - - return { - href: newUrl, - onClick: ( event ) => { - event.preventDefault(); - history.push( params, state ); - }, - }; - }, - [ history ] - ); - - return getPostLinkProps; + return ( params, state ) => { + return getPostLinkProps( history, params, state ); + }; } diff --git a/packages/edit-site/src/components/routes/link.js b/packages/edit-site/src/components/routes/link.js index 3191e6b9c6f3a..9ee60b5ef8b9e 100644 --- a/packages/edit-site/src/components/routes/link.js +++ b/packages/edit-site/src/components/routes/link.js @@ -15,9 +15,12 @@ import { const { useHistory } = unlock( routerPrivateApis ); -export function useLink( params = {}, state, shouldReplace = false ) { - const history = useHistory(); - +export function getPostLinkProps( + history, + params = {}, + state, + shouldReplace = false +) { function onClick( event ) { event.preventDefault(); @@ -49,6 +52,11 @@ export function useLink( params = {}, state, shouldReplace = false ) { }; } +export function useLink( params, state, shouldReplace ) { + const history = useHistory(); + return getPostLinkProps( history, params, state, shouldReplace ); +} + export default function Link( { params = {}, state, From 638e0d2de27693a255b58692956eb1c360701f52 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Dec 2023 10:31:11 +1300 Subject: [PATCH 29/32] make sure block editing mode set to default when going to edit original --- packages/block-library/src/block/edit.js | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index f54a207a757d9..8df94b1fb7cb4 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -132,13 +132,14 @@ function getOverridesFromBlocks( blocks, defaultValues ) { return Object.keys( overrides ).length > 0 ? overrides : undefined; } -function setBlockEditMode( setEditMode, blocks ) { +function setBlockEditMode( setEditMode, blocks, mode ) { blocks.forEach( ( block ) => { - const editMode = isPartiallySynced( block ) - ? 'contentOnly' - : 'disabled'; + let editMode = mode; + if ( ! editMode ) { + editMode = isPartiallySynced( block ) ? 'contentOnly' : 'disabled'; + } setEditMode( block.clientId, editMode ); - setBlockEditMode( setEditMode, block.innerBlocks ); + setBlockEditMode( setEditMode, block.innerBlocks, mode ); } ); } @@ -282,6 +283,11 @@ export default function ReusableBlockEdit( { }, blockEditorStore ); }, [ syncDerivedUpdates, patternClientId, registry, setAttributes ] ); + const handleEditOriginal = ( event ) => { + setBlockEditMode( setBlockEditingMode, innerBlocks, 'default' ); + editOriginalProps.onClick( event ); + }; + let children = null; if ( hasAlreadyRendered ) { @@ -313,7 +319,10 @@ export default function ReusableBlockEdit( { { userCanEdit && editOriginalProps && ( - + { __( 'Edit original' ) } From f0c08debaf7a1275703acef8907e1271938ffb35 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Dec 2023 11:05:24 +1300 Subject: [PATCH 30/32] Tidy up edit mode assignment --- packages/block-library/src/block/edit.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index 8df94b1fb7cb4..1892d614dba2a 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -134,10 +134,8 @@ function getOverridesFromBlocks( blocks, defaultValues ) { function setBlockEditMode( setEditMode, blocks, mode ) { blocks.forEach( ( block ) => { - let editMode = mode; - if ( ! editMode ) { - editMode = isPartiallySynced( block ) ? 'contentOnly' : 'disabled'; - } + const editMode = + mode || ( isPartiallySynced( block ) ? 'contentOnly' : 'disabled' ); setEditMode( block.clientId, editMode ); setBlockEditMode( setEditMode, block.innerBlocks, mode ); } ); From 9465f9f341c1ace69c48986d2b3abd8f8eadc3ac Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Dec 2023 11:45:48 +1300 Subject: [PATCH 31/32] Don't adjust the url if moving to focused mode of entity from post --- packages/edit-post/src/components/layout/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 70d5554064edf..72b843f06e743 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -162,6 +162,7 @@ function Layout() { showBlockBreadcrumbs, showMetaBoxes, documentLabel, + hasHistory, } = useSelect( ( select ) => { const { getEditorSettings, getPostTypeLabel } = select( editorStore ); const editorSettings = getEditorSettings(); @@ -199,6 +200,7 @@ function Layout() { documentLabel: postTypeLabel || _x( 'Document', 'noun' ), hasBlockSelected: !! select( blockEditorStore ).getBlockSelectionStart(), + hasHistory: !! getEditorSettings().goBack, }; }, [] ); @@ -286,7 +288,7 @@ function Layout() { return ( <> - + { ! hasHistory && } From 6bc3abbcb07f1998e93a1a4d0928cae7b154c142 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 22 Dec 2023 11:54:53 +1300 Subject: [PATCH 32/32] Change how updating of url is bypassed when switching to focused mode editing --- packages/edit-post/src/components/browser-url/index.js | 6 ++++-- packages/edit-post/src/components/layout/index.js | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/browser-url/index.js b/packages/edit-post/src/components/browser-url/index.js index 798753cfea357..5f389c4c82818 100644 --- a/packages/edit-post/src/components/browser-url/index.js +++ b/packages/edit-post/src/components/browser-url/index.js @@ -43,7 +43,8 @@ export class BrowserURL extends Component { } componentDidUpdate( prevProps ) { - const { postId, postStatus, postType, isSavingPost } = this.props; + const { postId, postStatus, postType, isSavingPost, hasHistory } = + this.props; const { historyId } = this.state; // Posts are still dirty while saving so wait for saving to finish @@ -56,7 +57,8 @@ export class BrowserURL extends Component { if ( ( postId !== prevProps.postId || postId !== historyId ) && postStatus !== 'auto-draft' && - postId + postId && + ! hasHistory ) { this.setBrowserURL( postId ); } diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 72b843f06e743..785f329cd3466 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -288,7 +288,7 @@ function Layout() { return ( <> - { ! hasHistory && } +