@wordpress/edit-site 5.31.0 → 5.33.0

package/src/components/sidebar-edit-mode/plugin-sidebar/index.js

@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { ComplementaryArea } from '@wordpress/interface';
-
-/**
- * Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
- * It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
- * If you wish to display the sidebar, you can with use the `PluginSidebarMoreMenuItem` component or the `wp.data.dispatch` API:
- *
- * ```js
- * wp.data.dispatch( 'core/edit-site' ).openGeneralSidebar( 'plugin-name/sidebar-name' );
- * ```
- *
- * @see PluginSidebarMoreMenuItem
- *
- * @param {Object}                props                                 Element props.
- * @param {string}                props.name                            A string identifying the sidebar. Must be unique for every sidebar registered within the scope of your plugin.
- * @param {string}                [props.className]                     An optional class name added to the sidebar body.
- * @param {string}                props.title                           Title displayed at the top of the sidebar.
- * @param {boolean}               [props.isPinnable=true]               Whether to allow to pin sidebar to the toolbar. When set to `true` it also automatically renders a corresponding menu item.
- * @param {WPBlockTypeIconRender} [props.icon=inherits from the plugin] The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element, to be rendered when the sidebar is pinned to toolbar.
- *
- * @example
- * ```js
- * // Using ES5 syntax
- * var __ = wp.i18n.__;
- * var el = wp.element.createElement;
- * var PanelBody = wp.components.PanelBody;
- * var PluginSidebar = wp.editSite.PluginSidebar;
- * var moreIcon = wp.element.createElement( 'svg' ); //... svg element.
- *
- * function MyPluginSidebar() {
- * 	return el(
- * 			PluginSidebar,
- * 			{
- * 				name: 'my-sidebar',
- * 				title: 'My sidebar title',
- * 				icon: moreIcon,
- * 			},
- * 			el(
- * 				PanelBody,
- * 				{},
- * 				__( 'My sidebar content' )
- * 			)
- * 	);
- * }
- * ```
- *
- * @example
- * ```jsx
- * // Using ESNext syntax
- * import { __ } from '@wordpress/i18n';
- * import { PanelBody } from '@wordpress/components';
- * import { PluginSidebar } from '@wordpress/edit-site';
- * import { more } from '@wordpress/icons';
- *
- * const MyPluginSidebar = () => (
- * 	<PluginSidebar
- * 		name="my-sidebar"
- * 		title="My sidebar title"
- * 		icon={ more }
- * 	>
- * 		<PanelBody>
- * 			{ __( 'My sidebar content' ) }
- * 		</PanelBody>
- * 	</PluginSidebar>
- * );
- * ```
- */
-export default function PluginSidebarEditSite( { className, ...props } ) {
-	return (
-		<ComplementaryArea
-			panelClassName={ className }
-			className="edit-site-sidebar-edit-mode"
-			scope="core/edit-site"
-			{ ...props }
-		/>
-	);
-}

package/src/components/sidebar-edit-mode/sidebar-card/index.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
-
-export default function SidebarCard( {
-	className,
-	title,
-	icon,
-	description,
-	actions,
-	children,
-} ) {
-	return (
-		<div className={ classnames( 'edit-site-sidebar-card', className ) }>
-			<HStack
-				spacing={ 2 }
-				className="edit-site-sidebar-card__header"
-				align="flex-start"
-			>
-				<Icon className="edit-site-sidebar-card__icon" icon={ icon } />
-				<Text
-					numberOfLines={ 2 }
-					truncate
-					className="edit-site-sidebar-card__title"
-					weight={ 500 }
-					as="h2"
-				>
-					{ title }
-				</Text>
-				{ actions }
-			</HStack>
-			<VStack className="edit-site-sidebar-card__content">
-				{ description && (
-					<div className="edit-site-sidebar-card__description">
-						{ description }
-					</div>
-				) }
-				{ children }
-			</VStack>
-		</div>
-	);
-}

package/src/components/sidebar-edit-mode/sidebar-card/style.scss

@@ -1,36 +0,0 @@
-.edit-site-sidebar-card {
-	&__content {
-		flex-grow: 1;
-	}
-
-	&__title {
-		width: 100%;
-
-		&.edit-site-sidebar-card__title {
-			font-size: 16px;
-			line-height: $icon-size;
-			margin: 0;
-		}
-	}
-
-	&__description {
-		font-size: $default-font-size;
-		color: $gray-700;
-	}
-
-	&__icon {
-		flex: 0 0 $icon-size;
-		width: $icon-size;
-		height: $icon-size;
-	}
-
-	&__header {
-		display: flex;
-		justify-content: space-between;
-		margin: 0 0 $grid-unit-15;
-	}
-
-	.edit-site-template-card__actions {
-		flex-shrink: 0;
-	}
-}

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

@@ -1,86 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	Button,
-	__experimentalHeading as Heading,
-} from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-
-function TemplateAreaItem( { area, clientId } ) {
-	const { selectBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === area
-			);
-		},
-		[ area ]
-	);
-
-	const highlightBlock = () => toggleBlockHighlight( clientId, true );
-	const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );
-
-	return (
-		<Button
-			className="edit-site-template-card__template-areas-item"
-			icon={ templatePartArea?.icon }
-			onMouseOver={ highlightBlock }
-			onMouseLeave={ cancelHighlightBlock }
-			onFocus={ highlightBlock }
-			onBlur={ cancelHighlightBlock }
-			onClick={ () => {
-				selectBlock( clientId );
-			} }
-		>
-			{ templatePartArea?.label }
-		</Button>
-	);
-}
-
-export default function TemplateAreas() {
-	const templateParts = useSelect(
-		( select ) => select( editSiteStore ).getCurrentTemplateTemplateParts(),
-		[]
-	);
-
-	if ( ! templateParts.length ) {
-		return null;
-	}
-
-	return (
-		<section className="edit-site-template-card__template-areas">
-			<Heading
-				level={ 3 }
-				className="edit-site-template-card__template-areas-title"
-			>
-				{ __( 'Areas' ) }
-			</Heading>
-
-			<ul className="edit-site-template-card__template-areas-list">
-				{ templateParts.map( ( { templatePart, block } ) => (
-					<li key={ block.clientId }>
-						<TemplateAreaItem
-							area={ templatePart.area }
-							clientId={ block.clientId }
-						/>
-					</li>
-				) ) }
-			</ul>
-		</section>
-	);
-}

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

@@ -1,59 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
-import {
-	__experimentalUseNavigator as useNavigator,
-	ExternalLink,
-} from '@wordpress/components';
-import { useEntityRecord } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { pencil } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-
-export default function SidebarNavigationScreenNavigationItem() {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const {
-		params: { postType, postId },
-	} = useNavigator();
-	const { record } = useEntityRecord( 'postType', postType, postId );
-
-	return (
-		<SidebarNavigationScreen
-			title={ record ? decodeEntities( record?.title?.rendered ) : null }
-			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
-			}
-			description={ __(
-				'Posts are entries listed in reverse chronological order on the site homepage or on the posts page.'
-			) }
-			content={
-				<>
-					{ record?.link ? (
-						<ExternalLink
-							className="edit-site-sidebar-navigation-screen__page-link"
-							href={ record.link }
-						>
-							{ record.link }
-						</ExternalLink>
-					) : null }
-					{ record
-						? decodeEntities( record?.description?.rendered )
-						: null }
-				</>
-			}
-		/>
-	);
-}

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/sync-state-with-url/use-sync-path-with-url.js

@@ -1,147 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
-import { useEffect, useRef } from '@wordpress/element';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import {
-	TEMPLATE_POST_TYPE,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_TYPES,
-} from '../../utils/constants';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-export function getPathFromURL( urlParams ) {
-	let path = urlParams?.path ?? '/';
-
-	// Compute the navigator path based on the URL params.
-	if ( urlParams?.postType && urlParams?.postId ) {
-		switch ( urlParams.postType ) {
-			case PATTERN_TYPES.user:
-			case TEMPLATE_POST_TYPE:
-			case TEMPLATE_PART_POST_TYPE:
-			case 'page':
-				path = `/${ encodeURIComponent(
-					urlParams.postType
-				) }/${ encodeURIComponent( urlParams.postId ) }`;
-				break;
-			default:
-				path = `/navigation/${ encodeURIComponent(
-					urlParams.postType
-				) }/${ encodeURIComponent( urlParams.postId ) }`;
-		}
-	}
-
-	return path;
-}
-
-function isSubset( subset, superset ) {
-	return Object.entries( subset ).every( ( [ key, value ] ) => {
-		return superset[ key ] === value;
-	} );
-}
-
-export default function useSyncPathWithURL() {
-	const history = useHistory();
-	const { params: urlParams } = useLocation();
-	const {
-		location: navigatorLocation,
-		params: navigatorParams,
-		goTo,
-	} = useNavigator();
-	const isMounting = useRef( true );
-
-	useEffect(
-		() => {
-			// The navigatorParams are only initially filled properly when the
-			// navigator screens mount. so we ignore the first synchronisation.
-			if ( isMounting.current ) {
-				isMounting.current = false;
-				return;
-			}
-
-			function updateUrlParams( newUrlParams ) {
-				if ( isSubset( newUrlParams, urlParams ) ) {
-					return;
-				}
-				const updatedParams = {
-					...urlParams,
-					...newUrlParams,
-				};
-				history.push( updatedParams );
-			}
-
-			if ( navigatorParams?.postType && navigatorParams?.postId ) {
-				updateUrlParams( {
-					postType: navigatorParams?.postType,
-					postId: navigatorParams?.postId,
-					path: undefined,
-					layout: undefined,
-				} );
-			} else if (
-				navigatorLocation.path.startsWith( '/page/' ) &&
-				navigatorParams?.postId
-			) {
-				updateUrlParams( {
-					postType: 'page',
-					postId: navigatorParams?.postId,
-					path: undefined,
-					layout: undefined,
-				} );
-			} else if ( navigatorLocation.path === '/patterns' ) {
-				updateUrlParams( {
-					postType: undefined,
-					postId: undefined,
-					canvas: undefined,
-					path: navigatorLocation.path,
-				} );
-			} else if (
-				// These sidebar paths are special in the sense that the url in these pages may or may not have a postId and we need to retain it if it has.
-				// The "type" property should be kept as well.
-				navigatorLocation.path === '/pages' ||
-				navigatorLocation.path === '/wp_template' ||
-				navigatorLocation.path === '/wp_template_part/all'
-			) {
-				updateUrlParams( {
-					postType: undefined,
-					categoryType: undefined,
-					categoryId: undefined,
-					path: navigatorLocation.path,
-				} );
-			} else {
-				updateUrlParams( {
-					postType: undefined,
-					postId: undefined,
-					categoryType: undefined,
-					categoryId: undefined,
-					layout: undefined,
-					path:
-						navigatorLocation.path === '/'
-							? undefined
-							: navigatorLocation.path,
-				} );
-			}
-		},
-		// Trigger only when navigator changes to prevent infinite loops.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ navigatorLocation?.path, navigatorParams ]
-	);
-
-	useEffect(
-		() => {
-			const path = getPathFromURL( urlParams );
-			if ( navigatorLocation.path !== path ) {
-				goTo( path );
-			}
-		},
-		// Trigger only when URL changes to prevent infinite loops.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[ urlParams ]
-	);
-}