Allow adding new categories in Editor UI

wp-modules/editor/editor.php

@@ -174,6 +174,24 @@ function register_pattern_post_type() {
 			'default'      => get_pattern_defaults()['keywords'],
 		)
 	);
+
+	register_post_meta(
+		$post_type_key,
+		'customCategories',
+		array(
+			'show_in_rest' => array(
+				'schema' => array(
+					'type'  => 'array',
+					'items' => array(
+						'type' => 'string',
+					),
+				),
+			),
+			'single'       => true,
+			'type'         => 'array',
+			'default'      => [],
+		)
+	);
 }
 add_action( 'init', __NAMESPACE__ . '\register_pattern_post_type' );
 
@@ -263,13 +281,14 @@ function enqueue_meta_fields_in_editor() {
 		'pattern_manager_post_meta',
 		'patternManager',
 		[
-			'activeTheme'  => basename( get_stylesheet_directory() ),
-			'apiEndpoints' => array(
+			'activeTheme'       => basename( get_stylesheet_directory() ),
+			'apiEndpoints'      => array(
 				'getPatternNamesEndpoint' => get_rest_url( false, 'pattern-manager/v1/get-pattern-names/' ),
 			),
-			'apiNonce'     => wp_create_nonce( 'wp_rest' ),
-			'patternNames' => \PatternManager\PatternDataHandlers\get_pattern_names(),
-			'siteUrl'      => get_bloginfo( 'url' ),
+			'apiNonce'          => wp_create_nonce( 'wp_rest' ),
+			'patternNames'      => \PatternManager\PatternDataHandlers\get_pattern_names(),
+			'siteUrl'           => get_bloginfo( 'url' ),
+			'patternCategories' => \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
 		]
 	);
 

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

@@ -49,6 +49,7 @@ export default function PatternManagerMetaControls() {
 			<CategoriesPanel
 				categories={ postMeta.categories }
 				categoryOptions={ queriedCategories }
+				customCategories={ postMeta.customCategories }
 				handleChange={ updatePostMeta }
 			/>
 			<KeywordsPanel

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

@@ -1,7 +1,8 @@
 import { __ } from '@wordpress/i18n';
 import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
 import { Spinner } from '@wordpress/components';
-import Select from 'react-select';
+import Creatable from 'react-select/creatable';
+import convertToSlug from '../../utils/convertToSlug';
 
 import type { BaseSidebarProps, AdditionalSidebarProps } from './types';
 
@@ -12,36 +13,79 @@ import type { BaseSidebarProps, AdditionalSidebarProps } from './types';
 export default function CategoriesPanel( {
 	categories,
 	categoryOptions,
+	customCategories,
 	handleChange,
-}: BaseSidebarProps< 'categories' > &
+}: BaseSidebarProps< 'categories' | 'customCategories' > &
 	AdditionalSidebarProps< 'categoryOptions' > ) {
+	const combinedSelectedCategories = [
+		...customCategories.filter( ( categoryTitle ) =>
+			categories.includes( convertToSlug( categoryTitle ) )
+		),
+		...categories,
+	];
+
 	return (
 		<PluginDocumentSettingPanel
 			name="patternmanager-pattern-editor-pattern-categories"
 			title={ __( 'Pattern Categories', 'pattern-manager' ) }
 		>
 			{ categoryOptions ? (
-				<Select
+				<Creatable
 					isMulti
 					isClearable
 					closeMenuOnSelect={ false }
 					aria-label={ __(
 						'Add Pattern Categories',
 						'pattern-manager'
 					) }
-					value={ categories?.map( ( category ) =>
-						categoryOptions.find(
-							( matchedCategory ) =>
-								matchedCategory.value === category
-						)
+					value={ combinedSelectedCategories.reduce(
+						( acc, categoryName ) =>
+							! acc.includes( categoryName )
+								? [
+										...acc,
+										categoryOptions.find(
+											( matchedCategory ) =>
+												matchedCategory.value ===
+												categoryName
+										),
+								  ]
+								: acc,
+						[]
 					) }
 					options={ categoryOptions }
 					onChange={ ( categorySelections ) => {
+						const selections = categorySelections.map(
+							( category ) => category.value
+						);
+
+						const customCategorySelections = categoryOptions.reduce(
+							( acc, category ) => {
+								const customCategoryFound =
+									selections.includes( category.value ) &&
+									category.pm_meta &&
+									category.pm_meta === 'pm_custom_category';
+
+								return customCategoryFound
+									? [ ...acc, category.label ]
+									: acc;
+							},
+							[]
+						);
+
+						handleChange( 'categories', selections, {
+							customCategories: customCategorySelections,
+						} );
+					} }
+					onCreateOption={ ( newCategoryTitle ) => {
 						handleChange(
-							'categories',
-							categorySelections.map(
-								( category ) => category.value
-							)
+							'customCategories',
+							[ ...customCategories, newCategoryTitle ],
+							{
+								categories: [
+									...categories,
+									convertToSlug( newCategoryTitle ),
+								],
+							}
 						);
 					} }
 					menuPlacement="auto"

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

@@ -3,6 +3,8 @@ import sortAlphabetically from '../utils/sortAlphabetically';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
 import { PostMeta, SelectQuery } from '../types';
+import { patternManager } from '../globals';
+import convertToSlug from '../utils/convertToSlug';
 
 export default function usePatternData( postMeta: PostMeta ) {
 	const { editPost } = useDispatch( 'core/editor' );
@@ -57,18 +59,44 @@ export default function usePatternData( postMeta: PostMeta ) {
 
 	/**
 	 * Alphabetized block pattern categories for the site editor, mapped for react-select.
+	 *
+	 * Using categories from app hydration instead of select( 'core' ).getBlockPatternCategories().
+	 * Otherwise, custom fields (such as `pm_meta`) are not included in the result.
 	 */
-	const categories = useSelect( ( select: SelectQuery ) => {
-		return sortAlphabetically(
-			select( 'core' )
-				.getBlockPatternCategories()
-				.map( ( category ) => ( {
-					label: category.label,
-					value: category.name,
-				} ) ),
-			'label'
-		);
-	}, [] );
+	const categories = sortAlphabetically(
+		patternManager.patternCategories.map( ( category ) => ( {
+			label: category.label,
+			value: category.name,
+			...( category.pm_meta && {
+				pm_meta: category.pm_meta,
+			} ),
+		} ) ),
+		'label'
+	);
+
+	/**
+	 * Registered and newly added custom categories, combined.
+	 * Needed for including new categories before the post is saved.
+	 */
+	const combinedCategories: typeof categories = [
+		...postMeta.customCategories.reduce( ( acc, categoryLabel ) => {
+			const missingCategory = ! categories.some(
+				( queriedCategory ) => queriedCategory.label === categoryLabel
+			);
+
+			return missingCategory
+				? [
+						...acc,
+						{
+							label: categoryLabel,
+							value: convertToSlug( categoryLabel ),
+							pm_meta: 'pm_custom_category',
+						},
+				  ]
+				: acc;
+		}, [] ),
+		...categories,
+	];
 
 	/**
 	 * The alphabetized list of transformable block types, mapped for react-select.
@@ -195,7 +223,7 @@ export default function usePatternData( postMeta: PostMeta ) {
 
 	return {
 		queriedBlockTypes: blockTypes,
-		queriedCategories: categories,
+		queriedCategories: combinedCategories,
 		queriedPostTypes: postTypes,
 		updatePostMeta,
 		updatePostMetaMulti,

wp-modules/editor/js/src/types.ts

@@ -3,6 +3,7 @@
 export type PostMeta = {
 	blockTypes: string[];
 	categories: string[];
+	customCategories: string[];
 	description: string;
 	inserter: boolean;
 	keywords: string[];
@@ -16,7 +17,11 @@ export type PatternPostData = PostMeta & {
 };
 
 export type SelectQuery = ( dataStore: string ) => {
-	getBlockPatternCategories: () => { name: string; label: string }[];
+	getBlockPatternCategories: () => {
+		name: string;
+		label: string;
+		pm_meta?: string;
+	}[];
 	getBlockTypes: () => { name: string; transforms?: unknown }[];
 	getCurrentPostAttribute: ( attributeName: 'meta' ) => PostMeta;
 	getEditedPostAttribute: ( postAttribute: string ) => unknown;
@@ -34,6 +39,7 @@ export type SelectQuery = ( dataStore: string ) => {
 export type Pattern = {
 	blockTypes: string[];
 	categories: string[];
+	customCategories: string[];
 	content: string;
 	description: string;
 	inserter: boolean;
@@ -55,6 +61,12 @@ export type InitialPatternManager = {
 	apiEndpoints: {
 		getPatternNamesEndpoint: string;
 	};
+	patternCategories: {
+		name: string;
+		label: string;
+		description?: string;
+		pm_meta?: string;
+	}[];
 	patternNames: Array< Pattern[ 'slug' ] >;
 	siteUrl: string;
 };