@wordpress/edit-site 5.19.3 → 5.19.5

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

@@ -37,3 +37,21 @@ h3.edit-site-template-card__template-areas-title {
 	font-weight: 500;
 	margin: 0 0 $grid-unit-10;
 }
+
+
+.edit-site-template-panel__replace-template-modal {
+	z-index: z-index(".edit-site-template-panel__replace-template-modal");
+}
+
+.edit-site-template-panel__replace-template-modal__content {
+	column-count: 2;
+	column-gap: $grid-unit-30;
+
+	@include break-medium() {
+		column-count: 3;
+	}
+
+	@include break-wide() {
+		column-count: 4;
+	}
+}

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

@@ -11,13 +11,21 @@ import { moreVertical } from '@wordpress/icons';
  */
 import { store as editSiteStore } from '../../../store';
 import isTemplateRevertable from '../../../utils/is-template-revertable';
+import ReplaceTemplateButton from './replace-template-button';
+import { useAvailablePatterns } from './hooks';
 
 export default function Actions( { template } ) {
+	const availablePatterns = useAvailablePatterns( template );
 	const { revertTemplate } = useDispatch( editSiteStore );
 	const isRevertable = isTemplateRevertable( template );
-	if ( ! isRevertable ) {
+
+	if (
+		! isRevertable &&
+		( ! availablePatterns.length || availablePatterns.length < 1 )
+	) {
 		return null;
 	}
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -27,17 +35,24 @@ export default function Actions( { template } ) {
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
-					<MenuItem
-						info={ __(
-							'Use the template as supplied by the theme.'
-						) }
-						onClick={ () => {
-							revertTemplate( template );
-							onClose();
-						} }
-					>
-						{ __( 'Clear customizations' ) }
-					</MenuItem>
+					{ isRevertable && (
+						<MenuItem
+							info={ __(
+								'Use the template as supplied by the theme.'
+							) }
+							onClick={ () => {
+								revertTemplate( template );
+								onClose();
+							} }
+						>
+							{ __( 'Clear customizations' ) }
+						</MenuItem>
+					) }
+					<ReplaceTemplateButton
+						availableTemplates={ availablePatterns }
+						template={ template }
+						onClick={ onClose }
+					/>
 				</MenuGroup>
 			) }
 		</DropdownMenu>

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

@@ -76,6 +76,19 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+	@include break-medium() {
+		// Safari does not currently support `scrollbar-gutter: stable`, so at
+		// particular viewport sizes it's possible for previews to render prior to a
+		// scrollbar appearing. This then causes a scrollbar to appear, which reduces
+		// the width of the container and can cause the preview's width to change.
+		// As a result, the preview can go into an endless loop of resizing, causing
+		// the preview elements to appear to "dance". A workaround is to provide a
+		// max-width for the container, which prevents the introduction of the scrollbar
+		// from causing the preview's width to change.
+		// See: https://github.com/WordPress/gutenberg/issues/55112
+		max-width: 292px;
+	}
+
 	.edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;
 	}

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

@@ -1,30 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
 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 ] = useEntityProp(
-		'postType',
-		NAVIGATION_POST_TYPE,
-		'title',
-		id
-	);
+	const title = useNavigationMenuTitle( id );
 
 	const linkInfo = useLink( {
 		postId: id,
 		postType: NAVIGATION_POST_TYPE,
 	} );
 
-	if ( ! id ) return null;
+	if ( ! id || title === undefined ) {
+		return null;
+	}
 
 	return (
 		<SidebarNavigationItem withChevron { ...linkInfo }>

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

@@ -3,23 +3,19 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalHeading as Heading } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor';
-import { NAVIGATION_POST_TYPE } from '../../utils/constants';
+import useNavigationMenuTitle from './use-navigation-menu-title';
 
 export default function TemplatePartNavigationMenu( { id } ) {
-	const [ title ] = useEntityProp(
-		'postType',
-		NAVIGATION_POST_TYPE,
-		'title',
-		id
-	);
+	const title = useNavigationMenuTitle( id );
 
-	if ( ! id ) return null;
+	if ( ! id || title === undefined ) {
+		return null;
+	}
 
 	return (
 		<>

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

@@ -10,6 +10,16 @@ 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.
  *
@@ -60,11 +70,7 @@ export default function useNavigationMenuContent( postType, postId ) {
 		return;
 	}
 
-	const blocks =
-		record?.content && typeof record.content !== 'function'
-			? parse( record.content )
-			: [];
-
+	const blocks = getBlocksFromRecord( record );
 	const navigationBlocks = getBlocksOfTypeFromBlocks(
 		'core/navigation',
 		blocks

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

@@ -0,0 +1,32 @@
+/**
+ * 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/store/selectors.js

@@ -292,22 +292,21 @@ export function isSaveViewOpened( state ) {
  * @return {Array} Template parts and their blocks in an array.
  */
 export const getCurrentTemplateTemplateParts = createRegistrySelector(
-	( select ) => ( state ) => {
-		const templateType = getEditedPostType( state );
-		const templateId = getEditedPostId( state );
-		const template = select( coreDataStore ).getEditedEntityRecord(
-			'postType',
-			templateType,
-			templateId
-		);
-
+	( select ) => () => {
 		const templateParts = select( coreDataStore ).getEntityRecords(
 			'postType',
 			TEMPLATE_PART_POST_TYPE,
 			{ per_page: -1 }
 		);
 
-		return getFilteredTemplatePartBlocks( template.blocks, templateParts );
+		const clientIds =
+			select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
+				'core/template-part'
+			);
+		const blocks =
+			select( blockEditorStore ).getBlocksByClientId( clientIds );
+
+		return getFilteredTemplatePartBlocks( blocks, templateParts );
 	}
 );
 

package/src/utils/constants.js

@@ -50,7 +50,7 @@ export const PAGE_CONTENT_BLOCK_TYPES = {
 
 export const POST_TYPE_LABELS = {
 	[ TEMPLATE_POST_TYPE ]: __( 'Template' ),
-	[ TEMPLATE_PART_POST_TYPE ]: __( 'Template Part' ),
+	[ TEMPLATE_PART_POST_TYPE ]: __( 'Template part' ),
 	[ PATTERN_TYPES.user ]: __( 'Pattern' ),
 	[ NAVIGATION_POST_TYPE ]: __( 'Navigation' ),
 };