@wordpress/edit-site 5.13.0 → 5.15.0

package/src/components/page-library/grid-item.js

@@ -1,179 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { BlockPreview } from '@wordpress/block-editor';
-import {
-	__experimentalConfirmDialog as ConfirmDialog,
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	__experimentalHeading as Heading,
-	__experimentalHStack as HStack,
-	__unstableCompositeItem as CompositeItem,
-} from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
-import { Icon, moreHorizontal } from '@wordpress/icons';
-import { store as noticesStore } from '@wordpress/notices';
-import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
-
-/**
- * Internal dependencies
- */
-import { PATTERNS, USER_PATTERNS } from './utils';
-import { useLink } from '../routes/link';
-
-export default function GridItem( { categoryId, composite, icon, item } ) {
-	const instanceId = useInstanceId( GridItem );
-	const descriptionId = `edit-site-library__pattern-description-${ instanceId }`;
-	const [ isDeleteDialogOpen, setIsDeleteDialogOpen ] = useState( false );
-
-	const { __experimentalDeleteReusableBlock } =
-		useDispatch( reusableBlocksStore );
-	const { createErrorNotice, createSuccessNotice } =
-		useDispatch( noticesStore );
-
-	const { onClick } = useLink( {
-		postType: item.type,
-		postId: item.type === USER_PATTERNS ? item.id : item.name,
-		categoryId,
-		categoryType: item.type,
-		canvas: 'edit',
-	} );
-
-	const isEmpty = ! item.blocks?.length;
-	const patternClassNames = classnames( 'edit-site-library__pattern', {
-		'is-placeholder': isEmpty,
-	} );
-	const previewClassNames = classnames( 'edit-site-library__preview', {
-		'is-inactive': item.type === PATTERNS,
-	} );
-
-	const deletePattern = async () => {
-		try {
-			await __experimentalDeleteReusableBlock( item.id );
-			createSuccessNotice( __( 'Pattern successfully deleted.' ), {
-				type: 'snackbar',
-			} );
-		} catch ( error ) {
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: __( 'An error occurred while deleting the pattern.' );
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	};
-
-	let ariaDescription;
-	if ( item.type === USER_PATTERNS ) {
-		// User patterns don't have descriptions, but can be edited and deleted, so include some help text.
-		ariaDescription = __(
-			'Press Enter to edit, or Delete to delete the pattern.'
-		);
-	} else if ( item.description ) {
-		ariaDescription = item.description;
-	}
-
-	return (
-		<>
-			<div className={ patternClassNames }>
-				<CompositeItem
-					className={ previewClassNames }
-					role="option"
-					as="div"
-					{ ...composite }
-					onClick={ item.type !== PATTERNS ? onClick : undefined }
-					aria-label={ item.title }
-					aria-describedby={
-						ariaDescription ? descriptionId : undefined
-					}
-					onKeyDown={ ( event ) => {
-						if (
-							DELETE === event.keyCode ||
-							BACKSPACE === event.keyCode
-						) {
-							setIsDeleteDialogOpen( true );
-						}
-					} }
-				>
-					{ isEmpty && __( 'Empty pattern' ) }
-					{ ! isEmpty && <BlockPreview blocks={ item.blocks } /> }
-				</CompositeItem>
-				{ ariaDescription && (
-					<div
-						aria-hidden="true"
-						style={ { display: 'none' } }
-						id={ descriptionId }
-					>
-						{ ariaDescription }
-					</div>
-				) }
-				<HStack
-					aria-hidden="true"
-					className="edit-site-library__footer"
-					justify="space-between"
-				>
-					<HStack
-						alignment="center"
-						justify="left"
-						spacing={ 3 }
-						className="edit-site-library__pattern-title"
-					>
-						{ icon && <Icon icon={ icon } /> }
-						<Heading level={ 5 }>{ item.title }</Heading>
-					</HStack>
-					{ item.type === USER_PATTERNS && (
-						<DropdownMenu
-							icon={ moreHorizontal }
-							label={ __( 'Actions' ) }
-							className="edit-site-library__dropdown"
-							popoverProps={ { placement: 'bottom-end' } }
-							toggleProps={ {
-								className: 'edit-site-library__button',
-								isSmall: true,
-								describedBy: sprintf(
-									/* translators: %s: pattern name */
-									__( 'Action menu for %s pattern' ),
-									item.title
-								),
-								// The dropdown menu is not focusable using the
-								// keyboard as this would interfere with the grid's
-								// roving tab index system. Instead, keyboard users
-								// use keyboard shortcuts to trigger actions.
-								tabIndex: -1,
-							} }
-						>
-							{ () => (
-								<MenuGroup>
-									<MenuItem
-										onClick={ () =>
-											setIsDeleteDialogOpen( true )
-										}
-									>
-										{ __( 'Delete' ) }
-									</MenuItem>
-								</MenuGroup>
-							) }
-						</DropdownMenu>
-					) }
-				</HStack>
-			</div>
-			{ isDeleteDialogOpen && (
-				<ConfirmDialog
-					onConfirm={ deletePattern }
-					onCancel={ () => setIsDeleteDialogOpen( false ) }
-				>
-					{ __( 'Are you sure you want to delete this pattern?' ) }
-				</ConfirmDialog>
-			) }
-		</>
-	);
-}

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

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import GridItem from './grid-item';
-
-export default function Grid( { categoryId, label, icon, items } ) {
-	const composite = useCompositeState( { orientation: 'vertical' } );
-
-	if ( ! items?.length ) {
-		return null;
-	}
-
-	return (
-		<Composite
-			{ ...composite }
-			role="listbox"
-			className="edit-site-library__grid"
-			aria-label={ label }
-		>
-			{ items.map( ( item ) => (
-				<GridItem
-					key={ item.name }
-					icon={ icon }
-					item={ item }
-					categoryId={ categoryId }
-					composite={ composite }
-				/>
-			) ) }
-		</Composite>
-	);
-}

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

@@ -1,114 +0,0 @@
-/**
- * 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/style.scss

@@ -1,105 +0,0 @@
-.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-patterns.js

@@ -1,238 +0,0 @@
-/**
- * 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;