Template inspector: Surface related patterns (#55091)

[7bc5ee8707] template-panel/index rebase [4d47f77146] Make titles tooltips (+8 squashed commits) Squashed commits: [3488f2f] Layout tweaks [f450cd5] remove CSS [b3990a7] remove unused file [3bd79a7] update comment [e07cd80] Add comments [aaae875] Let users select a pattern [4aa4272] fetch patterns not template parts [3f3da4b] Add template parts to template parts (whoops) * Make things panel open by default for template parts --------- Co-authored-by: scruffian <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]> Co-authored-by: carolinan <[email protected]> Co-authored-by: glendaviesnz <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: oandregal <[email protected]> Co-authored-by: paaljoachim <[email protected]> Co-authored-by: mtias <[email protected]> Co-authored-by: SaxonF <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Feb 20, 2024 · a016d82 · a016d82
1 parent 9ce80a0
commit a016d82
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 157 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
@@ -36,7 +36,14 @@ function injectThemeAttributeInBlockTemplateContent(
 	return block;
 }
 
-function preparePatterns( patterns, template, currentThemeStylesheet ) {
+/**
+ * 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 );
@@ -45,30 +52,33 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
 	const filterOutExcludedPatternSources = ( pattern ) =>
 		! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );
 
-	// Filter only the patterns that are compatible with the current template.
+	// 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.templateTypes?.includes( template.slug ) ||
+		pattern.blockTypes?.includes( 'core/template-part/' + template.area );
 
-	return patterns
-		.filter(
-			( pattern, index, items ) =>
-				filterOutExcludedPatternSources( pattern ) &&
-				filterOutDuplicatesByName( pattern, index, items ) &&
-				filterCompatiblePatterns( pattern )
-		)
-		.map( ( pattern ) => ( {
-			...pattern,
-			keywords: pattern.keywords || [],
-			type: PATTERN_TYPES.theme,
-			blocks: parse( pattern.content, {
-				__unstableSkipMigrationLogs: true,
-			} ).map( ( block ) =>
-				injectThemeAttributeInBlockTemplateContent(
-					block,
-					currentThemeStylesheet
-				)
-			),
-		} ) );
+	return patterns.filter(
+		filterOutDuplicatesByName &&
+			filterOutExcludedPatternSources &&
+			filterCompatiblePatterns
+	);
+}
+
+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 ) {
@@ -92,8 +102,9 @@ export function useAvailablePatterns( template ) {
 			...( blockPatterns || [] ),
 			...( restBlockPatterns || [] ),
 		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
 		return preparePatterns(
-			mergedPatterns,
+			filteredPatterns,
 			template,
 			currentThemeStylesheet
 		);

diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { PanelBody, PanelRow } from '@wordpress/components';
 import {
 	PageAttributesPanel,
 	PostDiscussionPanel,
@@ -15,6 +15,10 @@ import {
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { navigation, symbol } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useAsyncList } from '@wordpress/compose';
+import { serialize } from '@wordpress/blocks';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -23,36 +27,71 @@ import { store as editSiteStore } from '../../../store';
 import TemplateActions from './template-actions';
 import TemplateAreas from './template-areas';
 import SidebarCard from '../sidebar-card';
+import { useAvailablePatterns } from './hooks';
+import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
 
 const CARD_ICONS = {
 	wp_block: symbol,
 	wp_navigation: navigation,
 };
 
+function TemplatesList( { availableTemplates, onSelect } ) {
+	const shownTemplates = useAsyncList( availableTemplates );
+	if ( ! availableTemplates || availableTemplates?.length < 2 ) {
+		return null;
+	}
+
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ availableTemplates }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+			showTitlesAsTooltip={ true }
+		/>
+	);
+}
+
 export default function TemplatePanel() {
-	const { title, description, icon, record } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
+	const { title, description, icon, 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 );
 
-		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,
+			};
+		},
+		[]
+	);
 
-		return {
-			title: info.title,
-			description: info.description,
-			icon: info.icon,
-			record: _record,
-		};
-	}, [] );
+	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 (
 		<>
 			<PanelBody>
@@ -66,6 +105,22 @@ export default function TemplatePanel() {
 					<TemplateAreas />
 				</SidebarCard>
 			</PanelBody>
+			<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>
 			<PostLastRevisionPanel />
 			<PostTaxonomiesPanel />
 			<PostFeaturedImagePanel />

diff --git a/...ages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js b/...ages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
@@ -34,20 +34,11 @@ h3.edit-site-template-card__template-areas-title {
 	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-card__templates-list {
+	margin-top: $grid-unit-20;
 }
 
-.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;
-	}
+.edit-site-template-panel .block-editor-block-preview__container {
+	border-radius: 2px;
+	box-shadow: none;
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
@@ -11,18 +11,12 @@ 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 &&
-		( ! availablePatterns.length || availablePatterns.length < 1 )
-	) {
+	if ( ! isRevertable ) {
 		return null;
 	}
 
@@ -48,11 +42,6 @@ export default function Actions( { template } ) {
 							{ __( 'Clear customizations' ) }
 						</MenuItem>
 					) }
-					<ReplaceTemplateButton
-						availableTemplates={ availablePatterns }
-						template={ template }
-						onClick={ onClose }
-					/>
 				</MenuGroup>
 			) }
 		</DropdownMenu>