@wordpress/edit-site 3.0.19 → 3.0.20

package/src/components/navigation-sidebar/navigation-panel/menus/templates.js

@@ -1,147 +0,0 @@
-/**
- * External dependencies
- */
-import { map, find } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalNavigationItem as NavigationItem,
-	__experimentalNavigationMenu as NavigationMenu,
-} from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { useState, useCallback, useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import {
-	MENU_ROOT,
-	MENU_TEMPLATES,
-	MENU_TEMPLATES_GENERAL,
-	MENU_TEMPLATES_PAGES,
-	MENU_TEMPLATES_POSTS,
-	MENU_TEMPLATES_UNUSED,
-} from '../constants';
-import NewTemplateDropdown from '../new-template-dropdown';
-import TemplateNavigationItem from '../template-navigation-item';
-import SearchResults from '../search-results';
-import TemplatesSubMenu from './templates-sub';
-import {
-	getTemplatesLocationMap,
-	getUnusedTemplates,
-} from '../template-hierarchy';
-
-export default function TemplatesMenu() {
-	const [ search, setSearch ] = useState( '' );
-	const onSearch = useCallback( ( value ) => {
-		setSearch( value );
-	} );
-
-	const { templates, showOnFront } = useSelect( ( select ) => {
-		const { getEntityRecords, getEditedEntityRecord } = select( coreStore );
-		return {
-			templates: getEntityRecords( 'postType', 'wp_template' ),
-			showOnFront: getEditedEntityRecord( 'root', 'site' ).show_on_front,
-		};
-	}, [] );
-
-	const templatesWithLocation = useMemo( () => {
-		if ( ! templates ) {
-			return null;
-		}
-
-		const unusedTemplates = getUnusedTemplates( templates, showOnFront );
-		const templateLocations = getTemplatesLocationMap( templates );
-
-		return templates.map( ( template ) => ( {
-			template,
-			location: find( unusedTemplates, { slug: template.slug } )
-				? MENU_TEMPLATES_UNUSED
-				: templateLocations[ template.slug ],
-		} ) );
-	}, [ templates ] );
-
-	const topLevelTemplates = useMemo(
-		() =>
-			templatesWithLocation
-				?.filter( ( { location } ) => location === MENU_TEMPLATES )
-				?.map( ( { template } ) => template ) ?? [],
-		[ templatesWithLocation ]
-	);
-
-	return (
-		<NavigationMenu
-			menu={ MENU_TEMPLATES }
-			title={ __( 'Templates' ) }
-			titleAction={ <NewTemplateDropdown /> }
-			parentMenu={ MENU_ROOT }
-			hasSearch={ true }
-			onSearch={ onSearch }
-			search={ search }
-		>
-			{ search && (
-				<SearchResults items={ templates } search={ search } />
-			) }
-
-			{ ! search && (
-				<>
-					{ map( topLevelTemplates, ( template ) => (
-						<TemplateNavigationItem
-							item={ template }
-							key={ `wp_template-${ template.id }` }
-						/>
-					) ) }
-					<NavigationItem
-						navigateToMenu={ MENU_TEMPLATES_POSTS }
-						title={ __( 'Post templates' ) }
-						hideIfTargetMenuEmpty
-					/>
-					<NavigationItem
-						navigateToMenu={ MENU_TEMPLATES_PAGES }
-						title={ __( 'Page templates' ) }
-						hideIfTargetMenuEmpty
-					/>
-					<NavigationItem
-						navigateToMenu={ MENU_TEMPLATES_GENERAL }
-						title={ __( 'General templates' ) }
-						hideIfTargetMenuEmpty
-					/>
-					<NavigationItem
-						navigateToMenu={ MENU_TEMPLATES_UNUSED }
-						title={ __( 'Unused templates' ) }
-						hideIfTargetMenuEmpty
-					/>
-				</>
-			) }
-
-			{ ! search && templates === null && (
-				<NavigationItem title={ __( 'Loading…' ) } isText />
-			) }
-
-			<TemplatesSubMenu
-				menu={ MENU_TEMPLATES_POSTS }
-				title={ __( 'Post templates' ) }
-				templates={ templatesWithLocation }
-			/>
-			<TemplatesSubMenu
-				menu={ MENU_TEMPLATES_PAGES }
-				title={ __( 'Page templates' ) }
-				templates={ templatesWithLocation }
-			/>
-			<TemplatesSubMenu
-				menu={ MENU_TEMPLATES_GENERAL }
-				title={ __( 'General templates' ) }
-				templates={ templatesWithLocation }
-			/>
-			<TemplatesSubMenu
-				menu={ MENU_TEMPLATES_UNUSED }
-				title={ __( 'Unused templates' ) }
-				templates={ templatesWithLocation }
-			/>
-		</NavigationMenu>
-	);
-}

package/src/components/navigation-sidebar/navigation-panel/navigation-entity-items.js

@@ -1,53 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __experimentalNavigationItem as NavigationItem } from '@wordpress/components';
-import { getPathAndQueryString } from '@wordpress/url';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-const getEntityTitle = ( kind, entity ) =>
-	'taxonomy' === kind ? entity.name : entity?.title?.rendered;
-
-export default function NavigationEntityItems( { kind, name, query = {} } ) {
-	const entities = useSelect(
-		( select ) => select( coreStore ).getEntityRecords( kind, name, query ),
-		[ kind, name, query ]
-	);
-
-	const { setPage } = useDispatch( editSiteStore );
-
-	if ( ! entities ) {
-		return null;
-	}
-
-	const onActivateItem = ( { type, slug, link, id } ) => {
-		setPage( {
-			type,
-			slug,
-			path: getPathAndQueryString( link ),
-			context: {
-				postType: type,
-				postId: id,
-			},
-		} );
-	};
-
-	return entities.map( ( entity ) => {
-		const key = `content-${ getPathAndQueryString( entity.link ) }`;
-
-		return (
-			<NavigationItem
-				key={ key }
-				item={ key }
-				title={ getEntityTitle( kind, entity ) }
-				onClick={ () => onActivateItem( entity ) }
-			/>
-		);
-	} );
-}

package/src/components/navigation-sidebar/navigation-panel/new-template-dropdown.js

@@ -1,110 +0,0 @@
-/**
- * External dependencies
- */
-import { filter, find, includes, map } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import {
-	DropdownMenu,
-	MenuGroup,
-	MenuItem,
-	NavigableMenu,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { Icon, plus } from '@wordpress/icons';
-import { store as editorStore } from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import getClosestAvailableTemplate from '../../../utils/get-closest-available-template';
-import { TEMPLATES_NEW_OPTIONS } from './constants';
-import { store as editSiteStore } from '../../../store';
-
-export default function NewTemplateDropdown() {
-	const { defaultTemplateTypes, templates } = useSelect( ( select ) => {
-		const {
-			__experimentalGetDefaultTemplateTypes: getDefaultTemplateTypes,
-		} = select( editorStore );
-		const templateEntities = select( coreStore ).getEntityRecords(
-			'postType',
-			'wp_template'
-		);
-		return {
-			defaultTemplateTypes: getDefaultTemplateTypes(),
-			templates: templateEntities,
-		};
-	}, [] );
-	const { addTemplate } = useDispatch( editSiteStore );
-
-	const createTemplate = ( slug ) => {
-		const closestAvailableTemplate = getClosestAvailableTemplate(
-			slug,
-			templates
-		);
-		const { title, description } = find( defaultTemplateTypes, { slug } );
-		addTemplate( {
-			content: closestAvailableTemplate.content.raw,
-			excerpt: description,
-			// Slugs need to be strings, so this is for template `404`
-			slug: slug.toString(),
-			status: 'publish',
-			title,
-		} );
-	};
-
-	const existingTemplateSlugs = map( templates, 'slug' );
-
-	const missingTemplates = filter(
-		defaultTemplateTypes,
-		( template ) =>
-			includes( TEMPLATES_NEW_OPTIONS, template.slug ) &&
-			! includes( existingTemplateSlugs, template.slug )
-	);
-
-	if ( ! missingTemplates.length ) {
-		return null;
-	}
-
-	return (
-		<DropdownMenu
-			className="edit-site-navigation-panel__new-template-dropdown"
-			icon={ null }
-			label={ __( 'Add Template' ) }
-			popoverProps={ {
-				noArrow: false,
-			} }
-			toggleProps={ {
-				children: <Icon icon={ plus } />,
-				isSmall: true,
-				variant: 'tertiary',
-			} }
-		>
-			{ ( { onClose } ) => (
-				<NavigableMenu className="edit-site-navigation-panel__new-template-popover">
-					<MenuGroup label={ __( 'Add Template' ) }>
-						{ map(
-							missingTemplates,
-							( { title, description, slug } ) => (
-								<MenuItem
-									info={ description }
-									key={ slug }
-									onClick={ () => {
-										createTemplate( slug );
-										onClose();
-									} }
-								>
-									{ title }
-								</MenuItem>
-							)
-						) }
-					</MenuGroup>
-				</NavigableMenu>
-			) }
-		</DropdownMenu>
-	);
-}

package/src/components/navigation-sidebar/navigation-panel/search-results.js

@@ -1,117 +0,0 @@
-/**
- * External dependencies
- */
-import { map, sortBy, keyBy } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-import { __experimentalNavigationGroup as NavigationGroup } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { normalizedSearch } from './utils';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-import TemplateNavigationItem from './template-navigation-item';
-import ContentNavigationItem from './content-navigation-item';
-
-export default function SearchResults( { items, search, disableFilter } ) {
-	let itemType = null;
-	if ( items?.length > 0 ) {
-		if ( items[ 0 ].taxonomy ) {
-			itemType = 'taxonomy';
-		} else {
-			itemType = items[ 0 ].type;
-		}
-	}
-
-	const itemInfos = useSelect(
-		( select ) => {
-			if ( itemType === null || items === null ) {
-				return [];
-			}
-
-			if ( itemType === 'wp_template' ) {
-				const {
-					__experimentalGetTemplateInfo: getTemplateInfo,
-				} = select( editorStore );
-
-				return items.map( ( item ) => ( {
-					slug: item.slug,
-					...getTemplateInfo( item ),
-				} ) );
-			}
-
-			if ( itemType === 'taxonomy' ) {
-				return items.map( ( item ) => ( {
-					slug: item.slug,
-					title: item.name,
-					description: item.description,
-				} ) );
-			}
-
-			return items.map( ( item ) => ( {
-				slug: item.slug,
-				title: item.title?.rendered,
-				description: item.excerpt?.rendered,
-			} ) );
-		},
-		[ items, itemType ]
-	);
-	const itemInfosMap = useMemo( () => keyBy( itemInfos, 'slug' ), [
-		itemInfos,
-	] );
-
-	const itemsFiltered = useMemo( () => {
-		if ( items === null || search.length === 0 ) {
-			return [];
-		}
-
-		if ( disableFilter ) {
-			return items;
-		}
-
-		return items.filter( ( { slug } ) => {
-			const { title, description } = itemInfosMap[ slug ];
-
-			return (
-				normalizedSearch( slug, search ) ||
-				normalizedSearch( title, search ) ||
-				normalizedSearch( description, search )
-			);
-		} );
-	}, [ items, itemInfos, search ] );
-
-	const itemsSorted = useMemo( () => {
-		if ( ! itemsFiltered ) {
-			return [];
-		}
-
-		return sortBy( itemsFiltered, [
-			( { slug } ) => {
-				const { title } = itemInfosMap[ slug ];
-				return ! normalizedSearch( title, search );
-			},
-		] );
-	}, [ itemsFiltered, search ] );
-
-	const ItemComponent =
-		itemType === 'wp_template' || itemType === 'wp_template_part'
-			? TemplateNavigationItem
-			: ContentNavigationItem;
-
-	return (
-		<NavigationGroup title={ __( 'Search results' ) }>
-			{ map( itemsSorted, ( item ) => (
-				<ItemComponent
-					item={ item }
-					key={ `${ item.taxonomy || item.type }-${ item.id }` }
-				/>
-			) ) }
-		</NavigationGroup>
-	);
-}

package/src/components/navigation-sidebar/navigation-panel/template-navigation-item.js

@@ -1,83 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	__experimentalNavigationItem as NavigationItem,
-} from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { store as editorStore } from '@wordpress/editor';
-
-/**
- * Internal dependencies
- */
-import TemplatePreview from './template-preview';
-import { NavigationPanelPreviewFill } from '../index';
-import { store as editSiteStore } from '../../../store';
-
-export default function TemplateNavigationItem( { item } ) {
-	const { title, description } = useSelect(
-		( select ) =>
-			'wp_template' === item.type
-				? select( editorStore ).__experimentalGetTemplateInfo( item )
-				: {
-						title: item?.title?.rendered || item?.slug,
-						description: '',
-				  },
-		[]
-	);
-	const {
-		setTemplate,
-		setTemplatePart,
-		setIsNavigationPanelOpened,
-	} = useDispatch( editSiteStore );
-	const [ isPreviewVisible, setIsPreviewVisible ] = useState( false );
-
-	if ( ! item ) {
-		return null;
-	}
-
-	const onActivateItem = () => {
-		if ( 'wp_template' === item.type ) {
-			setTemplate( item.id, item.slug );
-		} else {
-			setTemplatePart( item.id );
-		}
-		setIsNavigationPanelOpened( false );
-	};
-
-	return (
-		<NavigationItem
-			className="edit-site-navigation-panel__template-item"
-			item={ `${ item.type }-${ item.id }` }
-		>
-			<Button
-				onClick={ onActivateItem }
-				onMouseEnter={ () => setIsPreviewVisible( true ) }
-				onMouseLeave={ () => setIsPreviewVisible( false ) }
-			>
-				<span className="edit-site-navigation-panel__info-wrapper">
-					<div className="edit-site-navigation-panel__template-item-title">
-						{ 'draft' === item.status && (
-							<em>{ __( '[Draft]' ) }</em>
-						) }
-						{ title }
-					</div>
-					{ description && (
-						<div className="edit-site-navigation-panel__template-item-description">
-							{ description }
-						</div>
-					) }
-				</span>
-			</Button>
-
-			{ isPreviewVisible && (
-				<NavigationPanelPreviewFill>
-					<TemplatePreview rawContent={ item.content.raw } />
-				</NavigationPanelPreviewFill>
-			) }
-		</NavigationItem>
-	);
-}

package/src/components/navigation-sidebar/navigation-panel/template-preview.js

@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { parse } from '@wordpress/blocks';
-import { BlockPreview, BlockContextProvider } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
-
-export default function TemplatePreview( { rawContent, blockContext } ) {
-	const blocks = useMemo( () => ( rawContent ? parse( rawContent ) : [] ), [
-		rawContent,
-	] );
-
-	if ( ! blocks || blocks.length === 0 ) {
-		return null;
-	}
-
-	if ( blockContext ) {
-		return (
-			<div className="edit-site-navigation-panel__preview">
-				<BlockContextProvider value={ blockContext }>
-					<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
-				</BlockContextProvider>
-			</div>
-		);
-	}
-
-	return (
-		<div className="edit-site-navigation-panel__preview">
-			<BlockPreview blocks={ blocks } viewportWidth={ 1200 } />
-		</div>
-	);
-}

package/src/components/navigation-sidebar/navigation-panel/use-debounced-search.js

@@ -1,47 +0,0 @@
-/**
- * External dependencies
- */
-import { debounce } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState, useCallback, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { SEARCH_DEBOUNCE_IN_MS } from './constants';
-
-export default function useDebouncedSearch() {
-	// The value used by the NavigationMenu to control the input field.
-	const [ search, setSearch ] = useState( '' );
-	// The value used to actually perform the search query.
-	const [ searchQuery, setSearchQuery ] = useState( '' );
-	const [ isDebouncing, setIsDebouncing ] = useState( false );
-
-	useEffect( () => {
-		setIsDebouncing( false );
-	}, [ searchQuery ] );
-
-	const debouncedSetSearchQuery = useCallback(
-		debounce( setSearchQuery, SEARCH_DEBOUNCE_IN_MS ),
-		[ setSearchQuery ]
-	);
-
-	const onSearch = useCallback(
-		( value ) => {
-			setSearch( value );
-			debouncedSetSearchQuery( value );
-			setIsDebouncing( true );
-		},
-		[ setSearch, setIsDebouncing, debouncedSetSearchQuery ]
-	);
-
-	return {
-		search,
-		searchQuery,
-		isDebouncing,
-		onSearch,
-	};
-}

package/src/components/navigation-sidebar/navigation-panel/utils.js

@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import { deburr } from 'lodash';
-
-// @see packages/block-editor/src/components/inserter/search-items.js
-export const normalizeInput = ( input ) =>
-	deburr( input ).replace( /^\//, '' ).toLowerCase();
-
-export const normalizedSearch = ( title, search ) =>
-	-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );

package/src/utils/get-closest-available-template.js

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
-export default function getClosestAvailableTemplate( slug, templates ) {
-	const template = find( templates, { slug } );
-	if ( template ) {
-		return template;
-	}
-
-	switch ( slug ) {
-		case 'single':
-		case 'page':
-			return getClosestAvailableTemplate( 'singular', templates );
-		case 'author':
-		case 'category':
-		case 'taxonomy':
-		case 'date':
-		case 'tag':
-			return getClosestAvailableTemplate( 'archive', templates );
-		case 'front-page':
-			return getClosestAvailableTemplate( 'home', templates );
-		case 'attachment':
-			return getClosestAvailableTemplate( 'single', templates );
-		case 'privacy-policy':
-			return getClosestAvailableTemplate( 'page', templates );
-	}
-
-	return find( templates, { slug: 'index' } );
-}