@wordpress/edit-site 5.35.0 → 6.0.0

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

@@ -1,204 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	__experimentalVStack as VStack,
-	ExternalLink,
-	__experimentalTruncate as Truncate,
-} from '@wordpress/components';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { pencil } from '@wordpress/icons';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { escapeAttribute } from '@wordpress/escape-html';
-import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
-import { useEffect, useCallback } from '@wordpress/element';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-import PageDetails from './page-details';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-const { PostActions } = unlock( editorPrivateApis );
-
-export default function SidebarNavigationScreenPage( { backPath } ) {
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const history = useHistory();
-	const { createSuccessNotice } = useDispatch( noticesStore );
-	const {
-		params: { postId },
-	} = useLocation();
-	const { record, hasResolved } = useEntityRecord(
-		'postType',
-		'page',
-		postId
-	);
-
-	const { featuredMediaAltText, featuredMediaSourceUrl } = useSelect(
-		( select ) => {
-			const { getEntityRecord } = select( coreStore );
-			// Featured image.
-			const attachedMedia = record?.featured_media
-				? getEntityRecord(
-						'postType',
-						'attachment',
-						record?.featured_media
-				  )
-				: null;
-
-			return {
-				featuredMediaSourceUrl:
-					attachedMedia?.media_details.sizes?.medium?.source_url ||
-					attachedMedia?.source_url,
-				featuredMediaAltText: escapeAttribute(
-					attachedMedia?.alt_text ||
-						attachedMedia?.description?.raw ||
-						''
-				),
-			};
-		},
-		[ record ]
-	);
-
-	// Redirect to the main pages navigation screen if the page is not found or has been deleted.
-	useEffect( () => {
-		if ( hasResolved && ! record ) {
-			history.push( {
-				path: '/page',
-				postId: undefined,
-				postType: undefined,
-				canvas: 'view',
-			} );
-		}
-	}, [ hasResolved, record, history ] );
-
-	const onActionPerformed = useCallback(
-		( actionId, items ) => {
-			switch ( actionId ) {
-				case 'move-to-trash':
-					{
-						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
-						} );
-					}
-					break;
-				case 'duplicate-post':
-					{
-						const newItem = items[ 0 ];
-						const title =
-							typeof newItem.title === 'string'
-								? newItem.title
-								: newItem.title?.rendered;
-						createSuccessNotice(
-							sprintf(
-								// translators: %s: Title of the created post e.g: "Post 1".
-								__( '"%s" successfully created.' ),
-								title
-							),
-							{
-								type: 'snackbar',
-								id: 'duplicate-post-action',
-								actions: [
-									{
-										label: __( 'Edit' ),
-										onClick: () => {
-											history.push( {
-												path: undefined,
-												postId: newItem.id,
-												postType: newItem.type,
-												canvas: 'edit',
-											} );
-										},
-									},
-								],
-							}
-						);
-					}
-					break;
-			}
-		},
-		[ history, createSuccessNotice ]
-	);
-
-	const featureImageAltText = featuredMediaAltText
-		? decodeEntities( featuredMediaAltText )
-		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
-
-	return record ? (
-		<SidebarNavigationScreen
-			backPath={ backPath }
-			title={ decodeEntities(
-				record?.title?.rendered || __( '(no title)' )
-			) }
-			actions={
-				<>
-					<PostActions
-						onActionPerformed={ onActionPerformed }
-						buttonProps={ { size: 'default' } }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			meta={
-				<ExternalLink
-					className="edit-site-sidebar-navigation-screen__page-link"
-					href={ record.link }
-				>
-					{ filterURLForDisplay(
-						safeDecodeURIComponent( record.link )
-					) }
-				</ExternalLink>
-			}
-			content={
-				<>
-					{ !! featuredMediaSourceUrl && (
-						<VStack
-							className="edit-site-sidebar-navigation-screen-page__featured-image-wrapper"
-							alignment="left"
-							spacing={ 2 }
-						>
-							<div className="edit-site-sidebar-navigation-screen-page__featured-image has-image">
-								<img
-									alt={ featureImageAltText }
-									src={ featuredMediaSourceUrl }
-								/>
-							</div>
-						</VStack>
-					) }
-					{ !! record?.excerpt?.rendered && (
-						<Truncate
-							className="edit-site-sidebar-navigation-screen-page__excerpt"
-							numberOfLines={ 3 }
-						>
-							{ stripHTML( record.excerpt.rendered ) }
-						</Truncate>
-					) }
-					<PageDetails id={ postId } />
-				</>
-			}
-			footer={
-				record?.modified ? (
-					<SidebarNavigationScreenDetailsFooter record={ record } />
-				) : null
-			}
-		/>
-	) : null;
-}

package/src/components/sidebar-navigation-screen-page/page-details.js

@@ -1,161 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { __experimentalTruncate as Truncate } from '@wordpress/components';
-import { count as wordCount } from '@wordpress/wordcount';
-import { useSelect } from '@wordpress/data';
-import { decodeEntities } from '@wordpress/html-entities';
-import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
-import { safeDecodeURIComponent } from '@wordpress/url';
-
-/**
- * Internal dependencies
- */
-import StatusLabel from './status-label';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-// Taken from packages/editor/src/components/time-to-read/index.js.
-const AVERAGE_READING_RATE = 189;
-
-function getPageDetails( page ) {
-	if ( ! page ) {
-		return [];
-	}
-
-	const details = [
-		{
-			label: __( 'Status' ),
-			value: (
-				<StatusLabel
-					status={ page?.password ? 'protected' : page.status }
-					date={ page?.date }
-					short
-				/>
-			),
-		},
-		{
-			label: __( 'Slug' ),
-			value: (
-				<Truncate numberOfLines={ 1 }>
-					{ safeDecodeURIComponent(
-						page.slug || page.generated_slug
-					) }
-				</Truncate>
-			),
-		},
-	];
-
-	if ( page?.templateTitle ) {
-		details.push( {
-			label: __( 'Template' ),
-			value: decodeEntities( page.templateTitle ),
-		} );
-	}
-
-	if ( page?.parentTitle ) {
-		details.push( {
-			label: __( 'Parent' ),
-			value: decodeEntities( page.parentTitle || __( '(no title)' ) ),
-		} );
-	}
-
-	/*
-	 * translators: If your word count is based on single characters (e.g. East Asian characters),
-	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
-	 * Do not translate into your own language.
-	 */
-	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
-	const wordsCounted = page?.content?.rendered
-		? wordCount( page.content.rendered, wordCountType )
-		: 0;
-	const readingTime = Math.round( wordsCounted / AVERAGE_READING_RATE );
-
-	if ( wordsCounted && ! page?.isPostsPage ) {
-		details.push(
-			{
-				label: __( 'Words' ),
-				value: wordsCounted.toLocaleString() || __( 'Unknown' ),
-			},
-			{
-				label: __( 'Time to read' ),
-				value:
-					readingTime > 1
-						? sprintf(
-								/* translators: %s: is the number of minutes. */
-								__( '%s mins' ),
-								readingTime.toLocaleString()
-						  )
-						: __( '< 1 min' ),
-			}
-		);
-	}
-	return details;
-}
-
-export default function PageDetails( { id } ) {
-	const { record } = useEntityRecord( 'postType', 'page', id );
-	const { parentTitle, templateTitle, isPostsPage } = useSelect(
-		( select ) => {
-			const { getEditedPostId } = unlock( select( editSiteStore ) );
-			const template = select( coreStore ).getEntityRecord(
-				'postType',
-				TEMPLATE_POST_TYPE,
-				getEditedPostId()
-			);
-			const _templateTitle = template?.title?.rendered;
-
-			// Parent page title.
-			const _parentTitle = record?.parent
-				? select( coreStore ).getEntityRecord(
-						'postType',
-						'page',
-						record.parent,
-						{
-							_fields: [ 'title' ],
-						}
-				  )?.title?.rendered
-				: null;
-
-			const { getEntityRecord } = select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
-
-			return {
-				parentTitle: _parentTitle,
-				templateTitle: _templateTitle,
-				isPostsPage: record?.id === siteSettings?.page_for_posts,
-			};
-		},
-		[ record?.parent, record?.id ]
-	);
-	return (
-		<SidebarNavigationScreenDetailsPanel
-			spacing={ 5 }
-			title={ __( 'Details' ) }
-		>
-			{ getPageDetails( {
-				parentTitle,
-				templateTitle,
-				isPostsPage,
-				...record,
-			} ).map( ( { label, value } ) => (
-				<SidebarNavigationScreenDetailsPanelRow key={ label }>
-					<SidebarNavigationScreenDetailsPanelLabel>
-						{ label }
-					</SidebarNavigationScreenDetailsPanelLabel>
-					<SidebarNavigationScreenDetailsPanelValue>
-						{ value }
-					</SidebarNavigationScreenDetailsPanelValue>
-				</SidebarNavigationScreenDetailsPanelRow>
-			) ) }
-		</SidebarNavigationScreenDetailsPanel>
-	);
-}

package/src/components/sidebar-navigation-screen-page/status-label.js

@@ -1,71 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { dateI18n, getDate, humanTimeDiff } from '@wordpress/date';
-import { createInterpolateElement } from '@wordpress/element';
-
-export default function StatusLabel( { status, date, short } ) {
-	const relateToNow = humanTimeDiff( date );
-	let statusLabel = status;
-	switch ( status ) {
-		case 'publish':
-			statusLabel = date
-				? createInterpolateElement(
-						sprintf(
-							/* translators: %s: is the relative time when the post was published. */
-							__( 'Published <time>%s</time>' ),
-							relateToNow
-						),
-						{ time: <time dateTime={ date } /> }
-				  )
-				: __( 'Published' );
-			break;
-		case 'future':
-			const formattedDate = dateI18n(
-				short ? 'M j' : 'F j',
-				getDate( date )
-			);
-			statusLabel = date
-				? createInterpolateElement(
-						sprintf(
-							/* translators: %s: is the formatted date and time on which the post is scheduled to be published. */
-							__( 'Scheduled: <time>%s</time>' ),
-							formattedDate
-						),
-						{ time: <time dateTime={ date } /> }
-				  )
-				: __( 'Scheduled' );
-			break;
-		case 'draft':
-			statusLabel = __( 'Draft' );
-			break;
-		case 'pending':
-			statusLabel = __( 'Pending' );
-			break;
-		case 'private':
-			statusLabel = __( 'Private' );
-			break;
-		case 'protected':
-			statusLabel = __( 'Password protected' );
-			break;
-	}
-
-	return (
-		<div
-			className={ clsx(
-				'edit-site-sidebar-navigation-screen-page__status',
-				{
-					[ `has-status has-${ status }-status` ]: !! status,
-				}
-			) }
-		>
-			{ statusLabel }
-		</div>
-	);
-}

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

@@ -1,69 +0,0 @@
-.edit-site-sidebar-navigation-screen-page__featured-image-wrapper {
-	background-color: $gray-800;
-	margin-bottom: $grid-unit-20;
-	min-height: 128px;
-	border-radius: $grid-unit-05;
-}
-
-.edit-site-sidebar-navigation-screen-page__featured-image {
-	border-radius: 2px;
-	height: 128px;
-	overflow: hidden;
-	width: 100%;
-	background-size: cover;
-	background-position: 50% 50%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: $gray-600;
-	img {
-		object-fit: cover;
-		height: 100%;
-		width: 100%;
-		object-position: 50% 50%;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-page__featured-image-description {
-	font-size: $helptext-font-size;
-}
-
-.edit-site-sidebar-navigation-screen-page__excerpt {
-	font-size: $helptext-font-size;
-	margin-bottom: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-page__modified {
-	margin: 0 0 $grid-unit-20 $grid-unit-20;
-	color: $gray-600;
-	.components-text {
-		color: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-page__status {
-	display: inline-flex;
-
-	time {
-		display: contents;
-	}
-
-	svg {
-		height: 16px;
-		width: 16px;
-		margin-right: $grid-unit-10;
-		fill: $alert-yellow;
-	}
-
-	&.has-publish-status svg,
-	&.has-future-status svg {
-		fill: $alert-green;
-	}
-}
-
-.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button {
-	color: inherit;
-	&:active {
-		color: inherit;
-	}
-}

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

@@ -1,57 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { pencil } from '@wordpress/icons';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import SidebarButton from '../sidebar-button';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
-import usePatternDetails from './use-pattern-details';
-import { store as editSiteStore } from '../../store';
-import { unlock } from '../../lock-unlock';
-import TemplateActions from '../template-actions';
-
-const { useLocation, useHistory } = unlock( routerPrivateApis );
-
-export default function SidebarNavigationScreenPattern( { backPath } ) {
-	const history = useHistory();
-	const location = useLocation();
-	const {
-		params: { postType, postId },
-	} = location;
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
-	useInitEditedEntityFromURL();
-
-	const patternDetails = usePatternDetails( postType, postId );
-
-	return (
-		<SidebarNavigationScreen
-			actions={
-				<>
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							history.push( backPath );
-						} }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			backPath={ backPath }
-			{ ...patternDetails }
-		/>
-	);
-}

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

@@ -1,26 +0,0 @@
-.edit-site-sidebar-navigation-screen-pattern__added-by-description {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-top: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-pattern__added-by-description-author {
-	display: inline-flex;
-	align-items: center;
-
-	img {
-		border-radius: $grid-unit-15;
-	}
-
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon {
-	width: 24px;
-	height: 24px;
-	margin-right: $grid-unit-10;
-}
-

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list-item.js

@@ -1,31 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import useNavigationMenuTitle from './use-navigation-menu-title';
-import { useLink } from '../routes/link';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-export default function TemplatePartNavigationMenuListItem( { id } ) {
-	const title = useNavigationMenuTitle( id );
-
-	const linkInfo = useLink( {
-		postId: id,
-		postType: NAVIGATION_POST_TYPE,
-	} );
-
-	if ( ! id || title === undefined ) {
-		return null;
-	}
-
-	return (
-		<SidebarNavigationItem withChevron { ...linkInfo }>
-			{ title || __( '(no title)' ) }
-		</SidebarNavigationItem>
-	);
-}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu-list.js

@@ -1,21 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenuListItem from './template-part-navigation-menu-list-item';
-
-export default function TemplatePartNavigationMenuList( { menus } ) {
-	return (
-		<ItemGroup className="edit-site-sidebar-navigation-screen-template-part-navigation-menu-list">
-			{ menus.map( ( menuId ) => (
-				<TemplatePartNavigationMenuListItem
-					key={ menuId }
-					id={ menuId }
-				/>
-			) ) }
-		</ItemGroup>
-	);
-}

package/src/components/sidebar-navigation-screen-pattern/template-part-navigation-menu.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
-import useNavigationMenuTitle from './use-navigation-menu-title';
-
-export default function TemplatePartNavigationMenu( { id } ) {
-	const title = useNavigationMenuTitle( id );
-
-	if ( ! id || title === undefined ) {
-		return null;
-	}
-
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="11"
-				upperCase
-				weight={ 500 }
-			>
-				{ title || __( 'Navigation' ) }
-			</Heading>
-			<NavigationMenuEditor navigationMenuId={ id } />
-		</>
-	);
-}