On creating a new pattern, don't write to the pattern PHP file until you publish

wp-modules/app/js/src/components/Header/index.tsx

@@ -7,7 +7,7 @@ import { Button } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import getAdminUrl from '../../utils/getAdminUrl';
+import { patternManager } from '../../globals';
 import wpeLogoDefaultCropped from '../../../../img/WPE-LOGO-S-Default-Cropped.svg';
 
 export default function Header() {
@@ -27,9 +27,7 @@ export default function Header() {
 			<div className="header-container-inner">
 				<Button
 					variant="primary"
-					href={ getAdminUrl( {
-						action: 'create-new',
-					} ) }
+					href={ `${ patternManager.siteUrl }/wp-admin/post-new.php?post_type=pm_pattern` }
 				>
 					{ __( 'Create New Pattern', 'pattern-manager' ) }
 				</Button>

wp-modules/editor/css/src/index.scss

@@ -9,13 +9,10 @@
 	display: none !important;
 }
 
-/* When the save button is clicked, hide the pre-publish panel that pops open, as we handle saving in PM. */
-.editor-post-publish-panel {
-	display: none !important;
-}
-
+/* TODO: prevent pre-publish pattern from opening. */
 /* Hide the 'Save Draft' button in the pattern editor (appears after pattern is edited), as the save theme button handles it.*/
-button.components-button.editor-post-save-draft.is-tertiary {
+button.components-button.editor-post-save-draft.is-tertiary,
+[aria-label="Save draft"] {
 	display: none;
 }
 

wp-modules/editor/editor.php

@@ -45,6 +45,7 @@ function register_pattern_post_type() {
 			'supports'     => array(
 				'editor',
 				'custom-fields',
+				'title',
 			),
 			'labels'       => $labels,
 		)
@@ -60,16 +61,6 @@ function register_pattern_post_type() {
 		)
 	);
 
-	register_post_meta(
-		$post_type_key,
-		'title',
-		array(
-			'show_in_rest' => true,
-			'single'       => true,
-			'type'         => 'string',
-		)
-	);
-
 	register_post_meta(
 		$post_type_key,
 		'name',

wp-modules/editor/js/src/components/PatternManagerMetaControls/index.tsx

@@ -15,7 +15,7 @@ import { patternManager } from '../../globals';
 import usePostData from '../../hooks/usePostData';
 
 export default function PatternManagerMetaControls() {
-	const { postMeta } = usePostData();
+	const { postMeta, title } = usePostData();
 	const [ patternNames, setPatternNames ] = useState(
 		patternManager.patternNames.filter( ( name ) => {
 			return name !== postMeta.name;
@@ -31,6 +31,7 @@ export default function PatternManagerMetaControls() {
 		<div>
 			<TitlePanel
 				postMeta={ postMeta }
+				title={ title }
 				handleChange={ updatePostMeta }
 				patternNames={ patternNames }
 			/>

wp-modules/editor/js/src/components/SidebarPanels/TitlePanel.tsx

@@ -10,6 +10,7 @@ import convertToSlug from '../../utils/convertToSlug';
 
 import type { BaseSidebarProps } from './types';
 import type { Pattern, PostMeta } from '../../types';
+import usePatternData from '../../hooks/usePatternData';
 
 function isTitleTaken(
 	patternTitle: string,
@@ -20,12 +21,19 @@ function isTitleTaken(
 	return patternNames.includes( newSlug ) && newSlug !== currentSlug;
 }
 
+type Props = BaseSidebarProps & {
+	patternNames: Array< Pattern[ 'name' ] >;
+	title: string;
+};
+
 export default function TitlePanel( {
-	postMeta,
 	handleChange,
 	patternNames,
-}: BaseSidebarProps & { patternNames: Array< Pattern[ 'name' ] > } ) {
-	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
+	postMeta,
+	title,
+}: Props ) {
+	const { editPost, lockPostSaving, unlockPostSaving } =
+		useDispatch( 'core/editor' );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
 	return (
@@ -39,11 +47,12 @@ export default function TitlePanel( {
 					'Pattern Title Name Input (used for renaming the pattern)',
 					'pattern-manager'
 				) }
-				value={ postMeta.title }
+				value={ title }
 				onChange={ ( newTitle: PostMeta[ 'title' ] ) => {
-					handleChange( 'title', newTitle, {
-						name: convertToSlug( newTitle ),
+					editPost( {
+						title: newTitle,
 					} );
+					handleChange( 'name', convertToSlug( newTitle ) );
 
 					if ( ! newTitle ) {
 						lockPostSaving();

wp-modules/editor/js/src/hooks/usePostData.ts

@@ -7,6 +7,9 @@ export default function usePostData() {
 			( select: SelectQuery ) => ( {
 				postMeta:
 					select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
+				title: select( 'core/editor' ).getEditedPostAttribute(
+					'title'
+				),
 			} ),
 			[]
 		),

wp-modules/editor/js/src/utils/changeWords.ts

@@ -1,4 +1,7 @@
 export default function changeWords( translation: string, text: string ) {
+	if ( text === 'Publish' ) {
+		return 'Create Pattern';
+	}
 	if ( text === 'Update' ) {
 		return 'Update Pattern';
 	}

wp-modules/editor/model.php

@@ -26,11 +26,17 @@ function get_pattern_content_from_file( $post ) {
 		return;
 	}
 
-	if ( ! $post->post_title ) {
+	if ( ! $post->post_name ) {
 		return;
 	}
 
-	$post->post_content = get_pattern_by_name( $post->post_title )['content'] ?? '';
+	$pattern = get_pattern_by_name( $post->post_name );
+	if ( ! $pattern ) {
+		return;
+	}
+
+	$post->post_content = $pattern['content'];
+	$post->post_title   = $pattern['title'];
 }
 add_action( 'the_post', __NAMESPACE__ . '\get_pattern_content_from_file' );
 
@@ -45,17 +51,19 @@ function save_pattern_to_file( WP_Post $post ) {
 		return;
 	}
 
-	$pattern = get_pattern_by_name( $post->post_title );
-	if ( ! $pattern ) {
-		return;
-	}
+	$pattern = get_pattern_by_name( $post->post_name );
 
 	update_pattern(
 		array_merge(
-			$pattern,
+			$pattern ? $pattern : [],
 			[
 				'content' => $post->post_content,
-			]
+				'title'   => $post->post_title,
+				'name'    => $post->post_name,
+			],
+			$post->post_title
+				? [ 'title' => $post->post_title ]
+				: []
 		)
 	);
 
@@ -89,23 +97,23 @@ function save_metadata_to_pattern_file( $override, $post_id, $meta_key, $meta_va
 		return $override;
 	}
 
-	$pattern_name = $post->post_title;
-	$pattern      = get_pattern_by_name( $pattern_name );
-	if ( ! $pattern ) {
-		return $override;
-	}
-
 	// Only update the pattern if a registered meta key is being updated here (no need for core keys like _edit_lock).
 	$registered_meta_keys = array_keys( get_registered_meta_keys( 'post', get_pattern_post_type() ) );
 	if ( ! in_array( $meta_key, $registered_meta_keys, true ) ) {
 		return $override;
 	}
 
+	$pattern_name = $post->post_name;
+	$pattern      = get_pattern_by_name( $pattern_name );
+	if ( ! $pattern ) {
+		return $override;
+	}
+
 	if ( 'name' === $meta_key ) {
 		wp_update_post(
 			[
-				'ID'         => $post_id,
-				'post_title' => $meta_value,
+				'ID'        => $post_id,
+				'post_name' => $meta_value,
 			]
 		);
 
@@ -144,9 +152,7 @@ function get_metadata_from_pattern_file( $override, $post_id, $meta_key, $is_sin
 		return $override;
 	}
 
-	$pattern_name = $post->post_title;
-
-	$pattern = get_pattern_by_name( $pattern_name );
+	$pattern = get_pattern_by_name( $post->post_name );
 	if ( ! $pattern ) {
 		return $override;
 	}
@@ -175,24 +181,7 @@ function redirect_pattern_actions() {
 		$new_post = wp_insert_post(
 			[
 				'post_type'   => get_pattern_post_type(),
-				'post_title'  => sanitize_text_field( filter_input( INPUT_GET, 'name' ) ),
-				'post_status' => 'publish',
-			]
-		);
-
-		wp_safe_redirect(
-			get_edit_post_link( $new_post, 'direct_link' )
-		);
-	}
-
-	if ( 'create-new' === filter_input( INPUT_GET, 'action' ) ) {
-		$new_pattern = get_new_pattern( get_theme_patterns() );
-
-		update_pattern( $new_pattern );
-		$new_post = wp_insert_post(
-			[
-				'post_type'   => get_pattern_post_type(),
-				'post_title'  => $new_pattern['name'],
+				'post_name'   => sanitize_text_field( filter_input( INPUT_GET, 'name' ) ),
 				'post_status' => 'publish',
 			]
 		);
@@ -219,7 +208,8 @@ function redirect_pattern_actions() {
 		$new_post = wp_insert_post(
 			[
 				'post_type'    => get_pattern_post_type(),
-				'post_title'   => $new_pattern['name'],
+				'post_title'   => $new_pattern['title'],
+				'post_name'    => $new_pattern['name'],
 				'post_status'  => 'publish',
 				'post_content' => '',
 			]
@@ -250,24 +240,6 @@ function add_active_theme_to_heartbeat( $response, $data, $screen_id ) {
 }
 add_filter( 'heartbeat_received', __NAMESPACE__ . '\add_active_theme_to_heartbeat', 10, 3 );
 
-/**
- * Filters the fields used in post revisions.
- *
- * If the revision is for a pattern post,
- * don't restore the title of the revision,
- * as the title is where the pattern name is stored.
- *
- * @param array $fields The fields to filter.
- * @param WP_Post|array $post The post to filter for.
- * @return array The filtered fields.
- */
-function ignore_title_field_in_revisions( $fields, $post ) {
-	return isset( $post->post_parent ) && get_pattern_post_type() === get_post_type( $post->post_parent )
-		? array_diff_key( $fields, [ 'post_title' => null ] )
-		: $fields;
-}
-add_filter( '_wp_post_revision_fields', __NAMESPACE__ . '\ignore_title_field_in_revisions', 10, 2 );
-
 /**
  * Deletes all pm_pattern posts.
  */
@@ -283,3 +255,40 @@ function delete_pattern_posts() {
 	}
 }
 add_action( 'after_switch_theme', __NAMESPACE__ . '\delete_pattern_posts' );
+
+/**
+ * Gets the title for a new pattern post.
+ *
+ * @param string $post_title The post title.
+ * @param WP_Post $post The post.
+ * @return string
+ */
+function get_default_title( $post_title, $post ) {
+	return isset( $post->post_type ) && get_pattern_post_type() === $post->post_type
+		? get_new_pattern( get_theme_patterns() )['title']
+		: $post_title;
+}
+add_filter( 'default_title', __NAMESPACE__ . '\get_default_title', 10, 2 );
+
+/**
+ * Overrides the longer ->post_name that WP gives a pattern.
+ *
+ * The ->post_name is where we store the pattern name.
+ * So it needs to be in sync with the ->post_title.
+ * It can't be something like foo-4 if the title is 'Foo'.
+ *
+ * @param string $slug          The post slug.
+ * @param int    $post_ID       Post ID.
+ * @param string $post_status   The post status.
+ * @param string $post_type     Post type.
+ * @param int    $post_parent   Post parent ID
+ * @param string $original_slug The original post slug.
+ * @return string The simpler pattern name.
+ */
+function get_simpler_pattern_name( $slug, $post_ID, $post_status, $post_type, $post_parent, $original_slug ) {
+	return get_pattern_post_type() === $post_type
+		? sanitize_title( $original_slug ) // TODO: port convertToSlug() to PHP and make this like convertToSlug( $original_slug ).
+		: $slug;
+}
+
+add_filter( 'wp_unique_post_slug', __NAMESPACE__ . '\get_simpler_pattern_name', 10, 6 );