@wordpress/edit-site 5.34.0 → 6.0.0

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,63 +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() {
-	const history = useHistory();
-	const location = useLocation();
-	const {
-		params: { postType, postId, categoryId, categoryType },
-	} = location;
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
-	useInitEditedEntityFromURL();
-
-	const patternDetails = usePatternDetails( postType, postId );
-
-	const backPath = {
-		categoryId,
-		categoryType,
-		path: '/patterns',
-	};
-
-	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 } />
-		</>
-	);
-}

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 };
-}