@wordpress/edit-site 5.11.0 → 5.12.1

package/src/components/page-library/patterns-list.js

@@ -0,0 +1,114 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	SearchControl,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Flex,
+	FlexBlock,
+} from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { symbol, chevronLeft, chevronRight } from '@wordpress/icons';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useViewportMatch } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import Grid from './grid';
+import NoPatterns from './no-patterns';
+import usePatterns from './use-patterns';
+import SidebarButton from '../sidebar-button';
+import useDebouncedInput from '../../utils/use-debounced-input';
+import { unlock } from '../../lock-unlock';
+
+const { useLocation, useHistory } = unlock( routerPrivateApis );
+
+export default function PatternsList( { categoryId, type } ) {
+	const location = useLocation();
+	const history = useHistory();
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const [ filterValue, setFilterValue, delayedFilterValue ] =
+		useDebouncedInput( '' );
+
+	const [ patterns, isResolving ] = usePatterns(
+		type,
+		categoryId,
+		delayedFilterValue
+	);
+
+	const { syncedPatterns, unsyncedPatterns } = patterns;
+	const hasPatterns = !! syncedPatterns.length || !! unsyncedPatterns.length;
+
+	return (
+		<VStack spacing={ 6 }>
+			<Flex>
+				{ isMobileViewport && (
+					<SidebarButton
+						icon={ isRTL() ? chevronRight : chevronLeft }
+						label={ __( 'Back' ) }
+						onClick={ () => {
+							// Go back in history if we came from the library page.
+							// Otherwise push a stack onto the history.
+							if ( location.state?.backPath === '/library' ) {
+								history.back();
+							} else {
+								history.push( { path: '/library' } );
+							}
+						} }
+					/>
+				) }
+				<FlexBlock>
+					<SearchControl
+						className="edit-site-library__search"
+						onChange={ ( value ) => setFilterValue( value ) }
+						placeholder={ __( 'Search patterns' ) }
+						label={ __( 'Search patterns' ) }
+						value={ filterValue }
+						__nextHasNoMarginBottom
+					/>
+				</FlexBlock>
+			</Flex>
+			{ isResolving && __( 'Loading' ) }
+			{ ! isResolving && !! syncedPatterns.length && (
+				<>
+					<VStack className="edit-site-library__section-header">
+						<Heading level={ 4 }>{ __( 'Synced' ) }</Heading>
+						<Text variant="muted" as="p">
+							{ __(
+								'Patterns that are kept in sync across your site'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						icon={ symbol }
+						categoryId={ categoryId }
+						label={ __( 'Synced patterns' ) }
+						items={ syncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && !! unsyncedPatterns.length && (
+				<>
+					<VStack className="edit-site-library__section-header">
+						<Heading level={ 4 }>{ __( 'Standard' ) }</Heading>
+						<Text variant="muted" as="p">
+							{ __(
+								'Patterns that can be changed freely without affecting your site'
+							) }
+						</Text>
+					</VStack>
+					<Grid
+						categoryId={ categoryId }
+						label={ __( 'Standard patterns' ) }
+						items={ unsyncedPatterns }
+					/>
+				</>
+			) }
+			{ ! isResolving && ! hasPatterns && <NoPatterns /> }
+		</VStack>
+	);
+}

package/src/components/page-library/search-items.js

@@ -0,0 +1,171 @@
+/**
+ * External dependencies
+ */
+import removeAccents from 'remove-accents';
+import { noCase } from 'change-case';
+
+// Default search helpers.
+const defaultGetName = ( item ) => item.name || '';
+const defaultGetTitle = ( item ) => item.title;
+const defaultGetDescription = ( item ) => item.description || '';
+const defaultGetKeywords = ( item ) => item.keywords || [];
+const defaultHasCategory = () => false;
+
+/**
+ * Extracts words from an input string.
+ *
+ * @param {string} input The input string.
+ *
+ * @return {Array} Words, extracted from the input string.
+ */
+function extractWords( input = '' ) {
+	return noCase( input, {
+		splitRegexp: [
+			/([\p{Ll}\p{Lo}\p{N}])([\p{Lu}\p{Lt}])/gu, // One lowercase or digit, followed by one uppercase.
+			/([\p{Lu}\p{Lt}])([\p{Lu}\p{Lt}][\p{Ll}\p{Lo}])/gu, // One uppercase followed by one uppercase and one lowercase.
+		],
+		stripRegexp: /(\p{C}|\p{P}|\p{S})+/giu, // Anything that's not a punctuation, symbol or control/format character.
+	} )
+		.split( ' ' )
+		.filter( Boolean );
+}
+
+/**
+ * Sanitizes the search input string.
+ *
+ * @param {string} input The search input to normalize.
+ *
+ * @return {string} The normalized search input.
+ */
+function normalizeSearchInput( input = '' ) {
+	// Disregard diacritics.
+	//  Input: "média"
+	input = removeAccents( input );
+
+	// Accommodate leading slash, matching autocomplete expectations.
+	//  Input: "/media"
+	input = input.replace( /^\//, '' );
+
+	// Lowercase.
+	//  Input: "MEDIA"
+	input = input.toLowerCase();
+
+	return input;
+}
+
+/**
+ * Converts the search term into a list of normalized terms.
+ *
+ * @param {string} input The search term to normalize.
+ *
+ * @return {string[]} The normalized list of search terms.
+ */
+export const getNormalizedSearchTerms = ( input = '' ) => {
+	return extractWords( normalizeSearchInput( input ) );
+};
+
+const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
+	return unmatchedTerms.filter(
+		( term ) =>
+			! getNormalizedSearchTerms( unprocessedTerms ).some(
+				( unprocessedTerm ) => unprocessedTerm.includes( term )
+			)
+	);
+};
+
+/**
+ * Filters an item list given a search term.
+ *
+ * @param {Array}  items       Item list
+ * @param {string} searchInput Search input.
+ * @param {Object} config      Search Config.
+ *
+ * @return {Array} Filtered item list.
+ */
+export const searchItems = ( items = [], searchInput = '', config = {} ) => {
+	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+	const onlyFilterByCategory = ! normalizedSearchTerms.length;
+	const searchRankConfig = { ...config, onlyFilterByCategory };
+
+	// If we aren't filtering on search terms, matching on category is satisfactory.
+	// If we are, then we need more than a category match.
+	const threshold = onlyFilterByCategory ? 0 : 1;
+
+	const rankedItems = items
+		.map( ( item ) => {
+			return [
+				item,
+				getItemSearchRank( item, searchInput, searchRankConfig ),
+			];
+		} )
+		.filter( ( [ , rank ] ) => rank > threshold );
+
+	// If we didn't have terms to search on, there's no point sorting.
+	if ( normalizedSearchTerms.length === 0 ) {
+		return rankedItems.map( ( [ item ] ) => item );
+	}
+
+	rankedItems.sort( ( [ , rank1 ], [ , rank2 ] ) => rank2 - rank1 );
+	return rankedItems.map( ( [ item ] ) => item );
+};
+
+/**
+ * Get the search rank for a given item and a specific search term.
+ * The better the match, the higher the rank.
+ * If the rank equals 0, it should be excluded from the results.
+ *
+ * @param {Object} item       Item to filter.
+ * @param {string} searchTerm Search term.
+ * @param {Object} config     Search Config.
+ *
+ * @return {number} Search Rank.
+ */
+function getItemSearchRank( item, searchTerm, config ) {
+	const {
+		categoryId,
+		getName = defaultGetName,
+		getTitle = defaultGetTitle,
+		getDescription = defaultGetDescription,
+		getKeywords = defaultGetKeywords,
+		hasCategory = defaultHasCategory,
+		onlyFilterByCategory,
+	} = config;
+
+	let rank = hasCategory( item, categoryId ) ? 1 : 0;
+
+	// If an item doesn't belong to the current category or we don't have
+	// search terms to filter by, return the initial rank value.
+	if ( ! rank || onlyFilterByCategory ) {
+		return rank;
+	}
+
+	const name = getName( item );
+	const title = getTitle( item );
+	const description = getDescription( item );
+	const keywords = getKeywords( item );
+
+	const normalizedSearchInput = normalizeSearchInput( searchTerm );
+	const normalizedTitle = normalizeSearchInput( title );
+
+	// Prefers exact matches
+	// Then prefers if the beginning of the title matches the search term
+	// name, keywords, description matches come later.
+	if ( normalizedSearchInput === normalizedTitle ) {
+		rank += 30;
+	} else if ( normalizedTitle.startsWith( normalizedSearchInput ) ) {
+		rank += 20;
+	} else {
+		const terms = [ name, title, description, ...keywords ].join( ' ' );
+		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const unmatchedTerms = removeMatchingTerms(
+			normalizedSearchTerms,
+			terms
+		);
+
+		if ( unmatchedTerms.length === 0 ) {
+			rank += 10;
+		}
+	}
+
+	return rank;
+}

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

@@ -0,0 +1,105 @@
+.edit-site-library {
+	background: rgba(0, 0, 0, 0.05);
+	margin: $header-height 0 0;
+	.components-text {
+		color: $gray-600;
+	}
+
+	.components-heading {
+		color: $white;
+	}
+
+	@include break-medium {
+		margin: 0;
+	}
+}
+
+.edit-site-library__grid {
+	column-gap: $grid-unit-30;
+	@include break-large() {
+		column-count: 2;
+	}
+
+	// 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;
+
+	.edit-site-library__pattern {
+		break-inside: avoid-column;
+		display: flex;
+		flex-direction: column;
+		margin-bottom: $grid-unit-60;
+
+		.edit-site-library__preview {
+			border-radius: $radius-block-ui;
+			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);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 2px solid transparent;
+			}
+
+			&.is-inactive {
+				cursor: default;
+			}
+		}
+
+		.edit-site-library__footer,
+		.edit-site-library__button {
+			color: $gray-600;
+		}
+
+		&.is-placeholder .edit-site-library__preview {
+			min-height: $grid-unit-80;
+			color: $gray-600;
+			border: 1px dashed $gray-800;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&:focus {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			}
+		}
+	}
+
+	.edit-site-library__preview {
+		flex: 1;
+		margin-bottom: $grid-unit-20;
+	}
+}
+
+// The increased specificity here is to overcome component styles
+// without relying on internal component class names.
+.edit-site-library__search {
+	&#{&} input[type="search"] {
+		background: $gray-800;
+		color: $gray-100;
+
+		&:focus {
+			background: $gray-800;
+		}
+	}
+
+	svg {
+		fill: $gray-600;
+	}
+}
+
+.edit-site-library__pattern-title {
+	color: $gray-600;
+
+	svg {
+		border-radius: $grid-unit-05;
+		background: var(--wp-block-synced-color);
+		fill: $white;
+	}
+}
+
+.edit-site-library__no-results {
+	color: $gray-600;
+}

package/src/components/page-library/use-library-settings.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import { filterOutDuplicatesByName } from './utils';
+
+export default function useLibrarySettings() {
+	const storedSettings = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		return getSettings();
+	}, [] );
+
+	const settingsBlockPatterns =
+		storedSettings.__experimentalAdditionalBlockPatterns ?? // WP 6.0
+		storedSettings.__experimentalBlockPatterns; // WP 5.9
+
+	const restBlockPatterns = useSelect(
+		( select ) => select( coreStore ).getBlockPatterns(),
+		[]
+	);
+
+	const blockPatterns = useMemo(
+		() =>
+			[
+				...( settingsBlockPatterns || [] ),
+				...( restBlockPatterns || [] ),
+			].filter( filterOutDuplicatesByName ),
+		[ settingsBlockPatterns, restBlockPatterns ]
+	);
+
+	const settings = useMemo( () => {
+		const { __experimentalAdditionalBlockPatterns, ...restStoredSettings } =
+			storedSettings;
+
+		return {
+			...restStoredSettings,
+			__experimentalBlockPatterns: blockPatterns,
+			__unstableIsPreviewMode: true,
+		};
+	}, [ storedSettings, blockPatterns ] );
+
+	return settings;
+}

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

@@ -0,0 +1,238 @@
+/**
+ * WordPress dependencies
+ */
+import { parse } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	CORE_PATTERN_SOURCES,
+	PATTERNS,
+	SYNC_TYPES,
+	TEMPLATE_PARTS,
+	USER_PATTERNS,
+	USER_PATTERN_CATEGORY,
+	filterOutDuplicatesByName,
+} from './utils';
+import { unlock } from '../../lock-unlock';
+import { searchItems } from './search-items';
+import { store as editSiteStore } from '../../store';
+
+const EMPTY_PATTERN_LIST = [];
+
+const createTemplatePartId = ( theme, slug ) =>
+	theme && slug ? theme + '//' + slug : null;
+
+const templatePartToPattern = ( templatePart ) => ( {
+	blocks: parse( templatePart.content.raw ),
+	categories: [ templatePart.area ],
+	description: templatePart.description || '',
+	keywords: templatePart.keywords || [],
+	name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+	title: templatePart.title.rendered,
+	type: templatePart.type,
+	templatePart,
+} );
+
+const useTemplatePartsAsPatterns = (
+	categoryId,
+	postType = TEMPLATE_PARTS,
+	filterValue = ''
+) => {
+	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 filteredTemplateParts = useMemo( () => {
+		if ( ! templateParts ) {
+			return EMPTY_PATTERN_LIST;
+		}
+
+		return searchItems( templateParts, filterValue, {
+			categoryId,
+			hasCategory: ( item, area ) => item.templatePart.area === area,
+		} );
+	}, [ templateParts, filterValue, categoryId ] );
+
+	return { templateParts: filteredTemplateParts, isResolving };
+};
+
+const useThemePatterns = (
+	categoryId,
+	postType = PATTERNS,
+	filterValue = ''
+) => {
+	const blockPatterns = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+		const settings = getSettings();
+		return (
+			settings.__experimentalAdditionalBlockPatterns ??
+			settings.__experimentalBlockPatterns
+		);
+	} );
+
+	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 searchItems( patterns, filterValue, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
+		} );
+	}, [ patterns, filterValue, categoryId, postType ] );
+
+	return filteredPatterns;
+};
+
+const reusableBlockToPattern = ( reusableBlock ) => ( {
+	blocks: parse( reusableBlock.content.raw ),
+	categories: reusableBlock.wp_pattern,
+	id: reusableBlock.id,
+	name: reusableBlock.slug,
+	syncStatus: reusableBlock.meta?.sync_status,
+	title: reusableBlock.title.raw,
+	type: reusableBlock.type,
+	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 { 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 filteredPatterns = useMemo( () => {
+		if ( ! unfilteredPatterns.length ) {
+			return EMPTY_PATTERN_LIST;
+		}
+
+		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: [] };
+
+	filteredPatterns.forEach( ( pattern ) => {
+		if ( pattern.syncStatus === SYNC_TYPES.full ) {
+			patterns.syncedPatterns.push( pattern );
+		} else {
+			patterns.unsyncedPatterns.push( pattern );
+		}
+	} );
+
+	return patterns;
+};
+
+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
+	);
+
+	const patterns = {
+		syncedPatterns: [ ...templateParts, ...syncedPatterns ],
+		unsyncedPatterns: [ ...blockPatterns, ...unsyncedPatterns ],
+	};
+
+	return [ patterns, isResolving ];
+};
+
+export default usePatterns;

package/src/components/page-library/utils.js

@@ -0,0 +1,21 @@
+export const DEFAULT_CATEGORY = 'header';
+export const DEFAULT_TYPE = 'wp_template_part';
+export const PATTERNS = 'pattern';
+export const TEMPLATE_PARTS = 'wp_template_part';
+export const USER_PATTERNS = 'wp_block';
+export const USER_PATTERN_CATEGORY = 'custom-patterns';
+
+export const CORE_PATTERN_SOURCES = [
+	'core',
+	'pattern-directory/core',
+	'pattern-directory/featured',
+	'pattern-directory/theme',
+];
+
+export const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+export const filterOutDuplicatesByName = ( currentItem, index, items ) =>
+	index === items.findIndex( ( item ) => currentItem.name === item.name );