Skip to content

Commit

Permalink
Try updating the Library to use pattern category taxonomy
Browse files Browse the repository at this point in the history
  • Loading branch information
aaronrobertshaw committed Jun 13, 2023
1 parent fd92ed9 commit 7bb3e12
Show file tree
Hide file tree
Showing 11 changed files with 146 additions and 126 deletions.
16 changes: 6 additions & 10 deletions packages/edit-site/src/components/add-new-pattern/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@ export default function AddNewPattern( { toggleProps } ) {
const { createErrorNotice } = useDispatch( noticesStore );
const { saveEntityRecord } = useDispatch( coreStore );

async function createPattern( { name, categoryName } ) {
async function createPattern( { name, categoryId } ) {
if ( ! name ) {
createErrorNotice( __( 'Name is not defined.' ), {
type: 'snackbar',
} );
return;
}

if ( ! categoryName ) {
createErrorNotice( __( 'Category is not defined.' ), {
if ( ! categoryId ) {
createErrorNotice( __( 'Category has not been selected.' ), {
type: 'snackbar',
} );
return;
Expand All @@ -49,12 +49,8 @@ export default function AddNewPattern( { toggleProps } ) {
title: name || __( 'Untitled Pattern' ),
content: '',
status: 'publish',
meta: {
wp_block: {
sync_status: 'notSynced',
categories: [ categoryName ],
},
},
meta: { wp_block: { sync_status: 'notSynced' } },
wp_pattern: [ categoryId ],
},
{ throwOnError: true }
);
Expand All @@ -65,7 +61,7 @@ export default function AddNewPattern( { toggleProps } ) {
postId: pattern.id,
postType: 'wp_block',
categoryType: 'wp_block',
categoryName,
categoryId,
canvas: 'edit',
} );
} catch ( error ) {
Expand Down
28 changes: 14 additions & 14 deletions packages/edit-site/src/components/create-pattern-modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useEntityRecords } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
import usePatternCategories from '../sidebar-navigation-screen-library/use-pattern-categories';

export default function CreatePatternModal( { closeModal, onCreate } ) {
const [ name, setName ] = useState( '' );
const [ categoryName, setCategoryName ] = useState( '' );
const [ categoryId, setCategoryId ] = useState( '' );
const [ isSubmitting, setIsSubmitting ] = useState( false );

const { patternCategories } = usePatternCategories();
const { records: categories } = useEntityRecords(
'taxonomy',
'wp_pattern',
{ per_page: -1, hide_empty: false, context: 'view' }
);

const options = patternCategories
const options = ( categories || [] )
.map( ( category ) => ( {
label: category.label,
value: category.name,
label: category.name,
value: category.id,
} ) )
.concat( [
{ value: '', label: __( 'Select a category' ), disabled: true },
Expand All @@ -52,7 +52,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
return;
}
setIsSubmitting( true );
await onCreate( { name, categoryName } );
await onCreate( { name, categoryId } );
} }
>
<VStack spacing="4">
Expand All @@ -67,10 +67,10 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
/>
<SelectControl
label={ __( 'Category' ) }
onChange={ setCategoryName }
onChange={ setCategoryId }
options={ options }
size="__unstable-large"
value={ categoryName }
value={ categoryId }
/>
<HStack justify="right">
<Button
Expand All @@ -84,7 +84,7 @@ export default function CreatePatternModal( { closeModal, onCreate } ) {
<Button
variant="primary"
type="submit"
disabled={ ! name || ! categoryName }
disabled={ ! name || ! categoryId }
isBusy={ isSubmitting }
>
{ __( 'Create' ) }
Expand Down
11 changes: 5 additions & 6 deletions packages/edit-site/src/components/library/grid.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,15 +57,15 @@ const DeleteMenuItem = ( { item, onClose } ) => {
);
};

const GridItem = ( { category, composite, item } ) => {
const GridItem = ( { categoryId, composite, item } ) => {
const instanceId = useInstanceId( GridItem );
const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;

const { onClick } = useLink( {
path: '/library',
postType: item.type,
postId: item.type === USER_PATTERNS ? item.id : item.name,
categoryName: category,
categoryId,
categoryType: item.type,
canvas: 'edit',
} );
Expand Down Expand Up @@ -121,16 +121,15 @@ const GridItem = ( { category, composite, item } ) => {
);
};

export default function Grid( { category, label, type } ) {
const [ patterns, isResolving ] = usePatterns( type, category );
export default function Grid( { categoryId, label, type } ) {
const [ patterns, isResolving ] = usePatterns( type, categoryId );
const composite = useCompositeState( { orientation: 'vertical' } );

if ( ! patterns ) {
return null;
}

if ( ! patterns.length ) {
// TODO: Implement redirecting to root library page or proper empty state.
return (
<div
style={ {
Expand Down Expand Up @@ -159,7 +158,7 @@ export default function Grid( { category, label, type } ) {
<GridItem
key={ pattern.name }
item={ pattern }
category={ category }
categoryId={ categoryId }
composite={ composite }
/>
) ) }
Expand Down
6 changes: 3 additions & 3 deletions packages/edit-site/src/components/library/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ const DEFAULT_TYPE = 'wp_template_part';
const DEFAULT_CATEGORY = 'header';

export default function Library() {
const { categoryType, categoryName } = getQueryArgs( window.location.href );
const { categoryType, categoryId } = getQueryArgs( window.location.href );
const type = categoryType || DEFAULT_TYPE;
const category = categoryName || DEFAULT_CATEGORY;
const category = categoryId || DEFAULT_CATEGORY;
const settings = useLibrarySettings();

// Do we need shortcuts if we aren't displaying a header?
Expand Down Expand Up @@ -58,7 +58,7 @@ export default function Library() {
<ExperimentalBlockEditorProvider settings={ settings }>
<Grid
type={ type }
category={ category }
categoryId={ category }
label={ __( 'Patterns list' ) }
/>
</ExperimentalBlockEditorProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function useLibrarySettings() {
( x, index, arr ) =>
index === arr.findIndex( ( y ) => x.name === y.name )
),
[ ( settingsBlockPatterns, restBlockPatterns ) ]
[ settingsBlockPatterns, restBlockPatterns ]
);

const settings = useMemo( () => {
Expand Down
37 changes: 22 additions & 15 deletions packages/edit-site/src/components/library/use-patterns.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { parse } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
import { useMemo } from '@wordpress/element';

/**
Expand Down Expand Up @@ -73,7 +73,7 @@ const useTemplatePartsAsPatterns = ( area, postType = TEMPLATE_PARTS ) => {
return { templateParts: filteredTemplateParts, isResolving };
};

const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
const useBlockPatternsByCategory = ( categoryId, postType = PATTERNS ) => {
const blockPatterns = useSelect( ( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );
const settings = getSettings();
Expand All @@ -90,6 +90,7 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
const patterns = useMemo(
() =>
[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
.filter( ( pattern ) => pattern.source !== 'core' )
.filter(
( x, index, arr ) =>
index === arr.findIndex( ( y ) => x.name === y.name )
Expand All @@ -102,31 +103,37 @@ const useBlockPatternsByCategory = ( category, postType = PATTERNS ) => {
[ blockPatterns, restBlockPatterns ]
);

if ( postType !== PATTERNS ) {
return EMPTY_PATTERN_LIST;
}
// Non-user-created patterns (e.g. theme patterns ) will have string
// category names in their assigned categories array. We'll need to
// to retrieve the current category's name to match them.
const { record: category } = useEntityRecord(
'taxonomy',
'wp_pattern',
categoryId
);

if ( ! category ) {
return patterns || EMPTY_PATTERN_LIST;
if ( postType !== PATTERNS || ! category ) {
return EMPTY_PATTERN_LIST;
}

return patterns.filter( ( pattern ) =>
pattern.categories?.includes( category )
pattern.categories?.includes( category.name )
);
};

const reusableBlockToPattern = ( reusableBlock ) => ( {
blocks: parse( reusableBlock.content.raw ),
categories: reusableBlock.meta?.wp_block?.categories,
categories: reusableBlock.wp_pattern,
id: reusableBlock.id,
name: reusableBlock.slug,
title: reusableBlock.title.raw,
type: reusableBlock.type,
reusableBlock,
} );

const useUserPatterns = ( category, categoryType = PATTERNS ) => {
const useUserPatterns = ( categoryId, categoryType = PATTERNS ) => {
const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
const currentId = parseInt( categoryId );
const userPatterns = useSelect(
( select ) => {
if ( postType !== USER_PATTERNS ) {
Expand All @@ -150,15 +157,15 @@ const useUserPatterns = ( category, categoryType = PATTERNS ) => {
);

return userPatterns.filter( ( pattern ) =>
pattern.categories?.includes( category )
pattern.categories?.includes( currentId )
);
};

export const usePatterns = ( categoryType, categoryName ) => {
const patterns = useBlockPatternsByCategory( categoryName, categoryType );
const userPatterns = useUserPatterns( categoryName, categoryType );
export const usePatterns = ( categoryType, categoryId ) => {
const patterns = useBlockPatternsByCategory( categoryId, categoryType );
const userPatterns = useUserPatterns( categoryId, categoryType );
const { templateParts, isResolving } = useTemplatePartsAsPatterns(
categoryName,
categoryId,
categoryType
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ import { useLink } from '../routes/link';
export default function CategoryItem( {
count,
icon,
id,
isActive,
label,
name,
type,
} ) {
const linkInfo = useLink( {
path: '/library',
categoryType: type,
categoryName: name,
categoryId: id,
} );

if ( ! count ) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ const templatePartAreaLabels = {

export default function SidebarNavigationScreenLibrary() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const { categoryType, categoryName } = getQueryArgs( window.location.href );
const currentCategory = categoryName || DEFAULT_CATEGORY;
const { categoryType, categoryId } = getQueryArgs( window.location.href );
const currentCategory = categoryId || DEFAULT_CATEGORY;
const currentType = categoryType || DEFAULT_TYPE;

const { templatePartAreas, hasTemplateParts, isLoading } =
Expand Down Expand Up @@ -92,7 +92,7 @@ export default function SidebarNavigationScreenLibrary() {
area
]
}
name={ area }
id={ area }
type="wp_template_part"
isActive={
currentCategory === area &&
Expand All @@ -110,12 +110,12 @@ export default function SidebarNavigationScreenLibrary() {
<CategoryItem
key={ category.name }
count={ category.count }
label={ category.label }
name={ category.name }
label={ category.name }
id={ category.id }
type="pattern"
isActive={
currentCategory ===
category.name &&
category.id &&
currentType === 'pattern'
}
/>
Expand Down
Loading

0 comments on commit 7bb3e12

Please sign in to comment.