@wordpress/edit-site 5.28.3 → 5.29.0

package/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 === 0 ) {
+		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,25 @@ export default function TemplatePanel() {
 					<TemplateAreas />
 				</SidebarCard>
 			</PanelBody>
+			{ availablePatterns?.length > 0 && (
+				<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 />

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

package/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>

package/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -10,6 +10,7 @@ import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -115,13 +116,15 @@ export default function SidebarNavigationScreenGlobalStyles() {
 		},
 		[]
 	);
+	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
 		return Promise.all( [
+			setPreference( 'core', 'distractionFree', false ),
 			setCanvasMode( 'edit' ),
 			openGeneralSidebar( 'edit-site/global-styles' ),
 		] );
-	}, [ setCanvasMode, openGeneralSidebar ] );
+	}, [ setCanvasMode, openGeneralSidebar, setPreference ] );
 
 	const openStyleBook = useCallback( async () => {
 		await openGlobalStyles();

package/src/components/style-book/index.js

@@ -425,7 +425,11 @@ const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			focusMode: false, // Disable "Spotlight mode".
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 

package/src/hooks/commands/use-edit-mode-commands.js

@@ -13,17 +13,13 @@ import {
 	drawerLeft,
 	drawerRight,
 	blockDefault,
-	code,
 	keyboard,
-	listView,
 	symbol,
 } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
-import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '@wordpress/editor';
 
 /**
@@ -103,37 +99,6 @@ function usePageContentFocusCommands() {
 	return { isLoading: false, commands };
 }
 
-function useEditorModeCommands() {
-	const { switchEditorMode } = useDispatch( editSiteStore );
-	const { canvasMode, editorMode } = useSelect(
-		( select ) => ( {
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			editorMode: select( editSiteStore ).getEditorMode(),
-		} ),
-		[]
-	);
-
-	if ( canvasMode !== 'edit' || editorMode !== 'text' ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const commands = [];
-
-	if ( editorMode === 'text' ) {
-		commands.push( {
-			name: 'core/exit-code-editor',
-			label: __( 'Exit code editor' ),
-			icon: code,
-			callback: ( { close } ) => {
-				switchEditorMode( 'visual' );
-				close();
-			},
-		} );
-	}
-
-	return { isLoading: false, commands };
-}
-
 function useManipulateDocumentCommands() {
 	const { isLoaded, record: template } = useEditedEntityRecord();
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
@@ -214,42 +179,17 @@ function useManipulateDocumentCommands() {
 }
 
 function useEditUICommands() {
-	const {
-		openGeneralSidebar,
-		closeGeneralSidebar,
-		toggleDistractionFree,
-		setIsListViewOpened,
-		switchEditorMode,
-	} = useDispatch( editSiteStore );
-	const {
-		canvasMode,
-		editorMode,
-		activeSidebar,
-		showBlockBreadcrumbs,
-		isListViewOpen,
-		isDistractionFree,
-		isTopToolbar,
-		isFocusMode,
-	} = useSelect( ( select ) => {
-		const { get } = select( preferencesStore );
-		const { getEditorMode } = select( editSiteStore );
-		const { isListViewOpened } = select( editorStore );
+	const { openGeneralSidebar, closeGeneralSidebar } =
+		useDispatch( editSiteStore );
+	const { canvasMode, activeSidebar } = useSelect( ( select ) => {
 		return {
 			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			editorMode: getEditorMode(),
 			activeSidebar: select( interfaceStore ).getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
-			isListViewOpen: isListViewOpened(),
-			isDistractionFree: get( 'core', 'distractionFree' ),
-			isFocusMode: get( 'core', 'focusMode' ),
-			isTopToolbar: get( 'core', 'fixedToolbar' ),
 		};
 	}, [] );
 	const { openModal } = useDispatch( interfaceStore );
-	const { toggle } = useDispatch( preferencesStore );
-	const { createInfoNotice } = useDispatch( noticesStore );
 
 	if ( canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -285,82 +225,6 @@ function useEditUICommands() {
 		},
 	} );
 
-	commands.push( {
-		name: 'core/toggle-spotlight-mode',
-		label: __( 'Toggle spotlight' ),
-		callback: ( { close } ) => {
-			toggle( 'core', 'focusMode' );
-			close();
-			createInfoNotice(
-				isFocusMode ? __( 'Spotlight off.' ) : __( 'Spotlight on.' ),
-				{
-					id: 'core/edit-site/toggle-spotlight-mode/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core', 'focusMode' );
-							},
-						},
-					],
-				}
-			);
-		},
-	} );
-
-	commands.push( {
-		name: 'core/toggle-distraction-free',
-		label: isDistractionFree
-			? __( 'Exit Distraction Free' )
-			: __( 'Enter Distraction Free ' ),
-		callback: ( { close } ) => {
-			toggleDistractionFree();
-			close();
-		},
-	} );
-
-	commands.push( {
-		name: 'core/toggle-top-toolbar',
-		label: __( 'Toggle top toolbar' ),
-		callback: ( { close } ) => {
-			toggle( 'core', 'fixedToolbar' );
-			if ( isDistractionFree ) {
-				toggleDistractionFree();
-			}
-			close();
-			createInfoNotice(
-				isTopToolbar
-					? __( 'Top toolbar off.' )
-					: __( 'Top toolbar on.' ),
-				{
-					id: 'core/edit-site/toggle-top-toolbar/notice',
-					type: 'snackbar',
-					actions: [
-						{
-							label: __( 'Undo' ),
-							onClick: () => {
-								toggle( 'core', 'fixedToolbar' );
-							},
-						},
-					],
-				}
-			);
-		},
-	} );
-
-	if ( editorMode === 'visual' ) {
-		commands.push( {
-			name: 'core/toggle-code-editor',
-			label: __( 'Open code editor' ),
-			icon: code,
-			callback: ( { close } ) => {
-				switchEditorMode( 'text' );
-				close();
-			},
-		} );
-	}
-
 	commands.push( {
 		name: 'core/open-preferences',
 		label: __( 'Editor preferences' ),
@@ -378,45 +242,6 @@ function useEditUICommands() {
 		},
 	} );
 
-	commands.push( {
-		name: 'core/toggle-breadcrumbs',
-		label: showBlockBreadcrumbs
-			? __( 'Hide block breadcrumbs' )
-			: __( 'Show block breadcrumbs' ),
-		callback: ( { close } ) => {
-			toggle( 'core', 'showBlockBreadcrumbs' );
-			close();
-			createInfoNotice(
-				showBlockBreadcrumbs
-					? __( 'Breadcrumbs hidden.' )
-					: __( 'Breadcrumbs visible.' ),
-				{
-					id: 'core/edit-site/toggle-breadcrumbs/notice',
-					type: 'snackbar',
-				}
-			);
-		},
-	} );
-
-	commands.push( {
-		name: 'core/toggle-list-view',
-		label: isListViewOpen
-			? __( 'Close List View' )
-			: __( 'Open List View' ),
-		icon: listView,
-		callback: ( { close } ) => {
-			setIsListViewOpened( ! isListViewOpen );
-			close();
-			createInfoNotice(
-				isListViewOpen ? __( 'List View off.' ) : __( 'List View on.' ),
-				{
-					id: 'core/edit-site/toggle-list-view/notice',
-					type: 'snackbar',
-				}
-			);
-		},
-	} );
-
 	return {
 		isLoading: false,
 		commands,
@@ -458,12 +283,6 @@ function usePatternCommands() {
 }
 
 export function useEditModeCommands() {
-	useCommandLoader( {
-		name: 'core/exit-code-editor',
-		hook: useEditorModeCommands,
-		context: 'site-editor-edit',
-	} );
-
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,

package/src/hooks/index.js

@@ -4,4 +4,3 @@
 import './components';
 import './push-changes-to-global-styles';
 import './template-part-edit';
-import './navigation-menu-edit';

package/src/hooks/push-changes-to-global-styles/index.js

@@ -26,6 +26,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
+import cloneDeep from '../../utils/clone-deep';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
 	blockEditorPrivateApis
@@ -275,10 +276,6 @@ function setNestedValue( object, path, value ) {
 	return object;
 }
 
-function cloneDeep( object ) {
-	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
-}
-
 function PushChangesToGlobalStylesControl( {
 	name,
 	attributes,