PCH: Add category slug support in search

build/content-helper/editor-sidebar.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'cdab4fcca4b787c82aa2');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-plugins', 'wp-primitives', 'wp-url', 'wp-wordcount'), 'version' => 'c3e7dc1ccdd9065ce0db');

src/@types/assets/window.d.ts

@@ -33,6 +33,7 @@ declare global {
 		wpParselySiteId: string,
 		wpParselySmartLinkingAllowedBlocks: string[];
 		wpParselyTrackableStatuses: string[];
+		wpParselyUseCategorySlugsInSearches: boolean;
 
 		/**
 		 * Jetpack Editor Initial State.

src/content-helper/editor-sidebar/class-editor-sidebar.php

@@ -178,6 +178,13 @@ public function run(): void {
 			'before'
 		);
 
+		$use_category_slugs_in_searches = apply_filters( 'wp_parsely_use_category_slugs_in_searches', false );
+		wp_add_inline_script(
+			static::get_script_id(),
+			'window.wpParselyUseCategorySlugsInSearches = ' . wp_json_encode( $use_category_slugs_in_searches ) . ';',
+			'before'
+		);
+
 		wp_enqueue_style(
 			static::get_style_id(),
 			$built_assets_url . 'editor-sidebar.css',

src/content-helper/editor-sidebar/editor-sidebar.tsx

@@ -51,10 +51,20 @@ export type OnSettingChangeFunction = ( key: keyof SidebarSettings, value: strin
  */
 export interface SidebarPostData {
 	authors: string[];
-	categories: string[];
+	categories: SidebarPostDataCategory[];
 	tags: string[];
 }
 
+/**
+ * Defines the structure of a SidebarPostData category.
+ *
+ * @since 3.18.0
+ */
+export interface SidebarPostDataCategory {
+	name: string;
+	slug: string;
+}
+
 /**
  * Gets the settings from the passed JSON.
  *

src/content-helper/editor-sidebar/related-posts/component-filter-settings.tsx

@@ -11,7 +11,7 @@ import {
  */
 import { __ } from '@wordpress/i18n';
 import { PostFilters, PostFilterType } from '../../common/utils/constants';
-import { SidebarPostData } from '../editor-sidebar';
+import { SidebarPostData, SidebarPostDataCategory } from '../editor-sidebar';
 
 /**
  * Defines the props structure for FilterControls.
@@ -48,9 +48,19 @@ export const RelatedPostsFilterSettings = ( {
 		value: author, label: author,
 	} ) );
 
-	const sectionOptions = postData.categories.map( ( section: string ) => ( {
-		value: section, label: section,
-	} ) );
+	let categoryOptions: { value: string, label: string }[] = [];
+
+	if ( true !== window.wpParselyUseCategorySlugsInSearches ) {
+		// Default behavior: Use section names to search.
+		categoryOptions = postData.categories.map( ( category: SidebarPostDataCategory ) => ( {
+			value: category.name, label: category.name,
+		} ) );
+	} else {
+		// Overridden behavior: Use section slugs to search.
+		categoryOptions = postData.categories.map( ( category: SidebarPostDataCategory ) => ( {
+			value: category.slug, label: category.name,
+		} ) );
+	}
 
 	return (
 		<div className="related-posts-filter-settings">
@@ -74,7 +84,7 @@ export const RelatedPostsFilterSettings = ( {
 					onChange={ ( selection ) => props.onFiltersChange(
 						selection, PostFilterType.Section
 					) }
-					options={ sectionOptions }
+					options={ categoryOptions }
 					value={ filters.section }
 				/>
 			) }

src/content-helper/editor-sidebar/related-posts/component.tsx

@@ -27,7 +27,7 @@ import {
 	isInEnum,
 } from '../../common/utils/constants';
 import { PostData } from '../../common/utils/post';
-import { SidebarPostData } from '../editor-sidebar';
+import { SidebarPostData, SidebarPostDataCategory } from '../editor-sidebar';
 import { RelatedPostsFilterSettings } from './component-filter-settings';
 import { RelatedPostItem } from './component-item';
 import { usePostData } from './hooks';
@@ -111,11 +111,30 @@ export const RelatedPostsPanel = (): React.JSX.Element => {
 			return array.map( ( item ) => item.name );
 		};
 
+		/**
+		 * Returns the name and slug properties present in the passed value, or
+		 * an empty array if any errors occur.
+		 *
+		 * @since 3.18.0
+		 *
+		 * @param {unknown} value The value to be processed.
+		 *
+		 * @return {SidebarPostDataCategory[]} The categories data extracted from the value.
+		 */
+		const extractCategoriesDataAsArray = ( value: unknown ): SidebarPostDataCategory[] => {
+			if ( ! isArrayOfUsersOrTaxonomies( value ) ) {
+				return [];
+			}
+
+			const array = value as SidebarPostDataCategory[];
+			return array.map( ( item ) => ( { name: item.name, slug: item.slug } ) );
+		};
+
 		setPostData( {
 			// Pass the data through validation, as `usePostData()` could return
 			// unexpected results.
 			authors: extractNamesAsArray( authors ),
-			categories: extractNamesAsArray( categories ),
+			categories: extractCategoriesDataAsArray( categories ),
 			tags: extractNamesAsArray( tags ),
 		} );
 	}, [ authors, categories, tags, isPostDataReady ] );