@wordpress/patterns 1.2.0 → 1.3.0

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,16 @@
+export const PATTERN_TYPES = {
+	theme: 'pattern',
+	user: 'wp_block',
+};
+
+export const PATTERN_DEFAULT_CATEGORY = 'all-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,19 @@
 import { lock } from './lock-unlock';
 import CreatePatternModal from './components/create-pattern-modal';
 import PatternsMenuItems from './components';
+import {
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_CATEGORY,
+	PATTERN_CORE_SOURCES,
+	PATTERN_SYNC_TYPES,
+} from './constants';
 
 export const privateApis = {};
 lock( privateApis, {
 	CreatePatternModal,
 	PatternsMenuItems,
+	PATTERN_TYPES,
+	PATTERN_DEFAULT_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 ];
 }