@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

package/src/components/page-templates/dataviews-templates.js

@@ -1,345 +0,0 @@
-/**
- * External dependencies
- */
-import removeAccents from 'remove-accents';
-
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	__experimentalHeading as Heading,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
-import { useState, useMemo, useCallback } from '@wordpress/element';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { parse } from '@wordpress/blocks';
-import {
-	BlockPreview,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Page from '../page';
-import Link from '../routes/link';
-import { useAddedBy, AvatarImage } from '../list/added-by';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-import { DataViews } from '../dataviews';
-import { ENUMERATION_TYPE, OPERATOR_IN } from '../dataviews/constants';
-import {
-	useResetTemplateAction,
-	deleteTemplateAction,
-	renameTemplateAction,
-} from './template-actions';
-import usePatternSettings from '../page-patterns/use-pattern-settings';
-import { unlock } from '../../lock-unlock';
-
-const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
-	blockEditorPrivateApis
-);
-
-const EMPTY_ARRAY = [];
-
-const defaultConfigPerViewType = {
-	list: {},
-	grid: {
-		mediaField: 'preview',
-		primaryField: 'title',
-	},
-};
-
-const DEFAULT_VIEW = {
-	type: 'list',
-	search: '',
-	page: 1,
-	perPage: 20,
-	// All fields are visible by default, so it's
-	// better to keep track of the hidden ones.
-	hiddenFields: [ 'preview' ],
-	layout: {},
-	filters: [],
-};
-
-function normalizeSearchInput( input = '' ) {
-	return removeAccents( input.trim().toLowerCase() );
-}
-
-// TODO: these are going to be reused in the template part list.
-// That's the reason for leaving the template parts code for now.
-function TemplateTitle( { item } ) {
-	const { isCustomized } = useAddedBy( item.type, item.id );
-	return (
-		<VStack spacing={ 1 }>
-			<Heading as="h3" level={ 5 }>
-				<Link
-					params={ {
-						postId: item.id,
-						postType: item.type,
-						canvas: 'edit',
-					} }
-				>
-					{ decodeEntities( item.title?.rendered || item.slug ) ||
-						__( '(no title)' ) }
-				</Link>
-			</Heading>
-			{ isCustomized && (
-				<span className="edit-site-list-added-by__customized-info">
-					{ item.type === TEMPLATE_POST_TYPE
-						? _x( 'Customized', 'template' )
-						: _x( 'Customized', 'template part' ) }
-				</span>
-			) }
-		</VStack>
-	);
-}
-
-function AuthorField( { item } ) {
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ imageUrl ? (
-				<AvatarImage imageUrl={ imageUrl } />
-			) : (
-				<div className="edit-site-list-added-by__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span>{ text }</span>
-		</HStack>
-	);
-}
-
-function TemplatePreview( { content, viewType } ) {
-	const settings = usePatternSettings();
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const blocks = useMemo( () => {
-		return parse( content );
-	}, [ content ] );
-	if ( ! blocks?.length ) {
-		return null;
-	}
-	// Wrap everything in a block editor provider to ensure 'styles' that are needed
-	// for the previews are synced between the site editor store and the block editor store.
-	// Additionally we need to have the `__experimentalBlockPatterns` setting in order to
-	// render patterns inside the previews.
-	// TODO: Same approach is used in the patterns list and it becomes obvious that some of
-	// the block editor settings are needed in context where we don't have the block editor.
-	// Explore how we can solve this in a better way.
-	return (
-		<ExperimentalBlockEditorProvider settings={ settings }>
-			<div
-				className={ `page-templates-preview-field is-viewtype-${ viewType }` }
-				style={ { backgroundColor } }
-			>
-				<BlockPreview blocks={ blocks } />
-			</div>
-		</ExperimentalBlockEditorProvider>
-	);
-}
-
-export default function DataviewsTemplates() {
-	const [ view, setView ] = useState( DEFAULT_VIEW );
-	const { records: allTemplates, isResolving: isLoadingData } =
-		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-			per_page: -1,
-		} );
-
-	const authors = useMemo( () => {
-		if ( ! allTemplates ) {
-			return EMPTY_ARRAY;
-		}
-		const authorsSet = new Set();
-		allTemplates.forEach( ( template ) => {
-			authorsSet.add( template.author_text );
-		} );
-		return Array.from( authorsSet ).map( ( author ) => ( {
-			value: author,
-			label: author,
-		} ) );
-	}, [ allTemplates ] );
-
-	const fields = useMemo(
-		() => [
-			{
-				header: __( 'Preview' ),
-				id: 'preview',
-				render: ( { item, view: { type: viewType } } ) => {
-					return (
-						<TemplatePreview
-							content={ item.content.raw }
-							viewType={ viewType }
-						/>
-					);
-				},
-				minWidth: 120,
-				maxWidth: 120,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Template' ),
-				id: 'title',
-				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => <TemplateTitle item={ item } />,
-				maxWidth: 400,
-				enableHiding: false,
-			},
-			{
-				header: __( 'Description' ),
-				id: 'description',
-				getValue: ( { item } ) => item.description,
-				render: ( { item } ) => {
-					return item.description ? (
-						decodeEntities( item.description )
-					) : (
-						<>
-							<Text variant="muted" aria-hidden="true">
-								&#8212;
-							</Text>
-							<VisuallyHidden>
-								{ __( 'No description.' ) }
-							</VisuallyHidden>
-						</>
-					);
-				},
-				maxWidth: 200,
-				enableSorting: false,
-			},
-			{
-				header: __( 'Author' ),
-				id: 'author',
-				getValue: ( { item } ) => item.author_text,
-				render: ( { item } ) => {
-					return <AuthorField item={ item } />;
-				},
-				enableHiding: false,
-				type: ENUMERATION_TYPE,
-				elements: authors,
-			},
-		],
-		[ authors ]
-	);
-
-	const { shownTemplates, paginationInfo } = useMemo( () => {
-		if ( ! allTemplates ) {
-			return {
-				shownTemplates: EMPTY_ARRAY,
-				paginationInfo: { totalItems: 0, totalPages: 0 },
-			};
-		}
-		let filteredTemplates = [ ...allTemplates ];
-		// Handle global search.
-		if ( view.search ) {
-			const normalizedSearch = normalizeSearchInput( view.search );
-			filteredTemplates = filteredTemplates.filter( ( item ) => {
-				const title = item.title?.rendered || item.slug;
-				return (
-					normalizeSearchInput( title ).includes(
-						normalizedSearch
-					) ||
-					normalizeSearchInput( item.description ).includes(
-						normalizedSearch
-					)
-				);
-			} );
-		}
-
-		// Handle filters.
-		if ( view.filters.length > 0 ) {
-			view.filters.forEach( ( filter ) => {
-				if (
-					filter.field === 'author' &&
-					filter.operator === OPERATOR_IN &&
-					!! filter.value
-				) {
-					filteredTemplates = filteredTemplates.filter( ( item ) => {
-						return item.author_text === filter.value;
-					} );
-				}
-			} );
-		}
-
-		// Handle sorting.
-		if ( view.sort ) {
-			const stringSortingFields = [ 'title', 'author' ];
-			const fieldId = view.sort.field;
-			if ( stringSortingFields.includes( fieldId ) ) {
-				const fieldToSort = fields.find( ( field ) => {
-					return field.id === fieldId;
-				} );
-				filteredTemplates.sort( ( a, b ) => {
-					const valueA = fieldToSort.getValue( { item: a } ) ?? '';
-					const valueB = fieldToSort.getValue( { item: b } ) ?? '';
-					return view.sort.direction === 'asc'
-						? valueA.localeCompare( valueB )
-						: valueB.localeCompare( valueA );
-				} );
-			}
-		}
-
-		// Handle pagination.
-		const start = ( view.page - 1 ) * view.perPage;
-		const totalItems = filteredTemplates?.length || 0;
-		filteredTemplates = filteredTemplates?.slice(
-			start,
-			start + view.perPage
-		);
-		return {
-			shownTemplates: filteredTemplates,
-			paginationInfo: {
-				totalItems,
-				totalPages: Math.ceil( totalItems / view.perPage ),
-			},
-		};
-	}, [ allTemplates, view, fields ] );
-
-	const resetTemplateAction = useResetTemplateAction();
-	const actions = useMemo(
-		() => [
-			resetTemplateAction,
-			deleteTemplateAction,
-			renameTemplateAction,
-		],
-		[ resetTemplateAction ]
-	);
-	const onChangeView = useCallback(
-		( viewUpdater ) => {
-			let updatedView =
-				typeof viewUpdater === 'function'
-					? viewUpdater( view )
-					: viewUpdater;
-			if ( updatedView.type !== view.type ) {
-				updatedView = {
-					...updatedView,
-					layout: {
-						...defaultConfigPerViewType[ updatedView.type ],
-					},
-				};
-			}
-
-			setView( updatedView );
-		},
-		[ view, setView ]
-	);
-	return (
-		<Page title={ __( 'Templates' ) }>
-			<DataViews
-				paginationInfo={ paginationInfo }
-				fields={ fields }
-				actions={ actions }
-				data={ shownTemplates }
-				getItemId={ ( item ) => item.id }
-				isLoading={ isLoadingData }
-				view={ view }
-				onChangeView={ onChangeView }
-				supportedLayouts={ [ 'list', 'grid' ] }
-			/>
-		</Page>
-	);
-}

package/src/components/secondary-sidebar/inserter-sidebar.js

@@ -1,66 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-
-export default function InserterSidebar() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const insertionPoint = useSelect(
-		( select ) => select( editSiteStore ).__experimentalGetInsertionPoint(),
-		[]
-	);
-
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobile ? VisuallyHidden : 'div';
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: null,
-	} );
-
-	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
-
-	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="edit-site-editor__inserter-panel"
-		>
-			<TagName className="edit-site-editor__inserter-panel-header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
-			<div className="edit-site-editor__inserter-panel-content">
-				<Library
-					showInserterHelpPanel
-					shouldFocusBlock={ isMobile }
-					rootClientId={ insertionPoint.rootClientId }
-					__experimentalInsertionIndex={
-						insertionPoint.insertionIndex
-					}
-					__experimentalFilterValue={ insertionPoint.filterValue }
-					ref={ libraryRef }
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,123 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
-import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
-import { useDispatch } from '@wordpress/data';
-import { useCallback, useRef, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
-import { ESCAPE } from '@wordpress/keycodes';
-import { focus } from '@wordpress/dom';
-import { useShortcut } from '@wordpress/keyboard-shortcuts';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-
-const { PrivateListView } = unlock( blockEditorPrivateApis );
-
-export default function ListViewSidebar( { listViewToggleElement } ) {
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-
-	// This hook handles focus when the sidebar first renders.
-	const focusOnMountRef = useFocusOnMount( 'firstElement' );
-
-	// When closing the list view, focus should return to the toggle button.
-	const closeListView = useCallback( () => {
-		setIsListViewOpened( false );
-		listViewToggleElement?.focus();
-	}, [ listViewToggleElement, setIsListViewOpened ] );
-
-	const closeOnEscape = useCallback(
-		( event ) => {
-			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
-				event.preventDefault();
-				closeListView();
-			}
-		},
-		[ closeListView ]
-	);
-
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the dropZoneElement updates.
-	const [ dropZoneElement, setDropZoneElement ] = useState( null );
-
-	// This ref refers to the sidebar as a whole.
-	const sidebarRef = useRef();
-	// This ref refers to the close button.
-	const sidebarCloseButtonRef = useRef();
-	// This ref refers to the list view application area.
-	const listViewRef = useRef();
-
-	/*
-	 * Callback function to handle list view or close button focus.
-	 *
-	 * @return void
-	 */
-	function handleSidebarFocus() {
-		// Either focus the list view or the sidebar close button. Must have a fallback because the list view does not render when there are no blocks.
-		const listViewApplicationFocus = focus.tabbable.find(
-			listViewRef.current
-		)[ 0 ];
-		const listViewFocusArea = sidebarRef.current.contains(
-			listViewApplicationFocus
-		)
-			? listViewApplicationFocus
-			: sidebarCloseButtonRef.current;
-		listViewFocusArea.focus();
-	}
-
-	const handleToggleListViewShortcut = useCallback( () => {
-		// If the sidebar has focus, it is safe to close.
-		if (
-			sidebarRef.current.contains(
-				sidebarRef.current.ownerDocument.activeElement
-			)
-		) {
-			closeListView();
-		} else {
-			// If the list view or close button does not have focus, focus should be moved to it.
-			handleSidebarFocus();
-		}
-	}, [ closeListView ] );
-
-	// This only fires when the sidebar is open because of the conditional rendering.
-	// It is the same shortcut to open but that is defined as a global shortcut and only fires when the sidebar is closed.
-	useShortcut(
-		'core/edit-site/toggle-list-view',
-		handleToggleListViewShortcut
-	);
-
-	return (
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<div
-			className="edit-site-editor__list-view-panel"
-			onKeyDown={ closeOnEscape }
-			ref={ sidebarRef }
-		>
-			<div className="edit-site-editor__list-view-panel-header">
-				<strong>{ __( 'List View' ) }</strong>
-				<Button
-					icon={ closeSmall }
-					label={ __( 'Close' ) }
-					onClick={ closeListView }
-					ref={ sidebarCloseButtonRef }
-				/>
-			</div>
-			<div
-				className="edit-site-editor__list-view-panel-content"
-				ref={ useMergeRefs( [
-					focusOnMountRef,
-					setDropZoneElement,
-					listViewRef,
-				] ) }
-			>
-				<PrivateListView dropZoneElement={ dropZoneElement } />
-			</div>
-		</div>
-	);
-}

package/src/components/secondary-sidebar/style.scss

@@ -1,65 +0,0 @@
-/**
- * Note that this CSS file should be in sync with its counterpart in the other editor:
- * packages/edit-post/src/components/secondary-sidebar/style.scss
- */
-
-.edit-site-editor__inserter-panel,
-.edit-site-editor__list-view-panel {
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-}
-
-.edit-site-editor__list-view-panel {
-	@include break-medium() {
-		// Same width as the Inserter.
-		// @see packages/block-editor/src/components/inserter/style.scss
-		width: 350px;
-	}
-}
-
-.edit-site-editor__inserter-panel-header {
-	padding-top: $grid-unit-10;
-	padding-right: $grid-unit-10;
-	display: flex;
-	justify-content: flex-end;
-}
-
-.edit-site-editor__inserter-panel-content,
-.edit-site-editor__list-view-panel-content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-}
-
-
-.edit-site-editor__inserter-panel-content {
-	@include break-medium() {
-		height: 100%;
-	}
-}
-
-.edit-site-editor__list-view-panel-header {
-	align-items: center;
-	border-bottom: $border-width solid $gray-300;
-	display: flex;
-	justify-content: space-between;
-	height: $grid-unit-60;
-	padding-left: $grid-unit-20;
-	padding-right: $grid-unit-05;
-}
-
-.edit-site-editor__list-view-panel-content {
-	height: 100%;
-
-	// Include custom scrollbars, invisible until hovered.
-	@include custom-scrollbars-on-hover(transparent, $gray-600);
-	overflow: auto;
-
-	// Only reserve space for scrollbars when there is content to scroll.
-	// This allows items in the list view to have equidistant padding left and right
-	// right up until a scrollbar is present.
-	scrollbar-gutter: auto;
-
-	// The table cells use an extra pixels of space left and right. We compensate for that here.
-	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
-}

package/src/components/sidebar-edit-mode/page-panels/edit-template.js

@@ -1,108 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { check } from '@wordpress/icons';
-import {
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import SwapTemplateButton from './swap-template-button';
-import ResetDefaultTemplate from './reset-default-template';
-import { unlock } from '../../../lock-unlock';
-
-const { PostPanelRow } = unlock( editorPrivateApis );
-
-const POPOVER_PROPS = {
-	className: 'edit-site-page-panels-edit-template__dropdown',
-	placement: 'bottom-start',
-};
-
-export default function EditTemplate() {
-	const { hasResolved, template, isTemplateHidden } = useSelect(
-		( select ) => {
-			const { getEditedPostContext, getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getRenderingMode } = unlock( select( editorStore ) );
-			const { getEditedEntityRecord, hasFinishedResolution } =
-				select( coreStore );
-			const _context = getEditedPostContext();
-			const _postType = getEditedPostType();
-			const queryArgs = [ 'postType', _postType, getEditedPostId() ];
-			return {
-				context: _context,
-				hasResolved: hasFinishedResolution(
-					'getEditedEntityRecord',
-					queryArgs
-				),
-				template: getEditedEntityRecord( ...queryArgs ),
-				isTemplateHidden: getRenderingMode() === 'post-only',
-				postType: _postType,
-			};
-		},
-		[]
-	);
-
-	const { setRenderingMode } = useDispatch( editorStore );
-
-	if ( ! hasResolved ) {
-		return null;
-	}
-
-	return (
-		<PostPanelRow label={ __( 'Template' ) }>
-			<DropdownMenu
-				popoverProps={ POPOVER_PROPS }
-				focusOnMount
-				toggleProps={ {
-					variant: 'tertiary',
-					className: 'edit-site-summary-field__trigger',
-				} }
-				label={ __( 'Template options' ) }
-				text={ decodeEntities( template.title ) }
-				icon={ null }
-			>
-				{ ( { onClose } ) => (
-					<>
-						<MenuGroup>
-							<MenuItem
-								onClick={ () => {
-									setRenderingMode( 'template-only' );
-									onClose();
-								} }
-							>
-								{ __( 'Edit template' ) }
-							</MenuItem>
-							<SwapTemplateButton onClick={ onClose } />
-						</MenuGroup>
-						<ResetDefaultTemplate onClick={ onClose } />
-						<MenuGroup>
-							<MenuItem
-								icon={ ! isTemplateHidden ? check : undefined }
-								isPressed={ ! isTemplateHidden }
-								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
-								} }
-							>
-								{ __( 'Template preview' ) }
-							</MenuItem>
-						</MenuGroup>
-					</>
-				) }
-			</DropdownMenu>
-		</PostPanelRow>
-	);
-}