@wordpress/edit-site 5.35.0 → 6.0.0

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

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { __experimentalHeading as Heading } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenu from './template-part-navigation-menu';
-import TemplatePartNavigationMenuList from './template-part-navigation-menu-list';
-
-export default function TemplatePartNavigationMenus( { menus } ) {
-	if ( ! menus.length ) {
-		return null;
-	}
-
-	// if there is a single menu then render TemplatePartNavigationMenu
-	if ( menus.length === 1 ) {
-		return <TemplatePartNavigationMenu id={ menus[ 0 ] } />;
-	}
-
-	// if there are multiple menus then render TemplatePartNavigationMenuList
-	return (
-		<>
-			<Heading
-				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
-				size="11"
-				upperCase
-				weight={ 500 }
-			>
-				{ __( 'Navigation' ) }
-			</Heading>
-			<TemplatePartNavigationMenuList menus={ menus } />
-		</>
-	);
-}

package/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-content.js

@@ -1,98 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { parse } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import TemplatePartNavigationMenus from './template-part-navigation-menus';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
-
-function getBlocksFromRecord( record ) {
-	if ( record?.blocks ) {
-		return record?.blocks;
-	}
-
-	return record?.content && typeof record.content !== 'function'
-		? parse( record.content )
-		: [];
-}
-
-/**
- * Retrieves a list of specific blocks from a given tree of blocks.
- *
- * @param {string} targetBlockType The name of the block type to find.
- * @param {Array}  blocks          A list of blocks from a template part entity.
- *
- * @return {Array} A list of any navigation blocks found in the blocks.
- */
-function getBlocksOfTypeFromBlocks( targetBlockType, blocks ) {
-	if ( ! targetBlockType || ! blocks?.length ) {
-		return [];
-	}
-
-	const findInBlocks = ( _blocks ) => {
-		if ( ! _blocks ) {
-			return [];
-		}
-
-		const navigationBlocks = [];
-
-		for ( const block of _blocks ) {
-			if ( block.name === targetBlockType ) {
-				navigationBlocks.push( block );
-			}
-
-			if ( block?.innerBlocks ) {
-				const innerNavigationBlocks = findInBlocks( block.innerBlocks );
-
-				if ( innerNavigationBlocks.length ) {
-					navigationBlocks.push( ...innerNavigationBlocks );
-				}
-			}
-		}
-
-		return navigationBlocks;
-	};
-
-	return findInBlocks( blocks );
-}
-
-export default function useNavigationMenuContent( postType, postId ) {
-	const { record } = useEditedEntityRecord( postType, postId );
-
-	// Only managing navigation menus in template parts is supported
-	// to match previous behaviour. This could potentially be expanded
-	// to patterns as well.
-	if ( postType !== TEMPLATE_PART_POST_TYPE ) {
-		return;
-	}
-
-	const blocks = getBlocksFromRecord( record );
-	const navigationBlocks = getBlocksOfTypeFromBlocks(
-		'core/navigation',
-		blocks
-	);
-
-	if ( ! navigationBlocks.length ) {
-		return;
-	}
-
-	const navigationMenuIds = navigationBlocks?.map(
-		( block ) => block.attributes.ref
-	);
-
-	// Dedupe the Navigation blocks, as you can have multiple navigation blocks in the template.
-	// Also, filter out undefined values, as blocks don't have an id when initially added.
-	const uniqueNavigationMenuIds = [ ...new Set( navigationMenuIds ) ].filter(
-		( menuId ) => menuId
-	);
-
-	if ( ! uniqueNavigationMenuIds?.length ) {
-		return;
-	}
-
-	return <TemplatePartNavigationMenus menus={ uniqueNavigationMenuIds } />;
-}

package/src/components/sidebar-navigation-screen-pattern/use-navigation-menu-title.js

@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
-
-export default function useNavigationMenuTitle( id ) {
-	return useSelect(
-		( select ) => {
-			if ( ! id ) {
-				return undefined;
-			}
-
-			const editedRecord = select( coreStore ).getEditedEntityRecord(
-				'postType',
-				NAVIGATION_POST_TYPE,
-				id
-			);
-
-			// Do not display a 'trashed' navigation menu.
-			return editedRecord.status === 'trash'
-				? undefined
-				: editedRecord.title;
-		},
-		[ id ]
-	);
-}

package/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js

@@ -1,205 +0,0 @@
-/**
- * External dependencies
- */
-import { sentenceCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { useAddedBy } from '../page-templates/hooks';
-import useEditedEntityRecord from '../use-edited-entity-record';
-import useNavigationMenuContent from './use-navigation-menu-content';
-import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import {
-	SidebarNavigationScreenDetailsPanel,
-	SidebarNavigationScreenDetailsPanelRow,
-	SidebarNavigationScreenDetailsPanelLabel,
-	SidebarNavigationScreenDetailsPanelValue,
-} from '../sidebar-navigation-screen-details-panel';
-import {
-	PATTERN_TYPES,
-	TEMPLATE_PART_POST_TYPE,
-	PATTERN_SYNC_TYPES,
-	TEMPLATE_ORIGINS,
-} from '../../utils/constants';
-
-export default function usePatternDetails( postType, postId ) {
-	const { getDescription, getTitle, record } = useEditedEntityRecord(
-		postType,
-		postId
-	);
-	const templatePartAreas = useSelect(
-		( select ) =>
-			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
-		[]
-	);
-	const { currentTheme, userPatternCategories } = useSelect( ( select ) => {
-		const { getCurrentTheme, getUserPatternCategories } =
-			select( coreStore );
-
-		return {
-			currentTheme: getCurrentTheme(),
-			userPatternCategories: getUserPatternCategories(),
-		};
-	}, [] );
-
-	const addedBy = useAddedBy( postType, postId );
-	const isAddedByActiveTheme =
-		addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
-	const title = getTitle();
-	let description = getDescription();
-
-	if ( ! description && addedBy.text ) {
-		description =
-			postType === PATTERN_TYPES.user
-				? sprintf(
-						// translators: %s: pattern title e.g: "Header".
-						__( 'This is the %s pattern.' ),
-						getTitle()
-				  )
-				: sprintf(
-						// translators: %s: template part title e.g: "Header".
-						__( 'This is the %s template part.' ),
-						getTitle()
-				  );
-	}
-
-	if ( ! description && postType === PATTERN_TYPES.user && record?.title ) {
-		description = sprintf(
-			// translators: %s: user created pattern title e.g. "Footer".
-			__( 'This is the %s pattern.' ),
-			record.title
-		);
-	}
-
-	const footer = record?.modified ? (
-		<SidebarNavigationScreenDetailsFooter record={ record } />
-	) : null;
-
-	const details = [];
-
-	if (
-		postType === PATTERN_TYPES.user ||
-		postType === TEMPLATE_PART_POST_TYPE
-	) {
-		details.push( {
-			label: __( 'Syncing' ),
-			value:
-				record.wp_pattern_sync_status === PATTERN_SYNC_TYPES.unsynced
-					? _x(
-							'Not synced',
-							'Text that indicates that the pattern is not synchronized'
-					  )
-					: _x(
-							'Synced',
-							'Text that indicates that the pattern is synchronized'
-					  ),
-		} );
-
-		if ( record.wp_pattern_category?.length === 0 ) {
-			details.push( {
-				label: __( 'Categories' ),
-				value: __( 'Uncategorized' ),
-			} );
-		}
-		if ( record.wp_pattern_category?.length > 0 ) {
-			const patternCategories = new Map();
-			userPatternCategories.forEach( ( userCategory ) =>
-				patternCategories.set( userCategory.id, userCategory )
-			);
-
-			const categories = record.wp_pattern_category
-				.filter( ( category ) => patternCategories.get( category ) )
-				.map( ( category ) => patternCategories.get( category ).label );
-
-			details.push( {
-				label: __( 'Categories' ),
-				value: categories.length > 0 ? categories.join( ', ' ) : '',
-			} );
-		}
-	}
-
-	if ( postType === TEMPLATE_PART_POST_TYPE ) {
-		const templatePartArea = templatePartAreas.find(
-			( area ) => area.area === record.area
-		);
-
-		let areaDetailValue = templatePartArea?.label;
-
-		if ( ! areaDetailValue ) {
-			areaDetailValue = record.area
-				? sprintf(
-						// translators: %s: Sentenced cased template part area e.g: "My custom area".
-						__( '%s (removed)' ),
-						sentenceCase( record.area )
-				  )
-				: __( 'None' );
-		}
-
-		details.push( { label: __( 'Area' ), value: areaDetailValue } );
-	}
-
-	if (
-		postType === TEMPLATE_PART_POST_TYPE &&
-		addedBy.text &&
-		! isAddedByActiveTheme
-	) {
-		details.push( {
-			label: __( 'Added by' ),
-			value: (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
-					{ addedBy.text }
-				</span>
-			),
-		} );
-	}
-
-	if (
-		postType === TEMPLATE_PART_POST_TYPE &&
-		addedBy.text &&
-		( record.origin === TEMPLATE_ORIGINS.plugin ||
-			record.has_theme_file === true )
-	) {
-		details.push( {
-			label: __( 'Customized' ),
-			value: (
-				<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
-					{ addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) }
-				</span>
-			),
-		} );
-	}
-
-	const content = (
-		<>
-			{ useNavigationMenuContent( postType, postId ) }
-			{ !! details.length && (
-				<SidebarNavigationScreenDetailsPanel
-					spacing={ 5 }
-					title={ __( 'Details' ) }
-				>
-					{ details.map( ( { label, value } ) => (
-						<SidebarNavigationScreenDetailsPanelRow key={ label }>
-							<SidebarNavigationScreenDetailsPanelLabel>
-								{ label }
-							</SidebarNavigationScreenDetailsPanelLabel>
-							<SidebarNavigationScreenDetailsPanelValue>
-								{ value }
-							</SidebarNavigationScreenDetailsPanelValue>
-						</SidebarNavigationScreenDetailsPanelRow>
-					) ) }
-				</SidebarNavigationScreenDetailsPanel>
-			) }
-		</>
-	);
-
-	return { title, description, content, footer };
-}

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,134 +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( { backPath } ) {
-	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 }
-			backPath={ backPath }
-			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;
-}