diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 25e74f24577d0e..6db95b6694a686 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -204,7 +204,7 @@ function Layout( { initialPost } ) { // Set the right context for the command palette const commandContext = hasBlockSelected ? 'block-selection-edit' - : 'post-editor-edit'; + : 'entity-edit'; useCommandContext( commandContext ); const styles = useEditorStyles(); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 2ba3a94f6e704d..c094f1e6282567 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -48,7 +48,6 @@ import useTitle from '../routes/use-title'; import CanvasLoader from '../canvas-loader'; import { unlock } from '../../lock-unlock'; import useEditedEntityRecord from '../use-edited-entity-record'; -import PatternModal from '../pattern-modal'; import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; import SiteEditorCanvas from '../block-editor/site-editor-canvas'; import TemplatePartConverter from '../template-part-converter'; @@ -267,12 +266,7 @@ export default function Editor( { isLoading, onClick } ) { { isEditMode && } - { showVisualEditor && ( - <> - - - - ) } + { showVisualEditor && } { ! isReady ? : null } { isEditMode && } { hasLoadedPost && ! editedPost && ( diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 83beee41642d30..6c9668c28d0cc1 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -150,7 +150,7 @@ export default function Layout() { let commandContext = 'site-editor'; if ( canvasMode === 'edit' ) { - commandContext = 'site-editor-edit'; + commandContext = 'entity-edit'; } if ( hasBlockSelected ) { commandContext = 'block-selection-edit'; diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js deleted file mode 100644 index cf79dacef8d426..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/duplicate.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { PATTERN_MODALS } from './'; -import { unlock } from '../../lock-unlock'; -import useEditedEntityRecord from '../use-edited-entity-record'; - -const { DuplicatePatternModal } = unlock( patternsPrivateApis ); -const { interfaceStore } = unlock( editorPrivateApis ); - -export default function PatternDuplicateModal() { - const { record } = useEditedEntityRecord(); - const { closeModal } = useDispatch( interfaceStore ); - - const isActive = useSelect( ( select ) => - select( interfaceStore ).isModalActive( PATTERN_MODALS.duplicate ) - ); - - if ( ! isActive ) { - return null; - } - - return ( - closeModal() } - pattern={ record } - /> - ); -} diff --git a/packages/edit-site/src/components/pattern-modal/index.js b/packages/edit-site/src/components/pattern-modal/index.js deleted file mode 100644 index 95d08a058b3f84..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/index.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Internal dependencies - */ -import PatternRenameModal from './rename'; -import PatternDuplicateModal from './duplicate'; - -export const PATTERN_MODALS = { - rename: 'edit-site/pattern-rename', - duplicate: 'edit-site/pattern-duplicate', -}; - -export default function PatternModal() { - return ( - <> - - - - ); -} diff --git a/packages/edit-site/src/components/pattern-modal/rename.js b/packages/edit-site/src/components/pattern-modal/rename.js deleted file mode 100644 index 8c817172cc2099..00000000000000 --- a/packages/edit-site/src/components/pattern-modal/rename.js +++ /dev/null @@ -1,30 +0,0 @@ -/** - * WordPress dependencies - */ -import { useDispatch, useSelect } from '@wordpress/data'; -import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; -import { privateApis as editorPrivateApis } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { PATTERN_MODALS } from './'; -import { unlock } from '../../lock-unlock'; -import useEditedEntityRecord from '../use-edited-entity-record'; - -const { RenamePatternModal } = unlock( patternsPrivateApis ); -const { interfaceStore } = unlock( editorPrivateApis ); - -export default function PatternRenameModal() { - const { record: pattern } = useEditedEntityRecord(); - const { closeModal } = useDispatch( interfaceStore ); - const isActive = useSelect( ( select ) => - select( interfaceStore ).isModalActive( PATTERN_MODALS.rename ) - ); - - if ( ! isActive ) { - return null; - } - - return ; -} diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js index 1ca24b318a4448..f11a831e0edb04 100644 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js @@ -4,7 +4,6 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { __, sprintf, isRTL } from '@wordpress/i18n'; import { - edit, trash, rotateLeft, rotateRight, @@ -13,7 +12,6 @@ import { drawerLeft, drawerRight, blockDefault, - symbol, } from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { decodeEntities } from '@wordpress/html-entities'; @@ -30,9 +28,8 @@ import { store as editSiteStore } from '../../store'; import useEditedEntityRecord from '../../components/use-edited-entity-record'; import isTemplateRemovable from '../../utils/is-template-removable'; import isTemplateRevertable from '../../utils/is-template-revertable'; -import { PATTERN_MODALS } from '../../components/pattern-modal'; import { unlock } from '../../lock-unlock'; -import { PATTERN_TYPES, TEMPLATE_POST_TYPE } from '../../utils/constants'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; import { useLink } from '../../components/routes/link'; const { interfaceStore } = unlock( editorPrivateApis ); @@ -225,45 +222,11 @@ function useEditUICommands() { }; } -function usePatternCommands() { - const { isLoaded, record: pattern } = useEditedEntityRecord(); - const { openModal } = useDispatch( interfaceStore ); - - if ( ! isLoaded ) { - return { isLoading: true, commands: [] }; - } - - const commands = []; - - if ( pattern?.type === PATTERN_TYPES.user ) { - commands.push( { - name: 'core/rename-pattern', - label: __( 'Rename pattern' ), - icon: edit, - callback: ( { close } ) => { - openModal( PATTERN_MODALS.rename ); - close(); - }, - } ); - commands.push( { - name: 'core/duplicate-pattern', - label: __( 'Duplicate pattern' ), - icon: symbol, - callback: ( { close } ) => { - openModal( PATTERN_MODALS.duplicate ); - close(); - }, - } ); - } - - return { isLoading: false, commands }; -} - export function useEditModeCommands() { useCommandLoader( { name: 'core/edit-site/page-content-focus', hook: usePageContentFocusCommands, - context: 'site-editor-edit', + context: 'entity-edit', } ); useCommandLoader( { @@ -271,12 +234,6 @@ export function useEditModeCommands() { hook: useManipulateDocumentCommands, } ); - useCommandLoader( { - name: 'core/edit-site/patterns', - hook: usePatternCommands, - context: 'site-editor-edit', - } ); - useCommandLoader( { name: 'core/edit-site/edit-ui', hook: useEditUICommands, diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index c79dc8cd1daa43..bcafbd4691add0 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -3,7 +3,14 @@ */ import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { code, listView, external, keyboard } from '@wordpress/icons'; +import { + code, + edit, + listView, + external, + keyboard, + symbol, +} from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as noticesStore } from '@wordpress/notices'; @@ -15,6 +22,9 @@ import { store as interfaceStore } from '@wordpress/interface'; * Internal dependencies */ import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; +import { modalName as patternRenameModalName } from '../pattern-rename-modal'; +import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; function useEditorCommandLoader() { const { @@ -221,9 +231,49 @@ function useEditorCommandLoader() { }; } +function useEditedEntityContextualCommands() { + const { postType } = useSelect( ( select ) => { + const { getCurrentPostType } = select( editorStore ); + return { + postType: getCurrentPostType(), + }; + }, [] ); + const { openModal } = useDispatch( interfaceStore ); + const commands = []; + + if ( postType === PATTERN_POST_TYPE ) { + commands.push( { + name: 'core/rename-pattern', + label: __( 'Rename pattern' ), + icon: edit, + callback: ( { close } ) => { + openModal( patternRenameModalName ); + close(); + }, + } ); + commands.push( { + name: 'core/duplicate-pattern', + label: __( 'Duplicate pattern' ), + icon: symbol, + callback: ( { close } ) => { + openModal( patternDuplicateModalName ); + close(); + }, + } ); + } + + return { isLoading: false, commands }; +} + export default function useCommands() { useCommandLoader( { name: 'core/editor/edit-ui', hook: useEditorCommandLoader, } ); + + useCommandLoader( { + name: 'core/editor/contextual-commands', + hook: useEditedEntityContextualCommands, + context: 'entity-edit', + } ); } diff --git a/packages/editor/src/components/pattern-duplicate-modal/index.js b/packages/editor/src/components/pattern-duplicate-modal/index.js new file mode 100644 index 00000000000000..2e5593536d1834 --- /dev/null +++ b/packages/editor/src/components/pattern-duplicate-modal/index.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { useDispatch, useSelect } from '@wordpress/data'; +import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; + +const { DuplicatePatternModal } = unlock( patternsPrivateApis ); +export const modalName = 'editor/pattern-duplicate'; + +export default function PatternDuplicateModal() { + const { record, postType } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const _postType = getCurrentPostType(); + return { + record: getEditedEntityRecord( + 'postType', + _postType, + getCurrentPostId() + ), + postType: _postType, + }; + }, [] ); + const { closeModal } = useDispatch( interfaceStore ); + + const isActive = useSelect( ( select ) => + select( interfaceStore ).isModalActive( modalName ) + ); + + if ( ! isActive || postType !== PATTERN_POST_TYPE ) { + return null; + } + + return ( + closeModal() } + pattern={ record } + /> + ); +} diff --git a/packages/editor/src/components/pattern-rename-modal/index.js b/packages/editor/src/components/pattern-rename-modal/index.js new file mode 100644 index 00000000000000..ea9a46e977b240 --- /dev/null +++ b/packages/editor/src/components/pattern-rename-modal/index.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { useDispatch, useSelect } from '@wordpress/data'; +import { privateApis as patternsPrivateApis } from '@wordpress/patterns'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as interfaceStore } from '@wordpress/interface'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as editorStore } from '../../store'; +import { PATTERN_POST_TYPE } from '../../store/constants'; + +const { RenamePatternModal } = unlock( patternsPrivateApis ); +export const modalName = 'editor/pattern-rename'; + +export default function PatternRenameModal() { + const { record, postType } = useSelect( ( select ) => { + const { getCurrentPostType, getCurrentPostId } = select( editorStore ); + const { getEditedEntityRecord } = select( coreStore ); + const _postType = getCurrentPostType(); + return { + record: getEditedEntityRecord( + 'postType', + _postType, + getCurrentPostId() + ), + postType: _postType, + }; + }, [] ); + const { closeModal } = useDispatch( interfaceStore ); + + const isActive = useSelect( ( select ) => + select( interfaceStore ).isModalActive( modalName ) + ); + + if ( ! isActive || postType !== PATTERN_POST_TYPE ) { + return null; + } + + return ; +} diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 9830a20f40fad9..56c86968f0274f 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -31,6 +31,8 @@ import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu'; import StartTemplateOptions from '../start-template-options'; import EditorKeyboardShortcuts from '../global-keyboard-shortcuts'; +import PatternRenameModal from '../pattern-rename-modal'; +import PatternDuplicateModal from '../pattern-duplicate-modal'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { PatternsMenuItems } = unlock( editPatternsPrivateApis ); @@ -279,6 +281,8 @@ export const ExperimentalEditorProvider = withRegistryProvider( + + ) }