@wordpress/edit-site 5.28.2 → 5.29.0

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

@@ -1,229 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element';
-import {
-	SearchControl,
-	__experimentalVStack as VStack,
-	Flex,
-	FlexBlock,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
-} from '@wordpress/components';
-import { __, _x, isRTL } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	useAsyncList,
-	useViewportMatch,
-	useDebouncedInput,
-} from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import PatternsHeader from './header';
-import Grid from './grid';
-import NoPatterns from './no-patterns';
-import usePatterns from './use-patterns';
-import SidebarButton from '../sidebar-button';
-import { unlock } from '../../lock-unlock';
-import { PATTERN_SYNC_TYPES, PATTERN_TYPES } from '../../utils/constants';
-import Pagination from '../pagination';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-const SYNC_FILTERS = {
-	all: _x( 'All', 'Option that shows all patterns' ),
-	[ PATTERN_SYNC_TYPES.full ]: _x(
-		'Synced',
-		'Option that shows all synchronized patterns'
-	),
-	[ PATTERN_SYNC_TYPES.unsynced ]: _x(
-		'Not synced',
-		'Option that shows all patterns that are not synchronized'
-	),
-};
-
-const SYNC_DESCRIPTIONS = {
-	all: '',
-	[ PATTERN_SYNC_TYPES.full ]: __(
-		'Patterns that are kept in sync across the site.'
-	),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __(
-		'Patterns that can be changed freely without affecting the site.'
-	),
-};
-
-const PAGE_SIZE = 20;
-
-export default function PatternsList( { categoryId, type } ) {
-	const location = useLocation();
-	const history = useHistory();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ filterValue, setFilterValue, delayedFilterValue ] =
-		useDebouncedInput( '' );
-	const deferredFilterValue = useDeferredValue( delayedFilterValue );
-
-	const [ syncFilter, setSyncFilter ] = useState( 'all' );
-	const [ currentPage, setCurrentPage ] = useState( 1 );
-
-	const deferredSyncedFilter = useDeferredValue( syncFilter );
-
-	const isUncategorizedThemePatterns =
-		type === PATTERN_TYPES.theme && categoryId === 'uncategorized';
-
-	const { patterns, isResolving } = usePatterns(
-		type,
-		isUncategorizedThemePatterns ? '' : categoryId,
-		{
-			search: deferredFilterValue,
-			syncStatus:
-				deferredSyncedFilter === 'all'
-					? undefined
-					: deferredSyncedFilter,
-		}
-	);
-
-	const updateSearchFilter = ( value ) => {
-		setCurrentPage( 1 );
-		setFilterValue( value );
-	};
-
-	const updateSyncFilter = ( value ) => {
-		setCurrentPage( 1 );
-		setSyncFilter( value );
-	};
-
-	const id = useId();
-	const titleId = `${ id }-title`;
-	const descriptionId = `${ id }-description`;
-
-	const hasPatterns = patterns.length;
-	const title = SYNC_FILTERS[ syncFilter ];
-	const description = SYNC_DESCRIPTIONS[ syncFilter ];
-
-	const totalItems = patterns.length;
-	const pageIndex = currentPage - 1;
-	const numPages = Math.ceil( patterns.length / PAGE_SIZE );
-
-	const list = useMemo( () => {
-		return patterns.slice(
-			pageIndex * PAGE_SIZE,
-			pageIndex * PAGE_SIZE + PAGE_SIZE
-		);
-	}, [ pageIndex, patterns ] );
-
-	const asyncList = useAsyncList( list, { step: 10 } );
-
-	const changePage = ( page ) => {
-		const scrollContainer = document.querySelector( '.edit-site-patterns' );
-		scrollContainer?.scrollTo( 0, 0 );
-
-		setCurrentPage( page );
-	};
-
-	return (
-		<>
-			<VStack className="edit-site-patterns__header" spacing={ 6 }>
-				<PatternsHeader
-					categoryId={ categoryId }
-					type={ type }
-					titleId={ titleId }
-					descriptionId={ descriptionId }
-				/>
-				<Flex alignment="stretch" wrap>
-					{ isMobileViewport && (
-						<SidebarButton
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							label={ __( 'Back' ) }
-							onClick={ () => {
-								// Go back in history if we came from the Patterns page.
-								// Otherwise push a stack onto the history.
-								if (
-									location.state?.backPath === '/patterns'
-								) {
-									history.back();
-								} else {
-									history.push( { path: '/patterns' } );
-								}
-							} }
-						/>
-					) }
-					<FlexBlock className="edit-site-patterns__search-block">
-						<SearchControl
-							className="edit-site-patterns__search"
-							onChange={ ( value ) =>
-								updateSearchFilter( value )
-							}
-							placeholder={ __( 'Search patterns' ) }
-							label={ __( 'Search patterns' ) }
-							value={ filterValue }
-							__nextHasNoMarginBottom
-						/>
-					</FlexBlock>
-					{ type === PATTERN_TYPES.theme && (
-						<ToggleGroupControl
-							className="edit-site-patterns__sync-status-filter"
-							hideLabelFromVision
-							label={ __( 'Filter by sync status' ) }
-							value={ syncFilter }
-							isBlock
-							onChange={ ( value ) => updateSyncFilter( value ) }
-							__nextHasNoMarginBottom
-						>
-							{ Object.entries( SYNC_FILTERS ).map(
-								( [ key, label ] ) => (
-									<ToggleGroupControlOption
-										className="edit-site-patterns__sync-status-filter-option"
-										key={ key }
-										value={ key }
-										label={ label }
-									/>
-								)
-							) }
-						</ToggleGroupControl>
-					) }
-				</Flex>
-			</VStack>
-			<VStack
-				className="edit-site-patterns__section"
-				justify="flex-start"
-				spacing={ 6 }
-			>
-				{ syncFilter !== 'all' && (
-					<VStack className="edit-site-patterns__section-header">
-						<Heading as="h3" level={ 5 } id={ titleId }>
-							{ title }
-						</Heading>
-						{ description ? (
-							<Text variant="muted" as="p" id={ descriptionId }>
-								{ description }
-							</Text>
-						) : null }
-					</VStack>
-				) }
-				{ hasPatterns && (
-					<Grid
-						categoryId={ categoryId }
-						items={ asyncList }
-						aria-labelledby={ titleId }
-						aria-describedby={ descriptionId }
-					/>
-				) }
-				{ ! isResolving && ! hasPatterns && <NoPatterns /> }
-			</VStack>
-			{ numPages > 1 && (
-				<Pagination
-					className="edit-site-patterns__pagination"
-					currentPage={ currentPage }
-					numPages={ numPages }
-					changePage={ changePage }
-					totalItems={ totalItems }
-				/>
-			) }
-		</>
-	);
-}

package/src/components/page-patterns/rename-menu-item.js

@@ -1,132 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	MenuItem,
-	Modal,
-	TextControl,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-export default function RenameMenuItem( { item, onClose } ) {
-	const [ title, setTitle ] = useState( () => item.title );
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	const { editEntityRecord, saveEditedEntityRecord } =
-		useDispatch( coreStore );
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
-
-	if ( item.type === TEMPLATE_PART_POST_TYPE && ! item.isCustom ) {
-		return null;
-	}
-
-	async function onRename( event ) {
-		event.preventDefault();
-
-		try {
-			await editEntityRecord( 'postType', item.type, item.id, { title } );
-
-			// Update state before saving rerenders the list.
-			setTitle( '' );
-			setIsModalOpen( false );
-			onClose();
-
-			// Persist edited entity.
-			await saveEditedEntityRecord( 'postType', item.type, item.id, {
-				throwOnError: true,
-			} );
-
-			createSuccessNotice(
-				item.type === TEMPLATE_PART_POST_TYPE
-					? __( 'Template part renamed.' )
-					: __( 'Pattern renamed.' ),
-				{
-					type: 'snackbar',
-				}
-			);
-		} catch ( error ) {
-			const fallbackErrorMessage =
-				item.type === TEMPLATE_PART_POST_TYPE
-					? __(
-							'An error occurred while renaming the template part.'
-					  )
-					: __( 'An error occurred while renaming the pattern.' );
-			const errorMessage =
-				error.message && error.code !== 'unknown_error'
-					? error.message
-					: fallbackErrorMessage;
-
-			createErrorNotice( errorMessage, { type: 'snackbar' } );
-		}
-	}
-
-	return (
-		<>
-			<MenuItem
-				onClick={ () => {
-					setIsModalOpen( true );
-					setTitle( item.title );
-				} }
-			>
-				{ __( 'Rename' ) }
-			</MenuItem>
-			{ isModalOpen && (
-				<Modal
-					title={ __( 'Rename' ) }
-					onRequestClose={ () => {
-						setIsModalOpen( false );
-						onClose();
-					} }
-					overlayClassName="edit-site-list__rename-modal"
-				>
-					<form onSubmit={ onRename }>
-						<VStack spacing="5">
-							<TextControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Name' ) }
-								value={ title }
-								onChange={ setTitle }
-								required
-							/>
-
-							<HStack justify="right">
-								<Button
-									__next40pxDefaultSize
-									variant="tertiary"
-									onClick={ () => {
-										setIsModalOpen( false );
-										onClose();
-									} }
-								>
-									{ __( 'Cancel' ) }
-								</Button>
-
-								<Button
-									__next40pxDefaultSize
-									variant="primary"
-									type="submit"
-								>
-									{ __( 'Save' ) }
-								</Button>
-							</HStack>
-						</VStack>
-					</form>
-				</Modal>
-			) }
-		</>
-	);
-}

package/src/components/sidebar-edit-mode/template-panel/replace-template-button.js

@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { MenuItem, Modal } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { useAsyncList } from '@wordpress/compose';
-import { serialize } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-export default function ReplaceTemplateButton( {
-	onClick,
-	availableTemplates,
-} ) {
-	const { editEntityRecord } = useDispatch( coreStore );
-	const [ showModal, setShowModal ] = useState( false );
-	const onClose = () => {
-		setShowModal( false );
-	};
-
-	const { postId, postType } = useSelect( ( select ) => {
-		return {
-			postId: select( editSiteStore ).getEditedPostId(),
-			postType: select( editSiteStore ).getEditedPostType(),
-		};
-	}, [] );
-
-	const onTemplateSelect = async ( selectedTemplate ) => {
-		onClose(); // Close the template suggestions modal first.
-		onClick();
-		await editEntityRecord( 'postType', postType, postId, {
-			blocks: selectedTemplate.blocks,
-			content: serialize( selectedTemplate.blocks ),
-		} );
-	};
-
-	if ( ! availableTemplates.length || availableTemplates.length < 1 ) {
-		return null;
-	}
-
-	return (
-		<>
-			<MenuItem
-				info={ __(
-					'Replace the contents of this template with another.'
-				) }
-				onClick={ () => setShowModal( true ) }
-			>
-				{ __( 'Replace template' ) }
-			</MenuItem>
-
-			{ showModal && (
-				<Modal
-					title={ __( 'Choose a template' ) }
-					onRequestClose={ onClose }
-					overlayClassName="edit-site-template-panel__replace-template-modal"
-					isFullScreen
-				>
-					<div className="edit-site-template-panel__replace-template-modal__content">
-						<TemplatesList
-							availableTemplates={ availableTemplates }
-							onSelect={ onTemplateSelect }
-						/>
-					</div>
-				</Modal>
-			) }
-		</>
-	);
-}
-
-function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
-
-	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-		/>
-	);
-}

package/src/hooks/navigation-menu-edit.js

@@ -1,92 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { BlockControls, useBlockEditingMode } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { ToolbarButton } from '@wordpress/components';
-import { addFilter } from '@wordpress/hooks';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { useLink } from '../components/routes/link';
-import { unlock } from '../lock-unlock';
-import { NAVIGATION_POST_TYPE } from '../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-function NavigationMenuEdit( { attributes } ) {
-	const { ref } = attributes;
-	const { params } = useLocation();
-	const blockEditingMode = useBlockEditingMode();
-	const navigationMenu = useSelect(
-		( select ) => {
-			return select( coreStore ).getEntityRecord(
-				'postType',
-				NAVIGATION_POST_TYPE,
-				// Ideally this should be an official public API.
-				ref
-			);
-		},
-		[ ref ]
-	);
-
-	const linkProps = useLink(
-		{
-			postId: navigationMenu?.id,
-			postType: navigationMenu?.type,
-			canvas: 'edit',
-		},
-		{
-			// this applies to Navigation Menus as well.
-			fromTemplateId: params.postId || navigationMenu?.id,
-		}
-	);
-
-	// A non-default setting for block editing mode indicates that the
-	// editor should restrict "editing" actions. Therefore the `Edit` button
-	// should not be displayed.
-	if ( ! navigationMenu || blockEditingMode !== 'default' ) {
-		return null;
-	}
-
-	return (
-		<BlockControls group="other">
-			<ToolbarButton
-				{ ...linkProps }
-				onClick={ ( event ) => {
-					linkProps.onClick( event );
-				} }
-			>
-				{ __( 'Edit' ) }
-			</ToolbarButton>
-		</BlockControls>
-	);
-}
-
-export const withEditBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { attributes, name } = props;
-		const isDisplayed = name === 'core/navigation' && attributes.ref;
-
-		return (
-			<>
-				<BlockEdit { ...props } />
-				{ isDisplayed && (
-					<NavigationMenuEdit attributes={ attributes } />
-				) }
-			</>
-		);
-	},
-	'withEditBlockControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-site/navigation-edit-button',
-	withEditBlockControls
-);