@wordpress/edit-site 5.14.0 → 5.15.0

package/src/components/page-patterns/style.scss

@@ -1,6 +1,26 @@
 .edit-site-patterns {
-	background: rgba(0, 0, 0, 0.05);
+	border-left: 1px solid $gray-800;
+	background: none;
 	margin: $header-height 0 0;
+	border-radius: 0;
+	padding: 0;
+	overflow-x: auto;
+
+	.edit-site-page-content {
+		height: 100%;
+		position: relative;
+		padding: 0;
+		display: flex;
+		flex-flow: column;
+	}
+
+	.components-base-control {
+		width: 100%;
+		@include break-medium {
+			width: auto;
+		}
+	}
+
 	.components-text {
 		color: $gray-600;
 	}
@@ -12,33 +32,118 @@
 	@include break-medium {
 		margin: 0;
 	}
-}
 
-.edit-site-patterns__grid {
-	column-gap: $grid-unit-30;
-	@include break-large() {
-		column-count: 2;
+	.edit-site-patterns__search-block {
+		min-width: fit-content;
+		flex-grow: 1;
 	}
 
-	// Small top padding required to avoid cutting off the visible outline
-	// when hovering items.
-	padding-top: $border-width-focus-fallback;
-	margin-bottom: $grid-unit-40;
+	// The increased specificity here is to overcome component styles
+	// without relying on internal component class names.
+	.edit-site-patterns__search {
+		input[type="search"] {
+			height: $button-size-next-default-40px;
+			background: $gray-800;
+			color: $gray-200;
 
+			&:focus {
+				background: $gray-800;
+			}
+		}
+
+		svg {
+			fill: $gray-600;
+		}
+	}
+
+	.edit-site-patterns__sync-status-filter {
+		background: $gray-800;
+		border: none;
+		height: $button-size-next-default-40px;
+		min-width: max-content;
+		width: 100%;
+		max-width: 100%;
+
+		@include break-medium {
+			width: 300px;
+		}
+	}
+	.edit-site-patterns__sync-status-filter-option:active {
+		background: $gray-700;
+		color: $gray-100;
+	}
+
+	.edit-site-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		background: $gray-900;
+		padding: $grid-unit-30 $grid-unit-40;
+		position: sticky;
+		bottom: 0;
+		z-index: z-index(".edit-site-patterns__grid-pagination");
+
+		.components-button.is-tertiary {
+			width: $button-size-compact;
+			height: $button-size-compact;
+			color: $gray-100;
+			background-color: $gray-800;
+			justify-content: center;
+
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
+
+			&:hover:not(:disabled) {
+				background-color: $gray-700;
+			}
+		}
+	}
+}
+
+.edit-site-patterns__header {
+	position: sticky;
+	top: 0;
+	background: $gray-900;
+	padding: $grid-unit-40 $grid-unit-40 $grid-unit-20;
+	z-index: z-index(".edit-site-patterns__header");
+}
+
+.edit-site-patterns__section {
+	padding: $grid-unit-30 $grid-unit-40;
+	flex: 1;
+}
+
+.edit-site-patterns__section-header {
+	.screen-reader-shortcut:focus {
+		top: 0;
+	}
+}
+
+.edit-site-patterns__grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: $grid-unit-40;
+	margin-top: 0;
+	margin-bottom: 0;
+	@include break-large {
+		grid-template-columns: 1fr 1fr;
+	}
 	.edit-site-patterns__pattern {
 		break-inside: avoid-column;
 		display: flex;
 		flex-direction: column;
-		margin-bottom: $grid-unit-60;
-
 		.edit-site-patterns__preview {
-			border-radius: $radius-block-ui;
+			box-shadow: none;
+			border: none;
+			padding: 0;
+			background-color: unset;
+			box-sizing: border-box;
+			border-radius: 4px;
 			cursor: pointer;
 			overflow: hidden;
 
 			&:focus {
-				box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
+				box-shadow: inset 0 0 0 0 $white, 0 0 0 2px var(--wp-admin-theme-color);
 				// Windows High Contrast mode will show this outline, but not the box-shadow.
 				outline: 2px solid transparent;
 			}
@@ -46,6 +151,10 @@
 			&.is-inactive {
 				cursor: default;
 			}
+			&.is-inactive:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-800;
+				opacity: 0.8;
+			}
 		}
 
 		.edit-site-patterns__footer,
@@ -68,31 +177,28 @@
 	}
 
 	.edit-site-patterns__preview {
-		flex: 1;
+		flex: 0 1 auto;
 		margin-bottom: $grid-unit-20;
 	}
 }
 
-// The increased specificity here is to overcome component styles
-// without relying on internal component class names.
-.edit-site-patterns__search {
-	&#{&} input[type="search"] {
-		background: $gray-800;
+.edit-site-patterns__load-more {
+	align-self: center;
+}
+
+.edit-site-patterns__pattern-title {
+	color: $gray-200;
+
+	.is-link {
+		text-decoration: none;
 		color: $gray-200;
 
+		&:hover,
 		&:focus {
-			background: $gray-800;
+			color: $white;
 		}
 	}
 
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-patterns__pattern-title {
-	color: $gray-200;
-
 	.edit-site-patterns__pattern-icon {
 		border-radius: $grid-unit-05;
 		background: var(--wp-block-synced-color);
@@ -101,6 +207,10 @@
 
 	.edit-site-patterns__pattern-lock-icon {
 		display: inline-flex;
+
+		svg {
+			fill: currentcolor;
+		}
 	}
 }
 

package/src/components/page-patterns/use-patterns.js

@@ -4,7 +4,7 @@
 import { parse } from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -15,7 +15,6 @@ import {
 	SYNC_TYPES,
 	TEMPLATE_PARTS,
 	USER_PATTERNS,
-	USER_PATTERN_CATEGORY,
 	filterOutDuplicatesByName,
 } from './utils';
 import { unlock } from '../../lock-unlock';
@@ -31,122 +30,83 @@ const templatePartToPattern = ( templatePart ) => ( {
 	blocks: parse( templatePart.content.raw ),
 	categories: [ templatePart.area ],
 	description: templatePart.description || '',
+	isCustom: templatePart.source === 'custom',
 	keywords: templatePart.keywords || [],
+	id: createTemplatePartId( templatePart.theme, templatePart.slug ),
 	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
-	title: templatePart.title.rendered,
+	title: decodeEntities( templatePart.title.rendered ),
 	type: templatePart.type,
 	templatePart,
 } );
 
-const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
-const templatePartHasCategory = ( item, category ) => {
-	if ( category === 'uncategorized' ) {
-		return ! templatePartCategories.includes( item.templatePart.area );
-	}
-
-	return item.templatePart.area === category;
-};
+const templatePartHasCategory = ( item, category ) =>
+	item.templatePart.area === category;
 
-const useTemplatePartsAsPatterns = (
-	categoryId,
-	postType = TEMPLATE_PARTS,
-	filterValue = ''
+const selectTemplatePartsAsPatterns = (
+	select,
+	{ categoryId, search = '' } = {}
 ) => {
-	const { templateParts, isResolving } = useSelect(
-		( select ) => {
-			if ( postType !== TEMPLATE_PARTS ) {
-				return {
-					templateParts: EMPTY_PATTERN_LIST,
-					isResolving: false,
-				};
-			}
-
-			const { getEntityRecords, isResolving: _isResolving } =
-				select( coreStore );
-			const query = { per_page: -1 };
-			const rawTemplateParts = getEntityRecords(
-				'postType',
-				postType,
-				query
-			);
-			const partsAsPatterns = rawTemplateParts?.map( ( templatePart ) =>
-				templatePartToPattern( templatePart )
-			);
-
-			return {
-				templateParts: partsAsPatterns,
-				isResolving: _isResolving( 'getEntityRecords', [
-					'postType',
-					'wp_template_part',
-					query,
-				] ),
-			};
-		},
-		[ postType ]
+	const { getEntityRecords, getIsResolving } = select( coreStore );
+	const query = { per_page: -1 };
+	const rawTemplateParts =
+		getEntityRecords( 'postType', TEMPLATE_PARTS, query ) ??
+		EMPTY_PATTERN_LIST;
+	const templateParts = rawTemplateParts.map( ( templatePart ) =>
+		templatePartToPattern( templatePart )
 	);
 
-	const filteredTemplateParts = useMemo( () => {
-		if ( ! templateParts ) {
-			return EMPTY_PATTERN_LIST;
-		}
-
-		return searchItems( templateParts, filterValue, {
-			categoryId,
-			hasCategory: templatePartHasCategory,
-		} );
-	}, [ templateParts, filterValue, categoryId ] );
-
-	return { templateParts: filteredTemplateParts, isResolving };
-};
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		'wp_template_part',
+		query,
+	] );
 
-const useThemePatterns = (
-	categoryId,
-	postType = PATTERNS,
-	filterValue = ''
-) => {
-	const blockPatterns = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-		const settings = getSettings();
-		return (
-			settings.__experimentalAdditionalBlockPatterns ??
-			settings.__experimentalBlockPatterns
-		);
+	const patterns = searchItems( templateParts, search, {
+		categoryId,
+		hasCategory: templatePartHasCategory,
 	} );
 
-	const restBlockPatterns = useSelect( ( select ) =>
-		select( coreStore ).getBlockPatterns()
-	);
-
-	const patterns = useMemo(
-		() =>
-			[ ...( blockPatterns || [] ), ...( restBlockPatterns || [] ) ]
-				.filter(
-					( pattern ) =>
-						! CORE_PATTERN_SOURCES.includes( pattern.source )
-				)
-				.filter( filterOutDuplicatesByName )
-				.map( ( pattern ) => ( {
-					...pattern,
-					keywords: pattern.keywords || [],
-					type: 'pattern',
-					blocks: parse( pattern.content ),
-				} ) ),
-		[ blockPatterns, restBlockPatterns ]
-	);
-
-	const filteredPatterns = useMemo( () => {
-		if ( postType !== PATTERNS ) {
-			return EMPTY_PATTERN_LIST;
-		}
+	return { patterns, isResolving };
+};
 
-		return searchItems( patterns, filterValue, {
+const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
+	const { getSettings } = unlock( select( editSiteStore ) );
+	const settings = getSettings();
+	const blockPatterns =
+		settings.__experimentalAdditionalBlockPatterns ??
+		settings.__experimentalBlockPatterns;
+
+	const restBlockPatterns = select( coreStore ).getBlockPatterns();
+
+	let patterns = [
+		...( blockPatterns || [] ),
+		...( restBlockPatterns || [] ),
+	]
+		.filter(
+			( pattern ) => ! CORE_PATTERN_SOURCES.includes( pattern.source )
+		)
+		.filter( filterOutDuplicatesByName )
+		.filter( ( pattern ) => pattern.inserter !== false )
+		.map( ( pattern ) => ( {
+			...pattern,
+			keywords: pattern.keywords || [],
+			type: 'pattern',
+			blocks: parse( pattern.content ),
+		} ) );
+
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
 			categoryId,
 			hasCategory: ( item, currentCategory ) =>
 				item.categories?.includes( currentCategory ),
 		} );
-	}, [ patterns, filterValue, categoryId, postType ] );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
 
-	return filteredPatterns;
+	return { patterns, isResolving: false };
 };
 
 const reusableBlockToPattern = ( reusableBlock ) => ( {
@@ -160,88 +120,58 @@ const reusableBlockToPattern = ( reusableBlock ) => ( {
 	reusableBlock,
 } );
 
-const useUserPatterns = (
-	categoryId,
-	categoryType = PATTERNS,
-	filterValue = ''
-) => {
-	const postType = categoryType === PATTERNS ? USER_PATTERNS : categoryType;
-	const unfilteredPatterns = useSelect(
-		( select ) => {
-			if (
-				postType !== USER_PATTERNS ||
-				categoryId !== USER_PATTERN_CATEGORY
-			) {
-				return EMPTY_PATTERN_LIST;
-			}
+const selectUserPatterns = ( select, { search = '', syncStatus } = {} ) => {
+	const { getEntityRecords, getIsResolving } = select( coreStore );
 
-			const { getEntityRecords } = select( coreStore );
-			const records = getEntityRecords( 'postType', postType, {
-				per_page: -1,
-			} );
-
-			if ( ! records ) {
-				return EMPTY_PATTERN_LIST;
-			}
-
-			return records.map( ( record ) =>
-				reusableBlockToPattern( record )
-			);
-		},
-		[ postType, categoryId ]
-	);
+	const query = { per_page: -1 };
+	const records = getEntityRecords( 'postType', USER_PATTERNS, query );
 
-	const filteredPatterns = useMemo( () => {
-		if ( ! unfilteredPatterns.length ) {
-			return EMPTY_PATTERN_LIST;
-		}
+	let patterns = records
+		? records.map( ( record ) => reusableBlockToPattern( record ) )
+		: EMPTY_PATTERN_LIST;
+	const isResolving = getIsResolving( 'getEntityRecords', [
+		'postType',
+		USER_PATTERNS,
+		query,
+	] );
 
-		return searchItems( unfilteredPatterns, filterValue, {
-			// We exit user pattern retrieval early if we aren't in the
-			// catch-all category for user created patterns, so it has
-			// to be in the category.
-			hasCategory: () => true,
-		} );
-	}, [ unfilteredPatterns, filterValue ] );
-
-	const patterns = { syncedPatterns: [], unsyncedPatterns: [] };
+	if ( syncStatus ) {
+		patterns = patterns.filter(
+			( pattern ) => pattern.syncStatus === syncStatus
+		);
+	}
 
-	filteredPatterns.forEach( ( pattern ) => {
-		if ( pattern.syncStatus === SYNC_TYPES.full ) {
-			patterns.syncedPatterns.push( pattern );
-		} else {
-			patterns.unsyncedPatterns.push( pattern );
-		}
+	patterns = searchItems( patterns, search, {
+		// We exit user pattern retrieval early if we aren't in the
+		// catch-all category for user created patterns, so it has
+		// to be in the category.
+		hasCategory: () => true,
 	} );
 
-	return patterns;
+	return { patterns, isResolving };
 };
 
-export const usePatterns = ( categoryType, categoryId, filterValue ) => {
-	const blockPatterns = useThemePatterns(
-		categoryId,
-		categoryType,
-		filterValue
-	);
-
-	const { syncedPatterns = [], unsyncedPatterns = [] } = useUserPatterns(
-		categoryId,
-		categoryType,
-		filterValue
-	);
-
-	const { templateParts, isResolving } = useTemplatePartsAsPatterns(
-		categoryId,
-		categoryType,
-		filterValue
+export const usePatterns = (
+	categoryType,
+	categoryId,
+	{ search = '', syncStatus }
+) => {
+	return useSelect(
+		( select ) => {
+			if ( categoryType === TEMPLATE_PARTS ) {
+				return selectTemplatePartsAsPatterns( select, {
+					categoryId,
+					search,
+				} );
+			} else if ( categoryType === PATTERNS ) {
+				return selectThemePatterns( select, { categoryId, search } );
+			} else if ( categoryType === USER_PATTERNS ) {
+				return selectUserPatterns( select, { search, syncStatus } );
+			}
+			return { patterns: EMPTY_PATTERN_LIST, isResolving: false };
+		},
+		[ categoryId, categoryType, search, syncStatus ]
 	);
-
-	const patterns = {
-		syncedPatterns: [ ...templateParts, ...syncedPatterns ],
-		unsyncedPatterns: [ ...blockPatterns, ...unsyncedPatterns ],
-	};
-
-	return [ patterns, isResolving ];
 };
 
 export default usePatterns;

package/src/components/page-template-parts/add-new-template-part.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import CreateTemplatePartModal from '../create-template-part-modal';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function AddNewTemplatePart() {
+	const { canCreate, postType } = useSelect( ( select ) => {
+		const { supportsTemplatePartsMode } =
+			select( editSiteStore ).getSettings();
+		return {
+			canCreate: ! supportsTemplatePartsMode,
+			postType: select( coreStore ).getPostType( 'wp_template_part' ),
+		};
+	}, [] );
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const history = useHistory();
+
+	if ( ! canCreate || ! postType ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Button variant="primary" onClick={ () => setIsModalOpen( true ) }>
+				{ postType.labels.add_new_item }
+			</Button>
+			{ isModalOpen && (
+				<CreateTemplatePartModal
+					closeModal={ () => setIsModalOpen( false ) }
+					blocks={ [] }
+					onCreate={ ( templatePart ) => {
+						setIsModalOpen( false );
+						history.push( {
+							postId: templatePart.id,
+							postType: 'wp_template_part',
+							canvas: 'edit',
+						} );
+					} }
+					onError={ () => setIsModalOpen( false ) }
+				/>
+			) }
+		</>
+	);
+}

package/src/components/page-template-parts/index.js

@@ -7,8 +7,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -19,8 +18,7 @@ import Table from '../table';
 import Link from '../routes/link';
 import AddedBy from '../list/added-by';
 import TemplateActions from '../template-actions';
-import AddNewTemplate from '../add-new-template';
-import { store as editSiteStore } from '../../store';
+import AddNewTemplatePart from './add-new-template-part';
 
 export default function PageTemplateParts() {
 	const { records: templateParts } = useEntityRecords(
@@ -31,15 +29,6 @@ export default function PageTemplateParts() {
 		}
 	);
 
-	const { canCreate } = useSelect( ( select ) => {
-		const { supportsTemplatePartsMode } =
-			select( editSiteStore ).getSettings();
-		return {
-			postType: select( coreStore ).getPostType( 'wp_template_part' ),
-			canCreate: ! supportsTemplatePartsMode,
-		};
-	} );
-
 	const columns = [
 		{
 			header: __( 'Template Part' ),
@@ -87,15 +76,7 @@ export default function PageTemplateParts() {
 	return (
 		<Page
 			title={ __( 'Template Parts' ) }
-			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ 'wp_template_part' }
-						showIcon={ false }
-						toggleProps={ { variant: 'primary' } }
-					/>
-				)
-			}
+			actions={ <AddNewTemplatePart /> }
 		>
 			{ templateParts && (
 				<Table data={ templateParts } columns={ columns } />