@wordpress/edit-site 5.34.0 → 6.0.0

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

@@ -1,114 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
-import { store as coreStore } from '@wordpress/core-data';
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import {
-	EXCLUDED_PATTERN_SOURCES,
-	PATTERN_TYPES,
-} from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
-
-function injectThemeAttributeInBlockTemplateContent(
-	block,
-	currentThemeStylesheet
-) {
-	block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
-		return injectThemeAttributeInBlockTemplateContent(
-			innerBlock,
-			currentThemeStylesheet
-		);
-	} );
-
-	if (
-		block.name === 'core/template-part' &&
-		block.attributes.theme === undefined
-	) {
-		block.attributes.theme = currentThemeStylesheet;
-	}
-	return block;
-}
-
-/**
- * Filter all patterns and return only the ones that are compatible with the current template.
- *
- * @param {Array}  patterns An array of patterns.
- * @param {Object} template The current template.
- * @return {Array} Array of patterns that are compatible with the current template.
- */
-function filterPatterns( patterns, template ) {
-	// Filter out duplicates.
-	const filterOutDuplicatesByName = ( currentItem, index, items ) =>
-		index === items.findIndex( ( item ) => currentItem.name === item.name );
-
-	// Filter out core/directory patterns not included in theme.json.
-	const filterOutExcludedPatternSources = ( pattern ) =>
-		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
-
-	// Looks for patterns that have the same template type as the current template,
-	// or have a block type that matches the current template area.
-	const filterCompatiblePatterns = ( pattern ) =>
-		pattern.templateTypes?.includes( template.slug ) ||
-		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
-
-	return patterns.filter( ( pattern, index, items ) => {
-		return (
-			filterOutDuplicatesByName( pattern, index, items ) &&
-			filterOutExcludedPatternSources( pattern ) &&
-			filterCompatiblePatterns( pattern )
-		);
-	} );
-}
-
-function preparePatterns( patterns, template, currentThemeStylesheet ) {
-	return patterns.map( ( pattern ) => ( {
-		...pattern,
-		keywords: pattern.keywords || [],
-		type: PATTERN_TYPES.theme,
-		blocks: parse( pattern.content, {
-			__unstableSkipMigrationLogs: true,
-		} ).map( ( block ) =>
-			injectThemeAttributeInBlockTemplateContent(
-				block,
-				currentThemeStylesheet
-			)
-		),
-	} ) );
-}
-
-export function useAvailablePatterns( template ) {
-	const { blockPatterns, restBlockPatterns, currentThemeStylesheet } =
-		useSelect( ( select ) => {
-			const { getSettings } = unlock( select( editSiteStore ) );
-			const settings = getSettings();
-
-			return {
-				blockPatterns:
-					settings.__experimentalAdditionalBlockPatterns ??
-					settings.__experimentalBlockPatterns,
-				restBlockPatterns: select( coreStore ).getBlockPatterns(),
-				currentThemeStylesheet:
-					select( coreStore ).getCurrentTheme().stylesheet,
-			};
-		}, [] );
-
-	return useMemo( () => {
-		const mergedPatterns = [
-			...( blockPatterns || [] ),
-			...( restBlockPatterns || [] ),
-		];
-		const filteredPatterns = filterPatterns( mergedPatterns, template );
-		return preparePatterns(
-			filteredPatterns,
-			template,
-			currentThemeStylesheet
-		);
-	}, [ blockPatterns, restBlockPatterns, template, currentThemeStylesheet ] );
-}

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

@@ -1,134 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { PanelBody, PanelRow } from '@wordpress/components';
-import {
-	PluginDocumentSettingPanel,
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
-import { store as coreStore } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { useAsyncList } from '@wordpress/compose';
-import { serialize } from '@wordpress/blocks';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../../store';
-import TemplateActions from '../../template-actions';
-import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
-import { useAvailablePatterns } from './hooks';
-import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
-import { unlock } from '../../../lock-unlock';
-
-const { PostCardPanel } = unlock( editorPrivateApis );
-const { useHistory } = unlock( routerPrivateApis );
-
-function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
-	if ( ! availableTemplates || availableTemplates?.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-			showTitlesAsTooltip
-		/>
-	);
-}
-
-const POST_TYPE_PATH = {
-	wp_template: '/wp_template',
-	wp_template_part: '/patterns',
-};
-
-export default function TemplatePanel() {
-	const { title, description, record, postType, postId } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const { getEditedEntityRecord } = select( coreStore );
-			const { __experimentalGetTemplateInfo: getTemplateInfo } =
-				select( editorStore );
-
-			const type = getEditedPostType();
-			const _postId = getEditedPostId();
-			const _record = getEditedEntityRecord( 'postType', type, _postId );
-			const info = getTemplateInfo( _record );
-
-			return {
-				title: info.title,
-				description: info.description,
-				icon: info.icon,
-				record: _record,
-				postType: type,
-				postId: _postId,
-			};
-		},
-		[]
-	);
-	const history = useHistory();
-	const availablePatterns = useAvailablePatterns( record );
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	if ( ! title && ! description ) {
-		return null;
-	}
-
-	const onTemplateSelect = async ( selectedTemplate ) => {
-		await editEntityRecord( 'postType', postType, postId, {
-			blocks: selectedTemplate.blocks,
-			content: serialize( selectedTemplate.blocks ),
-		} );
-	};
-
-	return (
-		<>
-			<PostCardPanel
-				className="edit-site-template-card"
-				actions={
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						className="edit-site-template-card__actions"
-						toggleProps={ { size: 'small' } }
-						onRemove={ () => {
-							history.push( {
-								path: POST_TYPE_PATH[ postType ],
-							} );
-						} }
-					/>
-				}
-			/>
-			<PluginTemplateSettingPanel.Slot />
-			<PluginDocumentSettingPanel.Slot />
-			{ availablePatterns?.length > 0 && (
-				<PanelBody
-					title={ __( 'Transform into:' ) }
-					initialOpen={ postType === TEMPLATE_PART_POST_TYPE }
-				>
-					<PanelRow>
-						<p>
-							{ __(
-								'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
-							) }
-						</p>
-					</PanelRow>
-
-					<TemplatesList
-						availableTemplates={ availablePatterns }
-						onSelect={ onTemplateSelect }
-					/>
-				</PanelBody>
-			) }
-		</>
-	);
-}

package/src/components/sidebar-edit-mode/template-panel/style.scss

@@ -1,16 +0,0 @@
-.edit-site-template-card {
-	&__actions {
-		line-height: 0;
-		> .components-button.is-small.has-icon {
-			padding: 0;
-			min-width: auto;
-		}
-		flex-shrink: 0;
-	}
-}
-
-
-.edit-site-template-panel .block-editor-block-preview__container {
-	border-radius: 2px;
-	box-shadow: none;
-}

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 classnames from 'classnames';
-
-/**
- * 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={ classnames(
-				'edit-site-sidebar-navigation-screen-page__status',
-				{
-					[ `has-status has-${ status }-status` ]: !! status,
-				}
-			) }
-		>
-			{ statusLabel }
-		</div>
-	);
-}