@wordpress/edit-site 5.30.0 → 5.32.0

package/src/components/sidebar-navigation-screen-pages/index.js

@@ -1,238 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalTruncate as Truncate,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { layout, page, home, verse, plus } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import SidebarButton from '../sidebar-button';
-import AddNewPageModal from '../add-new-page';
-import { unlock } from '../../lock-unlock';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-const { useHistory } = unlock( routerPrivateApis );
-
-const PageItem = ( { postType = 'page', postId, ...props } ) => {
-	const linkInfo = useLink(
-		{
-			postType,
-			postId,
-		},
-		{
-			backPath: '/page',
-		}
-	);
-	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
-};
-
-export default function SidebarNavigationScreenPages() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { records: pages, isResolving: isLoadingPages } = useEntityRecords(
-		'postType',
-		'page',
-		{
-			status: 'any',
-			per_page: -1,
-		}
-	);
-	const { records: templates, isResolving: isLoadingTemplates } =
-		useEntityRecords( 'postType', TEMPLATE_POST_TYPE, {
-			per_page: -1,
-		} );
-
-	const dynamicPageTemplates = templates?.filter( ( { slug } ) =>
-		[ '404', 'search' ].includes( slug )
-	);
-
-	const homeTemplate =
-		templates?.find( ( template ) => template.slug === 'front-page' ) ||
-		templates?.find( ( template ) => template.slug === 'home' ) ||
-		templates?.find( ( template ) => template.slug === 'index' );
-
-	const getPostsPageTemplate = () =>
-		templates?.find( ( template ) => template.slug === 'home' ) ||
-		templates?.find( ( template ) => template.slug === 'index' );
-
-	const pagesAndTemplates = pages?.concat( dynamicPageTemplates, [
-		homeTemplate,
-	] );
-
-	const { frontPage, postsPage } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			frontPage: siteSettings?.page_on_front,
-			postsPage: siteSettings?.page_for_posts,
-		};
-	}, [] );
-
-	const isHomePageBlog = frontPage === postsPage;
-
-	const reorderedPages = pages && [ ...pages ];
-
-	if ( ! isHomePageBlog && reorderedPages?.length ) {
-		const homePageIndex = reorderedPages.findIndex(
-			( item ) => item.id === frontPage
-		);
-		const homePage = reorderedPages.splice( homePageIndex, 1 );
-		reorderedPages?.splice( 0, 0, ...homePage );
-
-		const postsPageIndex = reorderedPages.findIndex(
-			( item ) => item.id === postsPage
-		);
-
-		const blogPage = reorderedPages.splice( postsPageIndex, 1 );
-
-		reorderedPages.splice( 1, 0, ...blogPage );
-	}
-
-	const [ showAddPage, setShowAddPage ] = useState( false );
-
-	const history = useHistory();
-
-	const handleNewPage = ( { type, id } ) => {
-		// Navigate to the created template editor.
-		history.push( {
-			postId: id,
-			postType: type,
-			canvas: 'edit',
-		} );
-		setShowAddPage( false );
-	};
-
-	const getPageProps = ( id ) => {
-		let itemIcon = page;
-		const postsPageTemplateId =
-			postsPage && postsPage === id ? getPostsPageTemplate()?.id : null;
-
-		switch ( id ) {
-			case frontPage:
-				itemIcon = home;
-				break;
-			case postsPage:
-				itemIcon = verse;
-				break;
-		}
-
-		return {
-			icon: itemIcon,
-			postType: postsPageTemplateId ? TEMPLATE_POST_TYPE : 'page',
-			postId: postsPageTemplateId || id,
-		};
-	};
-
-	const pagesLink = useLink( { path: '/pages' } );
-
-	return (
-		<>
-			{ showAddPage && (
-				<AddNewPageModal
-					onSave={ handleNewPage }
-					onClose={ () => setShowAddPage( false ) }
-				/>
-			) }
-			<SidebarNavigationScreen
-				title={ __( 'Pages' ) }
-				description={ __( 'Browse and manage pages.' ) }
-				actions={
-					<SidebarButton
-						icon={ plus }
-						label={ __( 'Draft a new page' ) }
-						onClick={ () => setShowAddPage( true ) }
-					/>
-				}
-				content={
-					<>
-						{ ( isLoadingPages || isLoadingTemplates ) && (
-							<ItemGroup>
-								<Item>{ __( 'Loading pages…' ) }</Item>
-							</ItemGroup>
-						) }
-						{ ! ( isLoadingPages || isLoadingTemplates ) && (
-							<ItemGroup>
-								{ ! pagesAndTemplates?.length && (
-									<Item>{ __( 'No page found' ) }</Item>
-								) }
-								{ isHomePageBlog && homeTemplate && (
-									<PageItem
-										postType={ TEMPLATE_POST_TYPE }
-										postId={ homeTemplate.id }
-										key={ homeTemplate.id }
-										icon={ home }
-										withChevron
-									>
-										<Truncate numberOfLines={ 1 }>
-											{ decodeEntities(
-												homeTemplate.title?.rendered ||
-													__( '(no title)' )
-											) }
-										</Truncate>
-									</PageItem>
-								) }
-								{ reorderedPages?.map( ( { id, title } ) => (
-									<PageItem
-										{ ...getPageProps( id ) }
-										key={ id }
-										withChevron
-									>
-										<Truncate numberOfLines={ 1 }>
-											{ decodeEntities(
-												title?.rendered ||
-													__( '(no title)' )
-											) }
-										</Truncate>
-									</PageItem>
-								) ) }
-							</ItemGroup>
-						) }
-					</>
-				}
-				footer={
-					<VStack spacing={ 0 }>
-						{ dynamicPageTemplates?.map( ( item ) => (
-							<PageItem
-								postType={ TEMPLATE_POST_TYPE }
-								postId={ item.id }
-								key={ item.id }
-								icon={ layout }
-								withChevron
-							>
-								<Truncate numberOfLines={ 1 }>
-									{ decodeEntities(
-										item.title?.rendered ||
-											__( '(no title)' )
-									) }
-								</Truncate>
-							</PageItem>
-						) ) }
-						{ ! isMobileViewport && (
-							<SidebarNavigationItem
-								className="edit-site-sidebar-navigation-screen-pages__see-all"
-								{ ...pagesLink }
-							>
-								{ __( 'Manage all pages' ) }
-							</SidebarNavigationItem>
-						) }
-					</VStack>
-				}
-			/>
-		</>
-	);
-}

package/src/components/sidebar-navigation-screen-templates/index.js

@@ -1,156 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useEntityRecords } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { useViewportMatch } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import AddNewTemplate from '../add-new-template';
-import SidebarButton from '../sidebar-button';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-const TemplateItem = ( { postType, postId, ...props } ) => {
-	const linkInfo = useLink( {
-		postType,
-		postId,
-	} );
-	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
-};
-
-export default function SidebarNavigationScreenTemplates() {
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const { records: templates, isResolving: isLoading } = useEntityRecords(
-		'postType',
-		TEMPLATE_POST_TYPE,
-		{ per_page: -1 }
-	);
-	const browseAllLink = useLink( { path: '/wp_template/all' } );
-	const canCreate = ! isMobileViewport;
-	return (
-		<SidebarNavigationScreen
-			title={ __( 'Templates' ) }
-			description={ __(
-				'Express the layout of your site with templates.'
-			) }
-			actions={
-				canCreate && (
-					<AddNewTemplate
-						templateType={ TEMPLATE_POST_TYPE }
-						toggleProps={ {
-							as: SidebarButton,
-						} }
-					/>
-				)
-			}
-			content={
-				<>
-					{ isLoading && __( 'Loading templates…' ) }
-					{ ! isLoading && (
-						<SidebarTemplatesList templates={ templates } />
-					) }
-				</>
-			}
-			footer={
-				! isMobileViewport && (
-					<SidebarNavigationItem withChevron { ...browseAllLink }>
-						{ __( 'Manage all templates' ) }
-					</SidebarNavigationItem>
-				)
-			}
-		/>
-	);
-}
-
-function TemplatesGroup( { title, templates } ) {
-	return (
-		<ItemGroup>
-			{ !! title && (
-				<Item className="edit-site-sidebar-navigation-screen-templates__templates-group-title">
-					{ title }
-				</Item>
-			) }
-			{ templates.map( ( template ) => (
-				<TemplateItem
-					postType={ TEMPLATE_POST_TYPE }
-					postId={ template.id }
-					key={ template.id }
-					withChevron
-				>
-					{ decodeEntities(
-						template.title?.rendered || template.slug
-					) }
-				</TemplateItem>
-			) ) }
-		</ItemGroup>
-	);
-}
-function SidebarTemplatesList( { templates } ) {
-	if ( ! templates?.length ) {
-		return (
-			<ItemGroup>
-				<Item>{ __( 'No templates found' ) }</Item>
-			</ItemGroup>
-		);
-	}
-	const sortedTemplates = templates ? [ ...templates ] : [];
-	sortedTemplates.sort( ( a, b ) =>
-		a.title.rendered.localeCompare( b.title.rendered )
-	);
-	const { hierarchyTemplates, customTemplates, ...plugins } =
-		sortedTemplates.reduce(
-			( accumulator, template ) => {
-				const {
-					original_source: originalSource,
-					author_text: authorText,
-				} = template;
-				if ( originalSource === 'plugin' ) {
-					if ( ! accumulator[ authorText ] ) {
-						accumulator[ authorText ] = [];
-					}
-					accumulator[ authorText ].push( template );
-				} else if ( template.is_custom ) {
-					accumulator.customTemplates.push( template );
-				} else {
-					accumulator.hierarchyTemplates.push( template );
-				}
-				return accumulator;
-			},
-			{ hierarchyTemplates: [], customTemplates: [] }
-		);
-	return (
-		<VStack spacing={ 3 }>
-			{ !! hierarchyTemplates.length && (
-				<TemplatesGroup templates={ hierarchyTemplates } />
-			) }
-			{ !! customTemplates.length && (
-				<TemplatesGroup
-					title={ __( 'Custom' ) }
-					templates={ customTemplates }
-				/>
-			) }
-			{ Object.entries( plugins ).map(
-				( [ plugin, pluginTemplates ] ) => {
-					return (
-						<TemplatesGroup
-							key={ plugin }
-							title={ plugin }
-							templates={ pluginTemplates }
-						/>
-					);
-				}
-			) }
-		</VStack>
-	);
-}

package/src/components/sidebar-navigation-screen-templates/style.scss

@@ -1,9 +0,0 @@
-.edit-site-sidebar-navigation-screen-templates__templates-group-title.components-item {
-	text-transform: uppercase;
-	color: $gray-200;
-	// 6px right padding to align with + button
-	padding: $grid-unit-30 6px $grid-unit-20 $grid-unit-20;
-	border-top: 1px solid $gray-800;
-	font-size: 11px;
-	font-weight: 500;
-}

package/src/hooks/template-part-edit.js

@@ -1,89 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import { BlockControls } 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 { TEMPLATE_PART_POST_TYPE } from '../utils/constants';
-
-const { useLocation } = unlock( routerPrivateApis );
-
-function EditTemplatePartMenuItem( { attributes } ) {
-	const { theme, slug } = attributes;
-	const { params } = useLocation();
-	const templatePart = useSelect(
-		( select ) => {
-			const { getCurrentTheme, getEntityRecord } = select( coreStore );
-
-			return getEntityRecord(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				// Ideally this should be an official public API.
-				`${ theme || getCurrentTheme()?.stylesheet }//${ slug }`
-			);
-		},
-		[ theme, slug ]
-	);
-
-	const linkProps = useLink(
-		{
-			postId: templatePart?.id,
-			postType: templatePart?.type,
-			canvas: 'edit',
-		},
-		{
-			fromTemplateId: params.postId || templatePart?.id,
-		}
-	);
-
-	if ( ! templatePart ) {
-		return null;
-	}
-
-	return (
-		<ToolbarButton
-			{ ...linkProps }
-			onClick={ ( event ) => {
-				linkProps.onClick( event );
-			} }
-		>
-			{ __( 'Edit' ) }
-		</ToolbarButton>
-	);
-}
-
-export const withEditBlockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		const { attributes, name } = props;
-		const isDisplayed = name === 'core/template-part' && attributes.slug;
-
-		return (
-			<>
-				<BlockEdit key="edit" { ...props } />
-				{ isDisplayed && (
-					<BlockControls group="other">
-						<EditTemplatePartMenuItem attributes={ attributes } />
-					</BlockControls>
-				) }
-			</>
-		);
-	},
-	'withEditBlockControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/edit-site/template-part-edit-button',
-	withEditBlockControls
-);

package/src/store/test/utils.js

@@ -1,191 +0,0 @@
-/**
- * Internal dependencies
- */
-import { getFilteredTemplatePartBlocks } from '../utils';
-
-const NESTED_BLOCKS = [
-	{
-		clientId: '1',
-		name: 'core/group',
-		innerBlocks: [
-			{
-				clientId: '2',
-				name: 'core/template-part',
-				attributes: {
-					slug: 'header',
-					theme: 'my-theme',
-				},
-				innerBlocks: [
-					{
-						clientId: '3',
-						name: 'core/group',
-						innerBlocks: [],
-					},
-				],
-			},
-			{
-				clientId: '4',
-				name: 'core/template-part',
-				attributes: {
-					slug: 'aside',
-					theme: 'my-theme',
-				},
-				innerBlocks: [],
-			},
-		],
-	},
-	{
-		clientId: '5',
-		name: 'core/paragraph',
-		innerBlocks: [],
-	},
-	{
-		clientId: '6',
-		name: 'core/template-part',
-		attributes: {
-			slug: 'footer',
-			theme: 'my-theme',
-		},
-		innerBlocks: [],
-	},
-];
-
-const FLATTENED_BLOCKS = [
-	{
-		block: {
-			clientId: '2',
-			name: 'core/template-part',
-			attributes: {
-				slug: 'header',
-				theme: 'my-theme',
-			},
-		},
-		templatePart: {
-			id: 'my-theme//header',
-			slug: 'header',
-			theme: 'my-theme',
-		},
-	},
-	{
-		block: {
-			clientId: '4',
-			name: 'core/template-part',
-			attributes: {
-				slug: 'aside',
-				theme: 'my-theme',
-			},
-		},
-		templatePart: {
-			id: 'my-theme//aside',
-			slug: 'aside',
-			theme: 'my-theme',
-		},
-	},
-	{
-		block: {
-			clientId: '6',
-			name: 'core/template-part',
-			attributes: {
-				slug: 'footer',
-				theme: 'my-theme',
-			},
-		},
-		templatePart: {
-			id: 'my-theme//footer',
-			slug: 'footer',
-			theme: 'my-theme',
-		},
-	},
-];
-
-const SINGLE_TEMPLATE_PART_BLOCK = {
-	clientId: '1',
-	name: 'core/template-part',
-	innerBlocks: [],
-	attributes: {
-		slug: 'aside',
-		theme: 'my-theme',
-	},
-};
-
-const TEMPLATE_PARTS = [
-	{
-		id: 'my-theme//header',
-		slug: 'header',
-		theme: 'my-theme',
-	},
-	{
-		id: 'my-theme//aside',
-		slug: 'aside',
-		theme: 'my-theme',
-	},
-	{
-		id: 'my-theme//footer',
-		slug: 'footer',
-		theme: 'my-theme',
-	},
-];
-
-describe( 'utils', () => {
-	describe( 'getFilteredTemplatePartBlocks', () => {
-		it( 'returns a flattened list of filtered template parts preserving a depth-first order', () => {
-			const flattenedFilteredTemplateParts =
-				getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
-			expect( flattenedFilteredTemplateParts ).toEqual(
-				FLATTENED_BLOCKS
-			);
-		} );
-
-		it( 'returns a cached result when passed the same params', () => {
-			// Clear the cache and call the function twice.
-			getFilteredTemplatePartBlocks.clear();
-			getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS );
-			expect(
-				getFilteredTemplatePartBlocks( NESTED_BLOCKS, TEMPLATE_PARTS )
-			).toEqual( FLATTENED_BLOCKS );
-
-			// The function has been called twice with the same params, so the cache size should be 1.
-			/**
-			 * TODO what should be done about this?
-			 * Can it be tested another way?
-			 * Is it necessary?
-			 */
-			// const [ , , originalSize ] =
-			// 	getFilteredTemplatePartBlocks.getCache();
-			// expect( originalSize ).toBe( 1 );
-
-			// Call the function again, with different params.
-			expect(
-				getFilteredTemplatePartBlocks(
-					[ SINGLE_TEMPLATE_PART_BLOCK ],
-					TEMPLATE_PARTS
-				)
-			).toEqual( [
-				{
-					block: {
-						clientId: '1',
-						name: 'core/template-part',
-						attributes: {
-							slug: 'aside',
-							theme: 'my-theme',
-						},
-					},
-					templatePart: {
-						id: 'my-theme//aside',
-						slug: 'aside',
-						theme: 'my-theme',
-					},
-				},
-			] );
-
-			// The function has been called with different params, so the cache size should now be 2.
-			/**
-			 * TODO what should be done about this?
-			 * Can it be tested another way?
-			 * Is it necessary?
-			 */
-			// const [ , , finalSize ] = getFilteredTemplatePartBlocks.getCache();
-			// expect( finalSize ).toBe( 2 );
-		} );
-	} );
-} );