Get list of pattern categories via pattern category registry (Patterns view) #96

mike-day · 2023-03-08T16:23:28Z

Currently, the list of categories for the app module is parsed from pattern files. Since categories in the pattern header are saved by their name, parsing from the pattern file can be problematic if the category was registered with a name that differs from its label.

This PR hydrates the app with a list of registered categories, populated via call to the pattern category registry.

Fixes GF-3706.

For example, here is the current way, using Frost as reference:

The displayed values are all parsed directly from the name stored in pattern files, with dashes removed.

Here is the same categories list with label values mapped against the categories registry:

The displayed values are the actual registered label values registered by Frost.

How to test

Checkout the branch
With Frost active, navigate to the Patterns view
The categories list should be populated with registered label values

Notes

Hydrating the app with the list of patternCategories will also be required for bulk assignment of categories to patterns, so having this data available now will be a useful head start for that work.

…tional on bottom)

mike-day · 2023-03-08T16:27:45Z

wp-modules/app/app.php

-		'patterns'     => \PatternManager\PatternDataHandlers\get_theme_patterns_with_editor_links(),
-		'apiNonce'     => wp_create_nonce( 'wp_rest' ),
-		'apiEndpoints' => array(
+		'patterns'          => \PatternManager\PatternDataHandlers\get_theme_patterns_with_editor_links(),
+		'patternCategories' => \PatternManager\ApiData\get_registered_pattern_categories(),
+		'apiNonce'          => wp_create_nonce( 'wp_rest' ),
+		'apiEndpoints'      => array(
 			'deletePatternEndpoint' => get_rest_url( false, 'pattern-manager/v1/delete-pattern/' ),
 		),
-		'siteUrl'      => get_bloginfo( 'url' ),
-		'adminUrl'     => admin_url(),
+		'siteUrl'           => get_bloginfo( 'url' ),
+		'adminUrl'          => admin_url(),


This diff looks more extensive than it is due to linting.

mike-day · 2023-03-08T16:28:39Z

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

 export type InitialPatternManager = {
+	adminUrl: string;
 	apiEndpoints: {
 		deletePatternEndpoint: string;
 	};
 	apiNonce: string;
-	siteUrl: string;
-	adminUrl: string;
+	patternCategories: QueriedCategories;
 	patterns: Patterns;
+	siteUrl: string;
 };

 export type Pattern = {
 	content: string;
 	editorLink: string;
 	name: string;
-	title: string;
 	slug: string;
-	description?: string;
+	title: string;
+	blockTypes?: string[];
 	categories?: string[];
+	description?: string;
+	inserter?: boolean;
 	keywords?: string[];
-	blockTypes?: string[];
 	postTypes?: string[];
-	inserter?: boolean;
 	viewportWidth?: number;
 };


This diff also looks more extensive than it is since I alphabetized the list of properties.

mike-day · 2023-03-08T16:30:54Z

wp-modules/app/js/src/utils/test/getUniquePatternCategories.ts

-					label: 'Some category',
+					label: 'Some Category',


Previously, any word succeeding the first would have been lowercase. Now they are capitalized since the label is pulled from the array of queriedCategories.

Great idea to get the labels from the back end.

mike-day · 2023-03-08T16:32:53Z

wp-modules/app/js/src/hooks/usePatterns.ts

@@ -20,5 +20,6 @@ export default function usePatterns( initialPatterns: Patterns ) {
 	return {
 		data: patternsData,
 		deletePattern,
+		patternCategories: patternManager.patternCategories,


Initially, I was getting the list of patternCategories from a fetch request within usePatterns, but I think it's better to just hydrate the app with the needed data instead.

Definitely, it's simpler this way.

kienstra

Hi @mike-day,
Good idea to get the categories from the back end.

A comment below about implementation, but this works well:

kienstra · 2023-03-08T17:13:18Z

wp-modules/api-data/api-data.php

+	$request  = new WP_REST_Request( 'GET', '/wp/v2/block-patterns/categories' );
+	$response = rest_do_request( $request );
+
+	return rest_get_server()->response_to_data( $response, false );


It's not common to do a REST request in PHP to the same site.

Could this simply do a similar thing the request does?

Great feedback! It is working well to just simply use that registry instead of creating a REST request — thank you for the sugggestion.

This is covered by d0c544b.

kienstra · 2023-03-08T17:17:37Z

wp-modules/app/js/src/utils/getUniquePatternCategories.ts

-export default function getUniquePatternCategories( patterns: Patterns ) {
+export default function getUniquePatternCategories(
+	patterns: Patterns,
+	queriedCategories: QueriedCategories


queriedCategories is a nice name. It's not a certain pattern's categories, it's the queried categories for all patterns.

kienstra · 2023-03-08T17:22:44Z

wp-modules/app/js/src/hooks/usePatterns.ts

@@ -1,4 +1,4 @@
-import { useState, useRef } from '@wordpress/element';
+import { useState } from '@wordpress/element';


An award whenever you remove useRef or useEffect !

🎉

kienstra · 2023-03-08T17:23:03Z

wp-modules/app/js/src/hooks/usePatterns.ts

@@ -20,5 +20,6 @@ export default function usePatterns( initialPatterns: Patterns ) {
 	return {
 		data: patternsData,
 		deletePattern,
+		patternCategories: patternManager.patternCategories,


Definitely, it's simpler this way.

kienstra · 2023-03-08T17:25:03Z

wp-modules/app/js/src/utils/test/getUniquePatternCategories.ts

-					label: 'Some category',
+					label: 'Some Category',


Great idea to get the labels from the back end.

kienstra · 2023-03-08T20:50:57Z

wp-modules/app/app.php

@@ -22,7 +22,7 @@
 function get_app_state() {
 	return array(
 		'patterns'          => \PatternManager\PatternDataHandlers\get_theme_patterns_with_editor_links(),
-		'patternCategories' => \PatternManager\ApiData\get_registered_pattern_categories(),
+		'patternCategories' => \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),


Looks good!

Thanks again for the idea, it's a great find to just use that registry!

…into try/categories-from-rest-in-patterns-view

mike-day added 9 commits March 8, 2023 09:48

Add method for getting categories from api-data

7f6872f

Use new method in app hydration

cb6c53a

Adjust type def; use patternCategories in context

99781cb

Return patternCategories in usePatterns

dd13f09

Use new categories data to get unique categories from util

335caf5

Remove unused useRef from usePatterns

03397fb

Update test cases for getUniquePatternCategories

cdd08cd

Alphabetize properties in InitialPatternManager, Pattern type def (op…

00eee00

…tional on bottom)

Linting for test cases

72f842c

mike-day commented Mar 8, 2023

View reviewed changes

mike-day requested review from kienstra and johnstonphilip March 8, 2023 16:31

mike-day commented Mar 8, 2023

View reviewed changes

kienstra approved these changes Mar 8, 2023

View reviewed changes

Use pattern categories registry instead of REST request

d0c544b

mike-day changed the title ~~Get list of pattern categories via REST API (Patterns view)~~ Get list of pattern categories via pattern category registry (Patterns view) Mar 8, 2023

kienstra reviewed Mar 8, 2023

View reviewed changes

Merge branch 'main' of https://github.com/studiopress/pattern-manager …

0a22897

…into try/categories-from-rest-in-patterns-view

mike-day merged commit dae40e2 into main Mar 8, 2023

mike-day deleted the try/categories-from-rest-in-patterns-view branch March 8, 2023 21:02

johnstonphilip mentioned this pull request Mar 11, 2023

Use human-readable pattern category name #105

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Get list of pattern categories via pattern category registry (Patterns view) #96

Get list of pattern categories via pattern category registry (Patterns view) #96

mike-day commented Mar 8, 2023 •

edited

Loading

mike-day Mar 8, 2023

mike-day Mar 8, 2023

mike-day Mar 8, 2023

kienstra Mar 8, 2023

mike-day Mar 8, 2023 •

edited

Loading

kienstra Mar 8, 2023

kienstra left a comment •

edited

Loading

kienstra Mar 8, 2023

mike-day Mar 8, 2023

kienstra Mar 8, 2023 •

edited

Loading

kienstra Mar 8, 2023

kienstra Mar 8, 2023

kienstra Mar 8, 2023

kienstra Mar 8, 2023

kienstra Mar 8, 2023

mike-day Mar 8, 2023

kienstra Mar 8, 2023

		@@ -1,4 +1,4 @@
		import { useState, useRef } from '@wordpress/element';
		import { useState } from '@wordpress/element';

Get list of pattern categories via pattern category registry (Patterns view) #96

Get list of pattern categories via pattern category registry (Patterns view) #96

Conversation

mike-day commented Mar 8, 2023 • edited Loading

How to test

Notes

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mike-day Mar 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra Mar 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mike-day commented Mar 8, 2023 •

edited

Loading

mike-day Mar 8, 2023 •

edited

Loading

kienstra left a comment •

edited

Loading

kienstra Mar 8, 2023 •

edited

Loading