@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/sidebar-navigation-screen-template/home-template-details.js

@@ -1,144 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { debounce } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import {
-	CheckboxControl,
-	__experimentalInputControl as InputControl,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-} from '../sidebar-navigation-screen-details-panel';
-
-const EMPTY_OBJECT = {};
-
-export default function HomeTemplateDetails() {
-	const { editEntityRecord } = useDispatch( coreStore );
-
-	const {
-		allowCommentsOnNewPosts,
-		postsPerPage,
-		postsPageTitle,
-		postsPageId,
-	} = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		const _postsPageRecord = siteSettings?.page_for_posts
-			? getEntityRecord(
-					'postType',
-					'page',
-					siteSettings?.page_for_posts
-			  )
-			: EMPTY_OBJECT;
-
-		return {
-			allowCommentsOnNewPosts:
-				siteSettings?.default_comment_status === 'open',
-			postsPageTitle: _postsPageRecord?.title?.rendered,
-			postsPageId: _postsPageRecord?.id,
-			postsPerPage: siteSettings?.posts_per_page,
-		};
-	}, [] );
-
-	const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] =
-		useState( '' );
-	const [ postsCountValue, setPostsCountValue ] = useState( 1 );
-	const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' );
-
-	/*
-	 * This hook serves to set the server-retrieved values,
-	 * postsPageTitle, allowCommentsOnNewPosts, postsPerPage,
-	 * to local state.
-	 */
-	useEffect( () => {
-		setCommentsOnNewPostsValue( allowCommentsOnNewPosts );
-		setPostsPageTitleValue( postsPageTitle );
-		setPostsCountValue( postsPerPage );
-	}, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] );
-
-	const setAllowCommentsOnNewPosts = ( newValue ) => {
-		setCommentsOnNewPostsValue( newValue );
-		editEntityRecord( 'root', 'site', undefined, {
-			default_comment_status: newValue ? 'open' : null,
-		} );
-	};
-
-	const setPostsPageTitle = ( newValue ) => {
-		setPostsPageTitleValue( newValue );
-		editEntityRecord( 'postType', 'page', postsPageId, {
-			title: newValue,
-		} );
-	};
-
-	const setPostsPerPage = ( newValue ) => {
-		setPostsCountValue( newValue );
-		editEntityRecord( 'root', 'site', undefined, {
-			posts_per_page: newValue,
-		} );
-	};
-
-	return (
-		<>
-			<SidebarNavigationScreenDetailsPanel spacing={ 6 }>
-				{ postsPageId && (
-					<SidebarNavigationScreenDetailsPanelRow>
-						<InputControl
-							className="edit-site-sidebar-navigation-screen__input-control"
-							placeholder={ __( 'No Title' ) }
-							size={ '__unstable-large' }
-							value={ postsPageTitleValue }
-							onChange={ debounce( setPostsPageTitle, 300 ) }
-							label={ __( 'Blog title' ) }
-							help={ __(
-								'Set the Posts Page title. Appears in search results, and when the page is shared on social media.'
-							) }
-						/>
-					</SidebarNavigationScreenDetailsPanelRow>
-				) }
-				<SidebarNavigationScreenDetailsPanelRow>
-					<NumberControl
-						className="edit-site-sidebar-navigation-screen__input-control"
-						placeholder={ 0 }
-						value={ postsCountValue }
-						size={ '__unstable-large' }
-						spinControls="custom"
-						step="1"
-						min="1"
-						onChange={ setPostsPerPage }
-						label={ __( 'Posts per page' ) }
-						help={ __(
-							'Set the default number of posts to display on blog pages, including categories and tags. Some templates may override this setting.'
-						) }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
-			</SidebarNavigationScreenDetailsPanel>
-
-			<SidebarNavigationScreenDetailsPanel
-				title={ __( 'Discussion' ) }
-				spacing={ 3 }
-			>
-				<SidebarNavigationScreenDetailsPanelRow>
-					<CheckboxControl
-						className="edit-site-sidebar-navigation-screen__input-control"
-						label={ __( 'Allow comments on new posts' ) }
-						help={ __(
-							'Changes will apply to new posts only. Individual posts may override these settings.'
-						) }
-						checked={ commentsOnNewPostsValue }
-						onChange={ setAllowCommentsOnNewPosts }
-					/>
-				</SidebarNavigationScreenDetailsPanelRow>
-			</SidebarNavigationScreenDetailsPanel>
-		</>
-	);
-}

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

@@ -1,133 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, _x } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { pencil } from '@wordpress/icons';
-import { Icon } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
-
-/**
- * Internal dependencies
- */
-import TemplateAreas from './template-areas';
-import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../page-templates/hooks';
-import TemplateActions from '../template-actions';
-import HomeTemplateDetails from './home-template-details';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-
-const { useHistory, useLocation } = unlock( routerPrivateApis );
-
-function useTemplateDetails( postType, postId ) {
-	const { getDescription, getTitle, record } = useEditedEntityRecord(
-		postType,
-		postId
-	);
-	const currentTheme = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme(),
-		[]
-	);
-	const addedBy = useAddedBy( postType, postId );
-	const isAddedByActiveTheme =
-		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
-	const title = getTitle();
-	let descriptionText = getDescription();
-
-	if ( ! descriptionText && addedBy.text ) {
-		descriptionText = __(
-			'This is a custom template that can be applied manually to any Post or Page.'
-		);
-	}
-
-	const content =
-		record?.slug === 'home' || record?.slug === 'index' ? (
-			<>
-				<HomeTemplateDetails />
-				<TemplateAreas />
-			</>
-		) : (
-			<TemplateAreas />
-		);
-
-	const footer = record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter record={ record } />
-	) : null;
-
-	const description = (
-		<>
-			{ descriptionText }
-
-			{ addedBy.text && ! isAddedByActiveTheme && (
-				<span className="edit-site-sidebar-navigation-screen-template__added-by-description">
-					<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author">
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-author-icon">
-							{ addedBy.imageUrl ? (
-								<img
-									src={ addedBy.imageUrl }
-									alt=""
-									width="24"
-									height="24"
-								/>
-							) : (
-								<Icon icon={ addedBy.icon } />
-							) }
-						</span>
-						{ addedBy.text }
-					</span>
-
-					{ addedBy.isCustomized && (
-						<span className="edit-site-sidebar-navigation-screen-template__added-by-description-customized">
-							{ _x( '(Customized)', 'template' ) }
-						</span>
-					) }
-				</span>
-			) }
-		</>
-	);
-
-	return { title, description, content, footer };
-}
-
-export default function SidebarNavigationScreenTemplate() {
-	const history = useHistory();
-	const {
-		params: { postType, postId },
-	} = useLocation();
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { title, content, description, footer } = useTemplateDetails(
-		postType,
-		postId
-	);
-
-	return (
-		<SidebarNavigationScreen
-			title={ title }
-			actions={
-				<>
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							history.push( { path: '/' + postType } );
-						} }
-					/>
-					<SidebarButton
-						onClick={ () => setCanvasMode( 'edit' ) }
-						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
-				</>
-			}
-			description={ description }
-			content={ content }
-			footer={ footer }
-		/>
-	);
-}

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

@@ -1,53 +0,0 @@
-.edit-site-sidebar-navigation-screen-template__added-by-description {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	margin-top: $grid-unit-30;
-}
-
-.edit-site-sidebar-navigation-screen-template__added-by-description-author {
-	display: inline-flex;
-	align-items: center;
-
-	img {
-		border-radius: $grid-unit-15;
-		width: 20px;
-		height: 20px;
-	}
-
-	svg {
-		fill: $gray-600;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-template__added-by-description-author-icon {
-	width: 24px;
-	height: 24px;
-	margin-right: $grid-unit-05;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.edit-site-sidebar-navigation-screen-template__template-area-button {
-	color: $white;
-	display: flex;
-	align-items: center;
-	width: 100%;
-	flex-wrap: nowrap;
-	border-radius: 4px;
-	&:hover,
-	&:focus {
-		background: $gray-800;
-		color: $white;
-	}
-}
-
-.edit-site-sidebar-navigation-screen-template__template-area-label-text {
-	margin: 0 $grid-unit-20 0 $grid-unit-05;
-	flex-grow: 1;
-}
-
-.edit-site-sidebar-navigation-screen-template__template-icon {
-	display: flex;
-}

package/src/components/sidebar-navigation-screen-template/template-areas.js

@@ -1,135 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
-import {
-	__experimentalTruncate as Truncate,
-	__experimentalItemGroup as ItemGroup,
-} from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { decodeEntities } from '@wordpress/html-entities';
-
-/**
- * Internal dependencies
- */
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-} from '../sidebar-navigation-screen-details-panel';
-import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
-import { useLink } from '../routes/link';
-import SidebarNavigationItem from '../sidebar-navigation-item';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-function TemplateAreaButton( { postId, area, title } ) {
-	const templatePartArea = useSelect(
-		( select ) => {
-			const defaultAreas =
-				select(
-					editorStore
-				).__experimentalGetDefaultTemplatePartAreas();
-
-			return defaultAreas.find(
-				( defaultArea ) => defaultArea.area === area
-			);
-		},
-		[ area ]
-	);
-	const linkInfo = useLink( {
-		postType: TEMPLATE_PART_POST_TYPE,
-		postId,
-	} );
-
-	return (
-		<SidebarNavigationItem
-			className="edit-site-sidebar-navigation-screen-template__template-area-button"
-			{ ...linkInfo }
-			icon={ templatePartArea?.icon }
-			withChevron
-		>
-			<Truncate
-				limit={ 20 }
-				ellipsizeMode="tail"
-				numberOfLines={ 1 }
-				className="edit-site-sidebar-navigation-screen-template__template-area-label-text"
-			>
-				{ decodeEntities( title ) }
-			</Truncate>
-		</SidebarNavigationItem>
-	);
-}
-
-export default function TemplateAreas() {
-	const { templatePartAreas, currentTemplateParts } = useSelect(
-		( select ) => {
-			const { getSettings, getCurrentTemplateTemplateParts } = unlock(
-				select( editSiteStore )
-			);
-			return {
-				templatePartAreas: getSettings()?.defaultTemplatePartAreas,
-				currentTemplateParts: getCurrentTemplateTemplateParts(),
-			};
-		},
-		[]
-	);
-
-	/*
-	 * Merge data in currentTemplateParts with templatePartAreas,
-	 * which contains the template icon and fallback labels
-	 */
-	const templateAreas = useMemo( () => {
-		// Keep track of template part IDs that have already been added to the array.
-		const templatePartIds = new Set();
-		const filterOutDuplicateTemplateParts = ( currentTemplatePart ) => {
-			// If the template part has already been added to the array, skip it.
-			if ( templatePartIds.has( currentTemplatePart.templatePart.id ) ) {
-				return;
-			}
-			// Add to the array of template part IDs.
-			templatePartIds.add( currentTemplatePart.templatePart.id );
-			return currentTemplatePart;
-		};
-
-		return currentTemplateParts.length && templatePartAreas
-			? currentTemplateParts
-					.filter( filterOutDuplicateTemplateParts )
-					.map( ( { templatePart, block } ) => ( {
-						...templatePartAreas?.find(
-							( { area } ) => area === templatePart?.area
-						),
-						...templatePart,
-						clientId: block.clientId,
-					} ) )
-			: [];
-	}, [ currentTemplateParts, templatePartAreas ] );
-
-	if ( ! templateAreas.length ) {
-		return null;
-	}
-
-	return (
-		<SidebarNavigationScreenDetailsPanel
-			title={ __( 'Areas' ) }
-			spacing={ 3 }
-		>
-			<ItemGroup>
-				{ templateAreas.map(
-					( { clientId, label, area, theme, slug, title } ) => (
-						<SidebarNavigationScreenDetailsPanelRow
-							key={ clientId }
-						>
-							<TemplateAreaButton
-								postId={ `${ theme }//${ slug }` }
-								title={ title?.rendered || label }
-								area={ area }
-							/>
-						</SidebarNavigationScreenDetailsPanelRow>
-					)
-				) }
-			</ItemGroup>
-		</SidebarNavigationScreenDetailsPanel>
-	);
-}

package/src/components/start-template-options/index.js

@@ -1,231 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { parse } from '@wordpress/blocks';
-import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { store as editSiteStore } from '../../store';
-import { TEMPLATE_POST_TYPE } from '../../utils/constants';
-
-function useFallbackTemplateContent( slug, isCustom = false ) {
-	return useSelect(
-		( select ) => {
-			const { getEntityRecord, getDefaultTemplateId } =
-				select( coreStore );
-			const templateId = getDefaultTemplateId( {
-				slug,
-				is_custom: isCustom,
-				ignore_empty: true,
-			} );
-			return templateId
-				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
-						?.content?.raw
-				: undefined;
-		},
-		[ slug, isCustom ]
-	);
-}
-
-function useStartPatterns( fallbackContent ) {
-	const { slug, patterns } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEntityRecord, getBlockPatterns } = select( coreStore );
-		const postId = getEditedPostId();
-		const postType = getEditedPostType();
-		const record = getEntityRecord( 'postType', postType, postId );
-		return {
-			slug: record.slug,
-			patterns: getBlockPatterns(),
-		};
-	}, [] );
-
-	const currentThemeStylesheet = useSelect(
-		( select ) => select( coreStore ).getCurrentTheme().stylesheet
-	);
-
-	// Duplicated from packages/block-library/src/pattern/edit.js.
-	function injectThemeAttributeInBlockTemplateContent( block ) {
-		if (
-			block.innerBlocks.find(
-				( innerBlock ) => innerBlock.name === 'core/template-part'
-			)
-		) {
-			block.innerBlocks = block.innerBlocks.map( ( innerBlock ) => {
-				if (
-					innerBlock.name === 'core/template-part' &&
-					innerBlock.attributes.theme === undefined
-				) {
-					innerBlock.attributes.theme = currentThemeStylesheet;
-				}
-				return innerBlock;
-			} );
-		}
-
-		if (
-			block.name === 'core/template-part' &&
-			block.attributes.theme === undefined
-		) {
-			block.attributes.theme = currentThemeStylesheet;
-		}
-		return block;
-	}
-
-	return useMemo( () => {
-		// filter patterns that are supposed to be used in the current template being edited.
-		return [
-			{
-				name: 'fallback',
-				blocks: parse( fallbackContent ),
-				title: __( 'Fallback content' ),
-			},
-			...patterns
-				.filter( ( pattern ) => {
-					return (
-						Array.isArray( pattern.templateTypes ) &&
-						pattern.templateTypes.some( ( templateType ) =>
-							slug.startsWith( templateType )
-						)
-					);
-				} )
-				.map( ( pattern ) => {
-					return {
-						...pattern,
-						blocks: parse( pattern.content ).map( ( block ) =>
-							injectThemeAttributeInBlockTemplateContent( block )
-						),
-					};
-				} ),
-		];
-	}, [ fallbackContent, slug, patterns ] );
-}
-
-function PatternSelection( { fallbackContent, onChoosePattern, postType } ) {
-	const [ , , onChange ] = useEntityBlockEditor( 'postType', postType );
-	const blockPatterns = useStartPatterns( fallbackContent );
-	const shownBlockPatterns = useAsyncList( blockPatterns );
-	return (
-		<BlockPatternsList
-			blockPatterns={ blockPatterns }
-			shownPatterns={ shownBlockPatterns }
-			onClickPattern={ ( pattern, blocks ) => {
-				onChange( blocks, { selection: undefined } );
-				onChoosePattern();
-			} }
-		/>
-	);
-}
-
-function StartModal( { slug, isCustom, onClose, postType } ) {
-	const fallbackContent = useFallbackTemplateContent( slug, isCustom );
-	if ( ! fallbackContent ) {
-		return null;
-	}
-	return (
-		<Modal
-			className="edit-site-start-template-options__modal"
-			title={ __( 'Choose a pattern' ) }
-			closeLabel={ __( 'Cancel' ) }
-			focusOnMount="firstElement"
-			onRequestClose={ onClose }
-			isFullScreen
-		>
-			<div className="edit-site-start-template-options__modal-content">
-				<PatternSelection
-					fallbackContent={ fallbackContent }
-					slug={ slug }
-					isCustom={ isCustom }
-					postType={ postType }
-					onChoosePattern={ () => {
-						onClose();
-					} }
-				/>
-			</div>
-			<Flex
-				className="edit-site-start-template-options__modal__actions"
-				justify="flex-end"
-				expanded={ false }
-			>
-				<FlexItem>
-					<Button variant="tertiary" onClick={ onClose }>
-						{ __( 'Skip' ) }
-					</Button>
-				</FlexItem>
-			</Flex>
-		</Modal>
-	);
-}
-
-const START_TEMPLATE_MODAL_STATES = {
-	INITIAL: 'INITIAL',
-	CLOSED: 'CLOSED',
-};
-
-export default function StartTemplateOptions() {
-	const [ modalState, setModalState ] = useState(
-		START_TEMPLATE_MODAL_STATES.INITIAL
-	);
-	const { shouldOpenModal, slug, isCustom, postType } = useSelect(
-		( select ) => {
-			const { getEditedPostType, getEditedPostId } =
-				select( editSiteStore );
-			const _postType = getEditedPostType();
-			const postId = getEditedPostId();
-			const { getEditedEntityRecord, hasEditsForEntityRecord } =
-				select( coreStore );
-			const templateRecord = getEditedEntityRecord(
-				'postType',
-				_postType,
-				postId
-			);
-			const hasEdits = hasEditsForEntityRecord(
-				'postType',
-				_postType,
-				postId
-			);
-
-			return {
-				shouldOpenModal:
-					! hasEdits &&
-					'' === templateRecord.content &&
-					TEMPLATE_POST_TYPE === _postType &&
-					! select( preferencesStore ).get(
-						'core/edit-site',
-						'welcomeGuide'
-					),
-				slug: templateRecord.slug,
-				isCustom: templateRecord.is_custom,
-				postType: _postType,
-			};
-		},
-		[]
-	);
-
-	if (
-		( modalState === START_TEMPLATE_MODAL_STATES.INITIAL &&
-			! shouldOpenModal ) ||
-		modalState === START_TEMPLATE_MODAL_STATES.CLOSED
-	) {
-		return null;
-	}
-
-	return (
-		<StartModal
-			slug={ slug }
-			isCustom={ isCustom }
-			postType={ postType }
-			onClose={ () =>
-				setModalState( START_TEMPLATE_MODAL_STATES.CLOSED )
-			}
-		/>
-	);
-}