@wordpress/patterns 1.2.1-next.5a1d1283.0 → 1.3.1

package/src/components/create-pattern-modal.js

@@ -10,56 +10,97 @@ import {
 	ToggleControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useCallback } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
 
-export const USER_PATTERN_CATEGORY = 'my-patterns';
-
-export const SYNC_TYPES = {
-	full: undefined,
-	unsynced: 'unsynced',
-};
+/**
+ * Internal dependencies
+ */
+import { PATTERN_DEFAULT_CATEGORY, PATTERN_SYNC_TYPES } from '../constants';
 
 /**
  * Internal dependencies
  */
-import { store } from '../store';
+import { store as patternsStore } from '../store';
+import CategorySelector, { CATEGORY_SLUG } from './category-selector';
+import { unlock } from '../lock-unlock';
 
 export default function CreatePatternModal( {
 	onSuccess,
 	onError,
-	clientIds,
+	content,
 	onClose,
 	className = 'patterns-menu-items__convert-modal',
 } ) {
-	const [ syncType, setSyncType ] = useState( SYNC_TYPES.full );
+	const [ syncType, setSyncType ] = useState( PATTERN_SYNC_TYPES.full );
+	const [ categoryTerms, setCategoryTerms ] = useState( [] );
 	const [ title, setTitle ] = useState( '' );
-	const { __experimentalCreatePattern: createPattern } = useDispatch( store );
-
+	const [ isSaving, setIsSaving ] = useState( false );
+	const { createPattern } = unlock( useDispatch( patternsStore ) );
+	const { saveEntityRecord, invalidateResolution } = useDispatch( coreStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const onCreate = useCallback(
-		async function ( patternTitle, sync ) {
-			try {
-				const newPattern = await createPattern(
-					patternTitle,
-					sync,
-					clientIds
-				);
-				onSuccess( {
-					pattern: newPattern,
-					categoryId: USER_PATTERN_CATEGORY,
-				} );
-			} catch ( error ) {
-				createErrorNotice( error.message, {
-					type: 'snackbar',
-					id: 'convert-to-pattern-error',
-				} );
-				onError();
+
+	async function onCreate( patternTitle, sync ) {
+		if ( ! title || isSaving ) {
+			return;
+		}
+
+		try {
+			setIsSaving( true );
+			const categories = await Promise.all(
+				categoryTerms.map( ( termName ) =>
+					findOrCreateTerm( termName )
+				)
+			);
+
+			const newPattern = await createPattern(
+				patternTitle,
+				sync,
+				typeof content === 'function' ? content() : content,
+				categories
+			);
+			onSuccess( {
+				pattern: newPattern,
+				categoryId: PATTERN_DEFAULT_CATEGORY,
+			} );
+		} catch ( error ) {
+			createErrorNotice( error.message, {
+				type: 'snackbar',
+				id: 'convert-to-pattern-error',
+			} );
+			onError();
+		} finally {
+			setIsSaving( false );
+			setCategoryTerms( [] );
+			setTitle( '' );
+		}
+	}
+
+	/**
+	 * @param {string} term
+	 * @return {Promise<number>} The pattern category id.
+	 */
+	async function findOrCreateTerm( term ) {
+		try {
+			const newTerm = await saveEntityRecord(
+				'taxonomy',
+				CATEGORY_SLUG,
+				{ name: term },
+				{ throwOnError: true }
+			);
+			invalidateResolution( 'getUserPatternCategories' );
+			return newTerm.id;
+		} catch ( error ) {
+			if ( error.code !== 'term_exists' ) {
+				throw error;
 			}
-		},
-		[ createPattern, clientIds, onSuccess, createErrorNotice, onError ]
-	);
+
+			return error.data.term_id;
+		}
+	}
+
 	return (
 		<Modal
 			title={ __( 'Create pattern' ) }
@@ -73,7 +114,6 @@ export default function CreatePatternModal( {
 				onSubmit={ ( event ) => {
 					event.preventDefault();
 					onCreate( title, syncType );
-					setTitle( '' );
 				} }
 			>
 				<VStack spacing="5">
@@ -83,19 +123,23 @@ export default function CreatePatternModal( {
 						value={ title }
 						onChange={ setTitle }
 						placeholder={ __( 'My pattern' ) }
+						className="patterns-create-modal__name-input"
+					/>
+					<CategorySelector
+						values={ categoryTerms }
+						onChange={ setCategoryTerms }
 					/>
-
 					<ToggleControl
 						label={ __( 'Synced' ) }
 						help={ __(
 							'Editing the pattern will update it anywhere it is used.'
 						) }
-						checked={ ! syncType }
+						checked={ syncType === PATTERN_SYNC_TYPES.full }
 						onChange={ () => {
 							setSyncType(
-								syncType === SYNC_TYPES.full
-									? SYNC_TYPES.unsynced
-									: SYNC_TYPES.full
+								syncType === PATTERN_SYNC_TYPES.full
+									? PATTERN_SYNC_TYPES.unsynced
+									: PATTERN_SYNC_TYPES.full
 							);
 						} }
 					/>
@@ -110,7 +154,12 @@ export default function CreatePatternModal( {
 							{ __( 'Cancel' ) }
 						</Button>
 
-						<Button variant="primary" type="submit">
+						<Button
+							variant="primary"
+							type="submit"
+							aria-disabled={ ! title || isSaving }
+							isBusy={ isSaving }
+						>
 							{ __( 'Create' ) }
 						</Button>
 					</HStack>

package/src/components/pattern-convert-button.js

@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
+import {
+	hasBlockSupport,
+	isReusableBlock,
+	createBlock,
+	serialize,
+} from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useCallback } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
 import { symbol } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -13,7 +18,9 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import { store as patternsStore } from '../store';
 import CreatePatternModal from './create-pattern-modal';
+import { unlock } from '../lock-unlock';
 
 /**
  * Menu control to convert block(s) to a pattern block.
@@ -25,6 +32,10 @@ import CreatePatternModal from './create-pattern-modal';
  */
 export default function PatternConvertButton( { clientIds, rootClientId } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	// Ignore reason: false positive of the lint rule.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { setEditingPattern } = unlock( useDispatch( patternsStore ) );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const canConvert = useSelect(
 		( select ) => {
@@ -74,12 +85,24 @@ export default function PatternConvertButton( { clientIds, rootClientId } ) {
 		},
 		[ clientIds, rootClientId ]
 	);
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const getContent = useCallback(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		[ getBlocksByClientId, clientIds ]
+	);
 
 	if ( ! canConvert ) {
 		return null;
 	}
 
 	const handleSuccess = ( { pattern } ) => {
+		const newBlock = createBlock( 'core/block', {
+			ref: pattern.id,
+		} );
+
+		replaceBlocks( clientIds, newBlock );
+		setEditingPattern( newBlock.clientId, true );
+
 		createSuccessNotice(
 			pattern.wp_pattern_sync_status === 'unsynced'
 				? sprintf(
@@ -111,7 +134,7 @@ export default function PatternConvertButton( { clientIds, rootClientId } ) {
 			</MenuItem>
 			{ isModalOpen && (
 				<CreatePatternModal
-					clientIds={ clientIds }
+					content={ getContent }
 					onSuccess={ ( pattern ) => {
 						handleSuccess( pattern );
 					} }

package/src/components/patterns-manage-button.js

@@ -12,7 +12,8 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { store as editorStore } from '../store';
+import { store as patternsStore } from '../store';
+import { unlock } from '../lock-unlock';
 
 function PatternsManageButton( { clientId } ) {
 	const { canRemove, isVisible, innerBlockCount, managePatternsUrl } =
@@ -51,8 +52,11 @@ function PatternsManageButton( { clientId } ) {
 			[ clientId ]
 		);
 
-	const { __experimentalConvertSyncedPatternToStatic: convertBlockToStatic } =
-		useDispatch( editorStore );
+	// Ignore reason: false positive of the lint rule.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { convertSyncedPatternToStatic } = unlock(
+		useDispatch( patternsStore )
+	);
 
 	if ( ! isVisible ) {
 		return null;
@@ -64,7 +68,9 @@ function PatternsManageButton( { clientId } ) {
 				{ __( 'Manage patterns' ) }
 			</MenuItem>
 			{ canRemove && (
-				<MenuItem onClick={ () => convertBlockToStatic( clientId ) }>
+				<MenuItem
+					onClick={ () => convertSyncedPatternToStatic( clientId ) }
+				>
 					{ innerBlockCount > 1
 						? __( 'Detach patterns' )
 						: __( 'Detach pattern' ) }

package/src/components/style.scss

@@ -1,3 +1,10 @@
 .patterns-menu-items__convert-modal {
 	z-index: z-index(".patterns-menu-items__convert-modal");
+	.patterns-menu-items__convert-modal-categories {
+		max-width: 300px;
+	}
+}
+
+.patterns-create-modal__name-input input[type="text"] {
+	min-height: 34px;
 }

package/src/constants.js

@@ -0,0 +1,17 @@
+export const PATTERN_TYPES = {
+	theme: 'pattern',
+	user: 'wp_block',
+};
+
+export const PATTERN_DEFAULT_CATEGORY = 'all-patterns';
+export const PATTERN_USER_CATEGORY = 'my-patterns';
+export const PATTERN_CORE_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+	'pattern-directory/theme',
+];
+export const PATTERN_SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};

package/src/index.js

@@ -1,6 +1,5 @@
 /**
  * Internal dependencies
  */
-import './store';
-
+export { store } from './store';
 export * from './private-apis';

package/src/private-apis.js

@@ -4,9 +4,21 @@
 import { lock } from './lock-unlock';
 import CreatePatternModal from './components/create-pattern-modal';
 import PatternsMenuItems from './components';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	PATTERN_CORE_SOURCES,
+	PATTERN_SYNC_TYPES,
+} from './constants';
 
 export const privateApis = {};
 lock( privateApis, {
 	CreatePatternModal,
 	PatternsMenuItems,
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_USER_CATEGORY,
+	PATTERN_CORE_SOURCES,
+	PATTERN_SYNC_TYPES,
 } );

package/src/store/actions.js

@@ -2,22 +2,28 @@
  * WordPress dependencies
  */
 
-import { parse, serialize, createBlock } from '@wordpress/blocks';
+import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { PATTERN_SYNC_TYPES } from '../constants';
+
 /**
  * Returns a generator converting one or more static blocks into a pattern, or creating a new empty pattern.
  *
- * @param {string}             title     Pattern title.
- * @param {'full'|'unsynced'}  syncType  They way block is synced, 'full' or 'unsynced'.
- * @param {string[]|undefined} clientIds Optional client IDs of blocks to convert to pattern.
+ * @param {string}             title        Pattern title.
+ * @param {'full'|'unsynced'}  syncType     They way block is synced, 'full' or 'unsynced'.
+ * @param {string|undefined}   [content]    Optional serialized content of blocks to convert to pattern.
+ * @param {number[]|undefined} [categories] Ids of any selected categories.
  */
-export const __experimentalCreatePattern =
-	( title, syncType, clientIds ) =>
-	async ( { registry, dispatch } ) => {
+export const createPattern =
+	( title, syncType, content, categories ) =>
+	async ( { registry } ) => {
 		const meta =
-			syncType === 'unsynced'
+			syncType === PATTERN_SYNC_TYPES.unsynced
 				? {
 						wp_pattern_sync_status: syncType,
 				  }
@@ -25,33 +31,55 @@ export const __experimentalCreatePattern =
 
 		const reusableBlock = {
 			title,
-			content: clientIds
-				? serialize(
-						registry
-							.select( blockEditorStore )
-							.getBlocksByClientId( clientIds )
-				  )
-				: undefined,
+			content,
 			status: 'publish',
 			meta,
+			wp_pattern_category: categories,
 		};
 
 		const updatedRecord = await registry
 			.dispatch( coreStore )
 			.saveEntityRecord( 'postType', 'wp_block', reusableBlock );
 
-		if ( syncType === 'unsynced' || ! clientIds ) {
-			return updatedRecord;
+		return updatedRecord;
+	};
+
+/**
+ * Create a pattern from a JSON file.
+ * @param {File}               file         The JSON file instance of the pattern.
+ * @param {number[]|undefined} [categories] Ids of any selected categories.
+ */
+export const createPatternFromFile =
+	( file, categories ) =>
+	async ( { dispatch } ) => {
+		const fileContent = await file.text();
+		/** @type {import('./types').PatternJSON} */
+		let parsedContent;
+		try {
+			parsedContent = JSON.parse( fileContent );
+		} catch ( e ) {
+			throw new Error( 'Invalid JSON file' );
+		}
+		if (
+			parsedContent.__file !== 'wp_block' ||
+			! parsedContent.title ||
+			! parsedContent.content ||
+			typeof parsedContent.title !== 'string' ||
+			typeof parsedContent.content !== 'string' ||
+			( parsedContent.syncStatus &&
+				typeof parsedContent.syncStatus !== 'string' )
+		) {
+			throw new Error( 'Invalid Pattern JSON file' );
 		}
 
-		const newBlock = createBlock( 'core/block', {
-			ref: updatedRecord.id,
-		} );
-		registry
-			.dispatch( blockEditorStore )
-			.replaceBlocks( clientIds, newBlock );
-		dispatch.__experimentalSetEditingPattern( newBlock.clientId, true );
-		return updatedRecord;
+		const pattern = await dispatch.createPattern(
+			parsedContent.title,
+			parsedContent.syncStatus,
+			parsedContent.content,
+			categories
+		);
+
+		return pattern;
 	};
 
 /**
@@ -59,7 +87,7 @@ export const __experimentalCreatePattern =
  *
  * @param {string} clientId The client ID of the block to attach.
  */
-export const __experimentalConvertSyncedPatternToStatic =
+export const convertSyncedPatternToStatic =
 	( clientId ) =>
 	( { registry } ) => {
 		const oldBlock = registry
@@ -90,7 +118,7 @@ export const __experimentalConvertSyncedPatternToStatic =
  * @param {boolean} isEditing Whether the block should be in editing state.
  * @return {Object} Action descriptor.
  */
-export function __experimentalSetEditingPattern( clientId, isEditing ) {
+export function setEditingPattern( clientId, isEditing ) {
 	return {
 		type: 'SET_EDITING_PATTERN',
 		clientId,

package/src/store/index.js

@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
 import * as selectors from './selectors';
+import { unlock } from '../lock-unlock';
 
 /**
  * Post editor data store configuration.
@@ -20,8 +21,6 @@ import * as selectors from './selectors';
  */
 export const storeConfig = {
 	reducer,
-	selectors,
-	actions,
 };
 
 /**
@@ -36,3 +35,5 @@ export const store = createReduxStore( STORE_NAME, {
 } );
 
 register( store );
+unlock( store ).registerPrivateActions( actions );
+unlock( store ).registerPrivateSelectors( selectors );

package/src/store/selectors.js

@@ -5,6 +5,6 @@
  * @param {number} clientId the clientID of the block.
  * @return {boolean} Whether the pattern is in the editing state.
  */
-export function __experimentalIsEditingPattern( state, clientId ) {
+export function isEditingPattern( state, clientId ) {
 	return state.isEditingPattern[ clientId ];
 }