From bff3c2a47f9a2bdb81b5e96bfd4dca000e312a83 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 4 Mar 2024 16:35:03 +0200 Subject: [PATCH 1/2] Add pattern title in create modal in post editor --- .../src/components/post-sync-status/index.js | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index a78396e7120e9c..bc4a712263c6a9 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -9,6 +9,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, ToggleControl, + TextControl, } from '@wordpress/components'; import { useEffect, useState } from '@wordpress/element'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -64,6 +65,7 @@ export function PostSyncStatusModal() { const { editPost } = useDispatch( editorStore ); const [ isModalOpen, setIsModalOpen ] = useState( false ); const [ syncType, setSyncType ] = useState( undefined ); + const [ title, setTitle ] = useState( '' ); const { postType, isNewPost } = useSelect( ( select ) => { const { getEditedPostAttribute, isCleanNewPost } = @@ -82,14 +84,6 @@ export function PostSyncStatusModal() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [] ); - const setSyncStatus = () => { - editPost( { - meta: { - wp_pattern_sync_status: syncType, - }, - } ); - }; - if ( postType !== 'wp_block' || ! isNewPost ) { return null; } @@ -98,7 +92,7 @@ export function PostSyncStatusModal() { <> { isModalOpen && ( { setIsModalOpen( false ); } } @@ -108,10 +102,24 @@ export function PostSyncStatusModal() { onSubmit={ ( event ) => { event.preventDefault(); setIsModalOpen( false ); - setSyncStatus(); + editPost( { + title, + meta: { + wp_pattern_sync_status: syncType, + }, + } ); } } > + - From 708ed659a5dd8b0d169476065caa6b7cdf975c21 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 5 Mar 2024 13:36:10 +0200 Subject: [PATCH 2/2] rename and move modal component --- .../components/init-pattern-modal/index.js | 117 ++++++++++++++++++ .../edit-post/src/components/layout/index.js | 4 +- packages/editor/src/components/index.js | 5 +- .../src/components/post-sync-status/index.js | 108 +--------------- 4 files changed, 121 insertions(+), 113 deletions(-) create mode 100644 packages/edit-post/src/components/init-pattern-modal/index.js diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js b/packages/edit-post/src/components/init-pattern-modal/index.js new file mode 100644 index 00000000000000..c9bca96be05f44 --- /dev/null +++ b/packages/edit-post/src/components/init-pattern-modal/index.js @@ -0,0 +1,117 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { __, _x } from '@wordpress/i18n'; +import { + Modal, + Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + ToggleControl, + TextControl, +} from '@wordpress/components'; +import { useEffect, useState } from '@wordpress/element'; +import { store as editorStore } from '@wordpress/editor'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ + +import { unlock } from '../../lock-unlock'; + +const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis ); + +export default function InitPatternModal() { + const { editPost } = useDispatch( editorStore ); + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const [ syncType, setSyncType ] = useState( undefined ); + const [ title, setTitle ] = useState( '' ); + + const { postType, isNewPost } = useSelect( ( select ) => { + const { getEditedPostAttribute, isCleanNewPost } = + select( editorStore ); + return { + postType: getEditedPostAttribute( 'type' ), + isNewPost: isCleanNewPost(), + }; + }, [] ); + + useEffect( () => { + if ( isNewPost && postType === 'wp_block' ) { + setIsModalOpen( true ); + } + // We only want the modal to open when the page is first loaded. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); + + if ( postType !== 'wp_block' || ! isNewPost ) { + return null; + } + + return ( + <> + { isModalOpen && ( + { + setIsModalOpen( false ); + } } + overlayClassName="reusable-blocks-menu-items__convert-modal" + > +
{ + event.preventDefault(); + setIsModalOpen( false ); + editPost( { + title, + meta: { + wp_pattern_sync_status: syncType, + }, + } ); + } } + > + + + + { + setSyncType( + ! syncType ? 'unsynced' : undefined + ); + } } + /> + + + + +
+ + ) } + + ); +} diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c17a16d11c81b1..27896946aad7c6 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -14,7 +14,6 @@ import { EditorKeyboardShortcutsRegister, EditorKeyboardShortcuts, EditorSnackbars, - PostSyncStatusModal, store as editorStore, privateApis as editorPrivateApis, } from '@wordpress/editor'; @@ -50,6 +49,7 @@ import VisualEditor from '../visual-editor'; import EditPostKeyboardShortcuts from '../keyboard-shortcuts'; import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal'; import EditPostPreferencesModal from '../preferences-modal'; +import InitPatternModal from '../init-pattern-modal'; import BrowserURL from '../browser-url'; import Header from '../header'; import SettingsSidebar from '../sidebar/settings-sidebar'; @@ -381,7 +381,7 @@ function Layout( { initialPost } ) { - + { ! isDistractionFree && } diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index 33a18e6f9a6ad2..ef7893fd2232ab 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -64,10 +64,7 @@ export { default as PostSlugCheck } from './post-slug/check'; export { default as PostSticky } from './post-sticky'; export { default as PostStickyCheck } from './post-sticky/check'; export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button'; -export { - default as PostSyncStatus, - PostSyncStatusModal, -} from './post-sync-status'; +export { default as PostSyncStatus } from './post-sync-status'; export { default as PostTaxonomies } from './post-taxonomies'; export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector'; export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector'; diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index bc4a712263c6a9..0ed10cd2482a22 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -1,27 +1,14 @@ /** * WordPress dependencies */ -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { __, _x } from '@wordpress/i18n'; -import { - Modal, - Button, - __experimentalHStack as HStack, - __experimentalVStack as VStack, - ToggleControl, - TextControl, -} from '@wordpress/components'; -import { useEffect, useState } from '@wordpress/element'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; /** * Internal dependencies */ import PostPanelRow from '../post-panel-row'; import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; - -const { ReusableBlocksRenameHint } = unlock( blockEditorPrivateApis ); export default function PostSyncStatus() { const { syncStatus, postType } = useSelect( ( select ) => { @@ -60,96 +47,3 @@ export default function PostSyncStatus() { ); } - -export function PostSyncStatusModal() { - const { editPost } = useDispatch( editorStore ); - const [ isModalOpen, setIsModalOpen ] = useState( false ); - const [ syncType, setSyncType ] = useState( undefined ); - const [ title, setTitle ] = useState( '' ); - - const { postType, isNewPost } = useSelect( ( select ) => { - const { getEditedPostAttribute, isCleanNewPost } = - select( editorStore ); - return { - postType: getEditedPostAttribute( 'type' ), - isNewPost: isCleanNewPost(), - }; - }, [] ); - - useEffect( () => { - if ( isNewPost && postType === 'wp_block' ) { - setIsModalOpen( true ); - } - // We only want the modal to open when the page is first loaded. - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); - - if ( postType !== 'wp_block' || ! isNewPost ) { - return null; - } - - return ( - <> - { isModalOpen && ( - { - setIsModalOpen( false ); - } } - overlayClassName="reusable-blocks-menu-items__convert-modal" - > -
{ - event.preventDefault(); - setIsModalOpen( false ); - editPost( { - title, - meta: { - wp_pattern_sync_status: syncType, - }, - } ); - } } - > - - - - { - setSyncType( - ! syncType ? 'unsynced' : undefined - ); - } } - /> - - - - -
- - ) } - - ); -}