Template Parts: Fix the template part replace flow

packages/block-editor/README.md

@@ -1028,6 +1028,10 @@ _Returns_
 
 -   `any[]`: Returns the values defined for the settings.
 
+### useZoomOut
+
+A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+
 ### Warning
 
 _Related_

packages/block-editor/src/components/inserter/block-patterns-tab/index.js

@@ -20,6 +20,7 @@ import PatternsExplorerModal from '../block-patterns-explorer';
 import MobileTabNavigation from '../mobile-tab-navigation';
 import { PatternCategoryPreviews } from './pattern-category-previews';
 import { usePatternCategories } from './use-pattern-categories';
+import { useZoomOut } from '../../../hooks/use-zoom-out';
 
 function BlockPatternsTab( {
 	onSelectCategory,
@@ -33,6 +34,11 @@ function BlockPatternsTab( {
 
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
+
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
+
 	return (
 		<>
 			{ ! isMobile && (

packages/block-editor/src/hooks/index.js

@@ -78,3 +78,4 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { useZoomOut } from './use-zoom-out';

packages/block-editor/src/hooks/use-zoom-out.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+
+/**
+ * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode.
+ */
+export function useZoomOut() {
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	const { mode } = useSelect( ( select ) => {
+		return {
+			mode: select( blockEditorStore ).__unstableGetEditorMode(),
+		};
+	}, [] );
+
+	const shouldRevertInitialMode = useRef( null );
+	useEffect( () => {
+		// ignore changes to zoom-out mode as we explictily change to it on mount.
+		if ( mode !== 'zoom-out' ) {
+			shouldRevertInitialMode.current = false;
+		}
+	}, [ mode ] );
+
+	// Intentionality left without any dependency.
+	// This effect should only run the first time the component is rendered.
+	// The effect opens the zoom-out view if it is not open before when applying a style variation.
+	useEffect( () => {
+		if ( mode !== 'zoom-out' ) {
+			__unstableSetEditorMode( 'zoom-out' );
+			shouldRevertInitialMode.current = true;
+			return () => {
+				// if there were not mode changes revert to the initial mode when unmounting.
+				if ( shouldRevertInitialMode.current ) {
+					__unstableSetEditorMode( mode );
+				}
+			};
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
+}

packages/block-editor/src/index.js

@@ -13,6 +13,7 @@ export {
 	getGapCSSValue as __experimentalGetGapCSSValue,
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
+	useZoomOut,
 } from './hooks';
 export * from './components';
 export * from './elements';

packages/block-library/src/template-part/edit/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { serialize } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
@@ -94,6 +95,7 @@ export default function TemplatePartEdit( {
 	clientId,
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
 		[]
@@ -196,12 +198,17 @@ export default function TemplatePartEdit( {
 		mapTemplatePartToBlockPattern( templatePart )
 	);
 
-	const onTemplatePartSelect = ( templatePart ) => {
-		setAttributes( {
-			slug: templatePart.slug,
-			theme: templatePart.theme,
-			area: undefined,
-		} );
+	const onTemplatePartSelect = async ( templatePart ) => {
+		await editEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId,
+			{
+				blocks: templatePart.blocks,
+				content: serialize( templatePart.blocks ),
+			}
+		);
+
 		createSuccessNotice(
 			sprintf(
 				/* translators: %s: template part title. */
@@ -276,9 +283,7 @@ export default function TemplatePartEdit( {
 								<TemplatesList
 									availableTemplates={ partsAsPatterns }
 									onSelect={ ( pattern ) => {
-										onTemplatePartSelect(
-											pattern.templatePart
-										);
+										onTemplatePartSelect( pattern );
 									} }
 								/>
 								<TemplatesList

packages/block-library/src/template-part/edit/selection-modal.js

@@ -1,11 +1,13 @@
 /**
  * WordPress dependencies
  */
+import { serialize } from '@wordpress/blocks';
 import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
 import { useAsyncList } from '@wordpress/compose';
+import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
 	SearchControl,
@@ -52,13 +54,19 @@ export default function TemplatePartSelectionModal( {
 	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	const onTemplatePartSelect = async ( templatePart ) => {
+		await editEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId,
+			{
+				blocks: templatePart.blocks,
+				content: serialize( templatePart.blocks ),
+			}
+		);
 
-	const onTemplatePartSelect = ( templatePart ) => {
-		setAttributes( {
-			slug: templatePart.slug,
-			theme: templatePart.theme,
-			area: undefined,
-		} );
 		createSuccessNotice(
 			sprintf(
 				/* translators: %s: template part title. */
@@ -98,7 +106,7 @@ export default function TemplatePartSelectionModal( {
 						blockPatterns={ filteredTemplateParts }
 						shownPatterns={ shownTemplateParts }
 						onClickPattern={ ( pattern ) => {
-							onTemplatePartSelect( pattern.templatePart );
+							onTemplatePartSelect( pattern );
 						} }
 					/>
 				</div>

packages/edit-site/src/components/global-styles/screen-style-variations.js

@@ -3,9 +3,7 @@
  */
 import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useEffect, useRef } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useZoomOut } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -14,38 +12,9 @@ import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { mode } = useSelect( ( select ) => {
-		return {
-			mode: select( blockEditorStore ).__unstableGetEditorMode(),
-		};
-	}, [] );
-
-	const shouldRevertInitialMode = useRef( null );
-	useEffect( () => {
-		// ignore changes to zoom-out mode as we explictily change to it on mount.
-		if ( mode !== 'zoom-out' ) {
-			shouldRevertInitialMode.current = false;
-		}
-	}, [ mode ] );
-
-	// Intentionality left without any dependency.
-	// This effect should only run the first time the component is rendered.
-	// The effect opens the zoom-out view if it is not open before when applying a style variation.
-	useEffect( () => {
-		if ( mode !== 'zoom-out' ) {
-			__unstableSetEditorMode( 'zoom-out' );
-			shouldRevertInitialMode.current = true;
-			return () => {
-				// if there were not mode changes revert to the initial mode when unmounting.
-				if ( shouldRevertInitialMode.current ) {
-					__unstableSetEditorMode( mode );
-				}
-			};
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+	// Move to zoom out mode when this component is mounted
+	// and back to the previous mode when unmounted.
+	useZoomOut();
 
 	return (
 		<>