Add pattern title in create modal in post editor (#59550)

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: carolinan <poena@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
WordPress · Mar 11, 2024 · 4e8563f · 4e8563f
1 parent 984ede0
commit 4e8563f
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 100 deletions.
diff --git a/packages/edit-post/src/components/init-pattern-modal/index.js 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 && (
+				<Modal
+					title={ __( 'Create pattern' ) }
+					onRequestClose={ () => {
+						setIsModalOpen( false );
+					} }
+					overlayClassName="reusable-blocks-menu-items__convert-modal"
+				>
+					<form
+						onSubmit={ ( event ) => {
+							event.preventDefault();
+							setIsModalOpen( false );
+							editPost( {
+								title,
+								meta: {
+									wp_pattern_sync_status: syncType,
+								},
+							} );
+						} }
+					>
+						<VStack spacing="5">
+							<TextControl
+								label={ __( 'Name' ) }
+								value={ title }
+								onChange={ setTitle }
+								placeholder={ __( 'My pattern' ) }
+								className="patterns-create-modal__name-input"
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+							/>
+							<ReusableBlocksRenameHint />
+							<ToggleControl
+								label={ _x(
+									'Synced',
+									'Option that makes an individual pattern synchronized'
+								) }
+								help={ __(
+									'Sync this pattern across multiple locations.'
+								) }
+								checked={ ! syncType }
+								onChange={ () => {
+									setSyncType(
+										! syncType ? 'unsynced' : undefined
+									);
+								} }
+							/>
+							<HStack justify="right">
+								<Button
+									variant="primary"
+									type="submit"
+									disabled={ ! title }
+									__experimentalIsFocusable
+								>
+									{ __( 'Create' ) }
+								</Button>
+							</HStack>
+						</VStack>
+					</form>
+				</Modal>
+			) }
+		</>
+	);
+}
diff --git 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';
@@ -51,6 +50,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';
@@ -382,7 +382,7 @@ function Layout( { initialPost } ) {
 			<EditPostPreferencesModal />
 			<KeyboardShortcutHelpModal />
 			<WelcomeGuide />
-			<PostSyncStatusModal />
+			<InitPatternModal />
 			<StartPageOptions />
 			<PluginArea onError={ onPluginAreaError } />
 			{ ! isDistractionFree && <SettingsSidebar /> }

diff --git 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
@@ -1,26 +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,
-} 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 ) => {
@@ -59,84 +47,3 @@ export default function PostSyncStatus() {
 		</PostPanelRow>
 	);
 }
-
-export function PostSyncStatusModal() {
-	const { editPost } = useDispatch( editorStore );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-	const [ syncType, setSyncType ] = useState( undefined );
-
-	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
-	}, [] );
-
-	const setSyncStatus = () => {
-		editPost( {
-			meta: {
-				wp_pattern_sync_status: syncType,
-			},
-		} );
-	};
-
-	if ( postType !== 'wp_block' || ! isNewPost ) {
-		return null;
-	}
-
-	return (
-		<>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Set pattern sync status' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-					} }
-					overlayClassName="reusable-blocks-menu-items__convert-modal"
-				>
-					<form
-						onSubmit={ ( event ) => {
-							event.preventDefault();
-							setIsModalOpen( false );
-							setSyncStatus();
-						} }
-					>
-						<VStack spacing="5">
-							<ReusableBlocksRenameHint />
-							<ToggleControl
-								label={ _x(
-									'Synced',
-									'Option that makes an individual pattern synchronized'
-								) }
-								help={ __(
-									'Sync this pattern across multiple locations.'
-								) }
-								checked={ ! syncType }
-								onChange={ () => {
-									setSyncType(
-										! syncType ? 'unsynced' : undefined
-									);
-								} }
-							/>
-							<HStack justify="right">
-								<Button variant="primary" type="submit">
-									{ __( 'Create' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}