@wordpress/edit-site 5.28.5 → 5.30.0

package/src/components/save-button/index.js

@@ -22,6 +22,7 @@ export default function SaveButton( {
 	showTooltip = true,
 	defaultLabel,
 	icon,
+	size,
 	__next40pxDefaultSize = false,
 } ) {
 	const { isDirty, isSaving, isSaveViewOpen, previewingThemeName } =
@@ -119,7 +120,7 @@ export default function SaveButton( {
 			showTooltip={ showTooltip }
 			icon={ icon }
 			__next40pxDefaultSize={ __next40pxDefaultSize }
-			size="compact"
+			size={ size }
 		>
 			{ label }
 		</Button>

package/src/components/save-hub/style.scss

@@ -3,7 +3,7 @@
 	border-top: 1px solid $gray-800;
 	flex-shrink: 0;
 	margin: 0;
-	padding: $grid-unit-20 + $grid-unit-05 $canvas-padding;
+	padding: $grid-unit-20 $canvas-padding;
 }
 
 .edit-site-save-hub__button {

package/src/components/save-panel/index.js

@@ -85,18 +85,37 @@ const _EntitiesSavedStates = ( { onClose } ) => {
 };
 
 export default function SavePanel() {
-	const { isSaveViewOpen, canvasMode } = useSelect( ( select ) => {
-		const { isSaveViewOpened, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
+	const { isSaveViewOpen, canvasMode, isDirty, isSaving } = useSelect(
+		( select ) => {
+			const {
+				__experimentalGetDirtyEntityRecords,
+				isSavingEntityRecord,
+				isResolving,
+			} = select( coreStore );
+			const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
+			const isActivatingTheme = isResolving( 'activateTheme' );
+			const { isSaveViewOpened, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
 
-		// The currently selected entity to display.
-		// Typically template or template part in the site editor.
-		return {
-			isSaveViewOpen: isSaveViewOpened(),
-			canvasMode: getCanvasMode(),
-		};
-	}, [] );
+			// The currently selected entity to display.
+			// Typically template or template part in the site editor.
+			return {
+				isSaveViewOpen: isSaveViewOpened(),
+				canvasMode: getCanvasMode(),
+				isDirty: dirtyEntityRecords.length > 0,
+				isSaving:
+					dirtyEntityRecords.some( ( record ) =>
+						isSavingEntityRecord(
+							record.kind,
+							record.name,
+							record.key
+						)
+					) || isActivatingTheme,
+			};
+		},
+		[]
+	);
 	const { setIsSaveViewOpened } = useDispatch( editSiteStore );
 	const onClose = () => setIsSaveViewOpened( false );
 
@@ -114,7 +133,8 @@ export default function SavePanel() {
 			</Modal>
 		) : null;
 	}
-
+	const activateSaveEnabled = isPreviewingTheme() || isDirty;
+	const disabled = isSaving || ! activateSaveEnabled;
 	return (
 		<NavigableRegion
 			className={ classnames( 'edit-site-layout__actions', {
@@ -131,6 +151,8 @@ export default function SavePanel() {
 						className="edit-site-editor__toggle-save-panel-button"
 						onClick={ () => setIsSaveViewOpened( true ) }
 						aria-expanded={ false }
+						disabled={ disabled }
+						__experimentalIsFocusable
 					>
 						{ __( 'Open save panel' ) }
 					</Button>

package/src/components/sidebar/index.js

@@ -12,8 +12,8 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 } from '@wordpress/components';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { __ } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies

package/src/components/sidebar-button/style.scss

@@ -10,7 +10,7 @@
 	&:focus-visible:not(:disabled) {
 		box-shadow:
 			0 0 0 var(--wp-admin-border-width-focus)
-			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+			var(--wp-admin-theme-color);
 		outline: 3px solid transparent;
 	}
 

package/src/components/sidebar-edit-mode/global-styles-sidebar.js

@@ -41,7 +41,7 @@ export default function GlobalStylesSidebar() {
 		);
 		const canvasContainerView = getEditorCanvasContainerView();
 		const _isVisualEditorMode =
-			'visual' === select( editSiteStore ).getEditorMode();
+			'visual' === select( editorStore ).getEditorMode();
 		const _isEditCanvasMode = 'edit' === getCanvasMode();
 		const _showListViewByDefault = select( preferencesStore ).get(
 			'core',
@@ -132,13 +132,11 @@ export default function GlobalStylesSidebar() {
 			closeLabel={ __( 'Close Styles' ) }
 			panelClassName="edit-site-global-styles-sidebar__panel"
 			header={
-				<Flex
-					className="edit-site-global-styles-sidebar__header"
-					role="menubar"
-					aria-label={ __( 'Styles actions' ) }
-				>
+				<Flex className="edit-site-global-styles-sidebar__header">
 					<FlexBlock style={ { minWidth: 'min-content' } }>
-						<strong>{ __( 'Styles' ) }</strong>
+						<h2 className="edit-site-global-styles-sidebar__header-title">
+							{ __( 'Styles' ) }
+						</h2>
 					</FlexBlock>
 					<FlexItem>
 						<Button

package/src/components/sidebar-edit-mode/page-panels/page-status.js

@@ -203,7 +203,7 @@ export default function PageStatus( {
 											size="11"
 											lineHeight={ 1.4 }
 											weight={ 500 }
-											upperCase={ true }
+											upperCase
 										>
 											{ __( 'Password' ) }
 										</Text>

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

@@ -34,6 +34,10 @@
 	}
 }
 
+.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__header-title {
+	margin: 0;
+}
+
 .edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon {
 	margin-left: 0;
 }

package/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,35 @@ 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 ) => {
+		return (
+			filterOutDuplicatesByName( pattern, index, items ) &&
+			filterOutExcludedPatternSources( pattern ) &&
+			filterCompatiblePatterns( pattern )
+		);
+	} );
+}
 
-	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
-				)
-			),
-		} ) );
+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 +104,9 @@ export function useAvailablePatterns( template ) {
 			...( blockPatterns || [] ),
 			...( restBlockPatterns || [] ),
 		];
+		const filteredPatterns = filterPatterns( mergedPatterns, template );
 		return preparePatterns(
-			mergedPatterns,
+			filteredPatterns,
 			template,
 			currentThemeStylesheet
 		);

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
+		/>
+	);
+}
+
 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/sidebar-navigation-screen-main/index.js

@@ -20,7 +20,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import TemplatePartHint from './template-part-hint';
 
 export default function SidebarNavigationScreenMain() {
 	const { location } = useNavigator();
@@ -84,7 +83,6 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Patterns' ) }
 						</NavigatorButton>
 					</ItemGroup>
-					<TemplatePartHint />
 				</>
 			}
 		/>

package/src/components/sidebar-navigation-screen-navigation-menu/delete-modal.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 export default function RenameModal( { onClose, onConfirm } ) {
 	return (
 		<ConfirmDialog
-			isOpen={ true }
+			isOpen
 			onConfirm={ ( e ) => {
 				e.preventDefault();
 				onConfirm();

package/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js

@@ -10,7 +10,6 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav
 import ScreenNavigationMoreMenu from './more-menu';
 import NavigationMenuEditor from './navigation-menu-editor';
 import buildNavigationLabel from '../sidebar-navigation-screen-navigation-menus/build-navigation-label';
-import EditButton from './edit-button';
 
 export default function SingleNavigationMenu( {
 	navigationMenu,
@@ -30,7 +29,6 @@ export default function SingleNavigationMenu( {
 						onSave={ handleSave }
 						onDuplicate={ handleDuplicate }
 					/>
-					<EditButton postId={ navigationMenu?.id } />
 				</>
 			}
 			title={ buildNavigationLabel(

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

@@ -22,7 +22,7 @@ export default function TemplatePartNavigationMenu( { id } ) {
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
 				size="11"
-				upperCase={ true }
+				upperCase
 				weight={ 500 }
 			>
 				{ title || __( 'Navigation' ) }

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

@@ -23,7 +23,7 @@ export default function TemplatePartNavigationMenus( { menus } ) {
 			<Heading
 				className="edit-site-sidebar-navigation-screen-template-part-navigation-menu__title"
 				size="11"
-				upperCase={ true }
+				upperCase
 				weight={ 500 }
 			>
 				{ __( 'Navigation' ) }

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

@@ -14,7 +14,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import useNavigationMenuContent from './use-navigation-menu-content';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

package/src/components/sidebar-navigation-screen-template/index.js

@@ -18,7 +18,7 @@ import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

package/src/components/sidebar-navigation-screen-templates-browse/content.js

@@ -9,7 +9,7 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
  * Internal dependencies
  */
 import DataViewItem from '../sidebar-dataviews/dataview-item';
-import { useAddedBy } from '../list/added-by';
+import { useAddedBy } from '../page-templates-template-parts/hooks';
 import { layout } from '@wordpress/icons';
 
 const EMPTY_ARRAY = [];

package/src/components/start-template-options/index.js

@@ -137,7 +137,7 @@ function StartModal( { slug, isCustom, onClose, postType } ) {
 			closeLabel={ __( 'Cancel' ) }
 			focusOnMount="firstElement"
 			onRequestClose={ onClose }
-			isFullScreen={ true }
+			isFullScreen
 		>
 			<div className="edit-site-start-template-options__modal-content">
 				<PatternSelection