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

…you publish (#78) * On creating a new pattern, don't write to the pattern .php file until you publis * Fix phpcs error * Remove unit tests for deleted function
studiopress · Mar 3, 2023 · 5e5f69b · 5e5f69b
1 parent dc5b5bd
commit 5e5f69b
Show file tree

Hide file tree

Showing 21 changed files with 1,044 additions and 491 deletions.
diff --git a/wp-modules/app/js/src/components/Header/index.tsx b/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>

diff --git a/wp-modules/app/js/src/components/Patterns/PatternGridActions.tsx b/wp-modules/app/js/src/components/Patterns/PatternGridActions.tsx
@@ -6,11 +6,9 @@ import { Button } from '@wordpress/components';
 // Hooks
 import usePmContext from '../../hooks/usePmContext';
 
-// Utils
-import getAdminUrl from '../../utils/getAdminUrl';
-
 // Types
 import type { Pattern } from '../../types';
+import { patternManager } from '../../globals';
 
 type Props = {
 	patternData: Pattern;
@@ -51,10 +49,7 @@ export default function PatternGridActions( { patternData }: Props ) {
 						__( 'Duplicate %1$s', 'pattern-manager' ),
 						patternData.title
 					) }
-					href={ getAdminUrl( {
-						action: 'duplicate',
-						name: patternData.name,
-					} ) }
+					href={ `${ patternManager.siteUrl }/wp-admin/admin.php?post_type=pm_pattern&action=duplicate&name=${ patternData.name }` }
 				>
 					<Icon
 						className="item-action-icon"

diff --git a/wp-modules/app/js/src/utils/getAdminUrl.ts b/wp-modules/app/js/src/utils/getAdminUrl.ts
diff --git a/wp-modules/editor/css/src/index.scss b/wp-modules/editor/css/src/index.scss
@@ -9,12 +9,7 @@
 	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;
-}
-
-/* Hide the 'Save Draft' button in the pattern editor (appears after pattern is edited), as the save theme button handles it.*/
+/* Hide the 'Save Draft' button in the pattern editor (appears after pattern is published), as the 'Update' button handles it. */
 button.components-button.editor-post-save-draft.is-tertiary {
 	display: none;
 }

diff --git a/wp-modules/editor/editor.php b/wp-modules/editor/editor.php
@@ -28,10 +28,11 @@
 function register_pattern_post_type() {
 	$post_type_key = get_pattern_post_type();
 	$labels        = array(
-		'name'          => __( 'Patterns', 'pattern-manager' ),
-		'singular_name' => __( 'Pattern', 'pattern-manager' ),
-		'add_new_item'  => __( 'Pattern Editor', 'pattern-manager' ),
-		'item_updated'  => __( 'Pattern saved to your theme directory', 'pattern-manager' ),
+		'name'           => __( 'Patterns', 'pattern-manager' ),
+		'singular_name'  => __( 'Pattern', 'pattern-manager' ),
+		'add_new_item'   => __( 'Pattern Editor', 'pattern-manager' ),
+		'item_published' => __( 'Pattern created', 'pattern-manager' ),
+		'item_updated'   => __( 'Pattern saved to your theme directory', 'pattern-manager' ),
 	);
 
 	register_post_type(
@@ -45,21 +46,12 @@ function register_pattern_post_type() {
 			'supports'     => array(
 				'editor',
 				'custom-fields',
+				'title',
 			),
 			'labels'       => $labels,
 		)
 	);
 
-	register_post_meta(
-		$post_type_key,
-		'title',
-		array(
-			'show_in_rest' => true,
-			'single'       => true,
-			'type'         => 'string',
-		)
-	);
-
 	register_post_meta(
 		$post_type_key,
 		'name',
@@ -87,6 +79,7 @@ function register_pattern_post_type() {
 			'show_in_rest' => true,
 			'single'       => true,
 			'type'         => 'boolean',
+			'default'      => true,
 		)
 	);
 

diff --git a/wp-modules/editor/js/src/components/PatternManagerMetaControls/index.tsx b/wp-modules/editor/js/src/components/PatternManagerMetaControls/index.tsx
@@ -13,10 +13,10 @@ import {
 import usePatternData from '../../hooks/usePatternData';
 import useSave from '../../hooks/useSave';
 import { patternManager } from '../../globals';
-import usePostData from '../../hooks/usePostData';
+import useEditedPostData from '../../hooks/useEditedPostData';
 
 export default function PatternManagerMetaControls() {
-	const { postMeta } = usePostData();
+	const { postMeta, title } = useEditedPostData();
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 	const [ patternNames, setPatternNames ] = useState(
 		patternManager.patternNames.filter( ( name ) => {
@@ -37,6 +37,7 @@ export default function PatternManagerMetaControls() {
 				errorMessage={ errorMessage }
 				setErrorMessage={ setErrorMessage }
 				patternNames={ patternNames }
+				title={ title }
 			/>
 			<CategoriesPanel
 				postMeta={ postMeta }

diff --git a/wp-modules/editor/js/src/components/SidebarPanels/TitlePanel.tsx b/wp-modules/editor/js/src/components/SidebarPanels/TitlePanel.tsx
@@ -20,16 +20,19 @@ function isTitleTaken(
 }
 
 export default function TitlePanel( {
-	postMeta,
 	handleChange,
 	errorMessage,
 	setErrorMessage,
 	patternNames,
+	postMeta,
+	title,
 }: BaseSidebarProps &
-	Pick< AdditionalSidebarProps, 'errorMessage' | 'setErrorMessage' > & {
-		patternNames: Array< Pattern[ 'name' ] >;
-	} ) {
-	const { lockPostSaving, unlockPostSaving } = useDispatch( 'core/editor' );
+	Pick<
+		AdditionalSidebarProps,
+		'errorMessage' | 'patternNames' | 'setErrorMessage' | 'title'
+	> ) {
+	const { editPost, lockPostSaving, unlockPostSaving } =
+		useDispatch( 'core/editor' );
 
 	return (
 		<PluginDocumentSettingPanel
@@ -42,11 +45,10 @@ 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();

diff --git a/wp-modules/editor/js/src/components/SidebarPanels/types.ts b/wp-modules/editor/js/src/components/SidebarPanels/types.ts
@@ -1,5 +1,5 @@
 import usePatternData from '../../hooks/usePatternData';
-import { PostMeta } from '../../types';
+import { Pattern, PostMeta } from '../../types';
 
 import type { Dispatch, SetStateAction } from 'react';
 
@@ -17,5 +17,7 @@ export type AdditionalSidebarProps = {
 	categories: ReturnType< typeof usePatternData >[ 'categories' ];
 	postTypes: ReturnType< typeof usePatternData >[ 'postTypes' ];
 	errorMessage: string;
+	patternNames: Array< Pattern[ 'name' ] >;
 	setErrorMessage: Dispatch< SetStateAction< string > >;
+	title: string;
 };
diff --git a/wp-modules/editor/js/src/hooks/useEditedPostData.ts b/wp-modules/editor/js/src/hooks/useEditedPostData.ts
@@ -0,0 +1,23 @@
+import { useSelect } from '@wordpress/data';
+import { PostMeta, SelectQuery } from '../types';
+
+type UseEditedPostData = {
+	postMeta: PostMeta;
+	title: string;
+};
+
+export default function useEditedPostData(): UseEditedPostData {
+	// @ts-expect-error if @wordpress/editor store is typed, pass it to select() instead of the string.
+	return {
+		...useSelect(
+			( select: SelectQuery ) => ( {
+				postMeta:
+					select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
+				title: select( 'core/editor' ).getEditedPostAttribute(
+					'title'
+				),
+			} ),
+			[]
+		),
+	};
+}
diff --git a/wp-modules/editor/js/src/hooks/usePostData.ts b/wp-modules/editor/js/src/hooks/usePostData.ts
diff --git a/wp-modules/editor/js/src/index.js b/wp-modules/editor/js/src/index.js
@@ -1,4 +1,5 @@
 import '../../css/src/index.scss';
+import { dispatch } from '@wordpress/data';
 import { addAction, addFilter } from '@wordpress/hooks';
 import { registerPlugin } from '@wordpress/plugins';
 import BackButton from './components/BackButton';
@@ -22,3 +23,5 @@ addAction(
 	'pattern-manager/checkActiveTheme',
 	receiveActiveTheme
 );
+
+dispatch( 'core/editor' ).disablePublishSidebar();
diff --git a/wp-modules/editor/js/src/types.ts b/wp-modules/editor/js/src/types.ts
@@ -14,7 +14,7 @@ export type PostMeta = {
 };
 
 export type SelectQuery = ( dataStore: string ) => {
-	getEditedPostAttribute: ( postAttribute: string ) => PostMeta;
+	getEditedPostAttribute: ( postAttribute: string ) => unknown;
 	getEditedPostContent: () => string;
 	isEditedPostDirty: () => boolean;
 	getPostTypes: ( {

diff --git a/wp-modules/editor/js/src/utils/changeWords.ts b/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';
 	}