Skip to content
This repository has been archived by the owner on Oct 16, 2024. It is now read-only.

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

Merged
merged 11 commits into from
Mar 8, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7f6872f
Add method for getting categories from api-data
mike-day Mar 8, 2023
cb6c53a
Use new method in app hydration
mike-day Mar 8, 2023
99781cb
Adjust type def; use patternCategories in context
mike-day Mar 8, 2023
dd13f09
Return patternCategories in usePatterns
mike-day Mar 8, 2023
335caf5
Use new categories data to get unique categories from util
mike-day Mar 8, 2023
03397fb
Remove unused useRef from usePatterns
mike-day Mar 8, 2023
cdd08cd
Update test cases for getUniquePatternCategories
mike-day Mar 8, 2023
00eee00
Alphabetize properties in InitialPatternManager, Pattern type def (op…
mike-day Mar 8, 2023
72f842c
Linting for test cases
mike-day Mar 8, 2023
d0c544b
Use pattern categories registry instead of REST request
mike-day Mar 8, 2023
0a22897
Merge branch 'main' of https://github.com/studiopress/pattern-manager…
mike-day Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions wp-modules/app/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,14 @@
*/
function get_app_state() {
return array(
'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' => \WP_Block_Pattern_Categories_Registry::get_instance()->get_all_registered(),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

'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(),
);
}

Expand Down
1 change: 1 addition & 0 deletions wp-modules/app/js/src/components/App/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function App() {

const providerValue: InitialContext = {
apiEndpoints: patternManager.apiEndpoints,
patternCategories: patternManager.patternCategories,
patterns,
siteUrl: patternManager.siteUrl,
};
Expand Down
3 changes: 2 additions & 1 deletion wp-modules/app/js/src/components/Patterns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ export default function Patterns() {
);

const uniqueCategories = getUniquePatternCategories(
patternsWithUncategorized
patternsWithUncategorized,
patterns.patternCategories
);

return (
Expand Down
3 changes: 2 additions & 1 deletion wp-modules/app/js/src/hooks/usePatterns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useRef } from '@wordpress/element';
import { useState } from '@wordpress/element';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes!!!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An award whenever you remove useRef or useEffect !

🎉

import { __ } from '@wordpress/i18n';
import { patternManager } from '../globals';
import getHeaders from '../utils/getHeaders';
Expand All @@ -20,5 +20,6 @@ export default function usePatterns( initialPatterns: Patterns ) {
return {
data: patternsData,
deletePattern,
patternCategories: patternManager.patternCategories,
Copy link
Contributor Author

@mike-day mike-day Mar 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Definitely, it's simpler this way.

};
}
19 changes: 13 additions & 6 deletions wp-modules/app/js/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,42 @@ export type PatternManagerViews = 'theme_patterns' | 'pattern_editor';

export type InitialContext = {
apiEndpoints: InitialPatternManager[ 'apiEndpoints' ];
patternCategories: InitialPatternManager[ 'patternCategories' ];
patterns: ReturnType< typeof usePatterns >;
siteUrl: InitialPatternManager[ 'siteUrl' ];
};

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;
};
Comment on lines 12 to 36
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


export type Patterns = {
[ key: string ]: Pattern;
};

export type QueriedCategories = {
label: string;
name: string;
}[];
25 changes: 17 additions & 8 deletions wp-modules/app/js/src/utils/getUniquePatternCategories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,13 @@ import { __ } from '@wordpress/i18n';
*/
import convertToUpperCase from './convertToUpperCase';
import sortAlphabetically from './sortAlphabetically';
import type { Patterns } from '../types';
import type { Patterns, QueriedCategories } from '../types';

/** Create a mapping of unique categories for a dropdown or other list. */
export default function getUniquePatternCategories( patterns: Patterns ) {
export default function getUniquePatternCategories(
patterns: Patterns,
queriedCategories: QueriedCategories
Copy link
Contributor

@kienstra kienstra Mar 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

) {
return [
// Keep all-patterns at top of list.
{
Expand All @@ -34,12 +37,18 @@ export default function getUniquePatternCategories( patterns: Patterns ) {
];
}, [] )
// Map the array to expected object shape.
.map( ( category: string ) => ( {
label: convertToUpperCase(
category.replace( /[-_]/g, ' ' )
),
name: category,
} ) ),
.map( ( categoryName: string ) => {
return {
label:
queriedCategories.find(
( { name } ) => name === categoryName
)?.label ||
convertToUpperCase(
categoryName.replace( /[-_]/g, ' ' )
),
name: categoryName,
};
} ),
],
// Sort by name property.
'name'
Expand Down
84 changes: 71 additions & 13 deletions wp-modules/app/js/src/utils/test/getUniquePatternCategories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,15 @@
* Internal dependencies
*/
import getUniquePatternCategories from '../getUniquePatternCategories';
import type { Patterns } from '../../types';
import type { Patterns, QueriedCategories } from '../../types';

type UniqueCategories = QueriedCategories;

describe( 'getUniquePatternCategories', () => {
it.each< [ Patterns, { label: string; name: string }[] ] >( [
it.each< [ Patterns, QueriedCategories, UniqueCategories ] >( [
[
{},
[],
[
{
label: 'All Patterns',
Expand All @@ -30,6 +33,7 @@ describe( 'getUniquePatternCategories', () => {
content: 'Here is some content',
},
},
[],
[
{
label: 'All Patterns',
Expand All @@ -53,13 +57,19 @@ describe( 'getUniquePatternCategories', () => {
content: 'Here is some content',
},
},
[
{
label: 'Some Category',
name: 'some-category',
},
],
[
{
label: 'All Patterns',
name: 'all-patterns',
},
{
label: 'Some category',
label: 'Some Category',
Comment on lines -62 to +72
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great idea to get the labels from the back end.

name: 'some-category',
},
],
Expand Down Expand Up @@ -88,13 +98,19 @@ describe( 'getUniquePatternCategories', () => {
categories: [ 'some-category' ],
},
},
[
{
label: 'Some Category',
name: 'some-category',
},
],
[
{
label: 'All Patterns',
name: 'all-patterns',
},
{
label: 'Some category',
label: 'Some Category',
name: 'some-category',
},
],
Expand Down Expand Up @@ -123,17 +139,27 @@ describe( 'getUniquePatternCategories', () => {
categories: [ 'some-category' ],
},
},
[
{
label: 'Another Category',
name: 'another-category',
},
{
label: 'Some Category',
name: 'some-category',
},
],
[
{
label: 'All Patterns',
name: 'all-patterns',
},
{
label: 'Another category',
label: 'Another Category',
name: 'another-category',
},
{
label: 'Some category',
label: 'Some Category',
name: 'some-category',
},
],
Expand Down Expand Up @@ -161,13 +187,23 @@ describe( 'getUniquePatternCategories', () => {
content: 'Here is more content',
},
},
[
{
label: 'Category to Skip',
name: 'category-to-skip',
},
{
label: 'Some Category',
name: 'some-category',
},
],
[
{
label: 'All Patterns',
name: 'all-patterns',
},
{
label: 'Some category',
label: 'Some Category',
name: 'some-category',
},
{
Expand Down Expand Up @@ -213,17 +249,35 @@ describe( 'getUniquePatternCategories', () => {
content: "Wow. That's a lot of content!",
},
},
[
{
label: 'Another Category',
name: 'another-category',
},
{
label: 'Some Category',
name: 'some-category',
},
{
label: 'Third Category',
name: 'third-category',
},
{
label: 'Fourth Category',
name: 'fourth-category',
},
],
[
{
label: 'All Patterns',
name: 'all-patterns',
},
{
label: 'Some category',
label: 'Some Category',
name: 'some-category',
},
{
label: 'Third category',
label: 'Third Category',
name: 'third-category',
},
{
Expand All @@ -234,10 +288,14 @@ describe( 'getUniquePatternCategories', () => {
],
] )(
'should return unique pattern categories',
( patterns: Patterns, expected: { label: string; name: string }[] ) => {
expect( getUniquePatternCategories( patterns ) ).toEqual(
expected
);
(
patterns: Patterns,
queriedCategories,
expected: { label: string; name: string }[]
) => {
expect(
getUniquePatternCategories( patterns, queriedCategories )
).toEqual( expected );
}
);
} );