@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/template-part-converter/convert-to-template-part.js

@@ -9,13 +9,16 @@ import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { symbolFilled } from '@wordpress/icons';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import CreateTemplatePartModal from '../create-template-part-modal';
+import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
+const { CreateTemplatePartModal } = unlock( editorPrivateApis );
+
 export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const { replaceBlocks } = useDispatch( blockEditorStore );

package/src/components/template-part-converter/index.js

@@ -27,12 +27,25 @@ export default function TemplatePartConverter() {
 }
 
 function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+	const { isContentOnly, blocks } = useSelect(
+		( select ) => {
+			const { getBlocksByClientId, getBlockEditingMode } =
+				select( blockEditorStore );
+			return {
+				blocks: getBlocksByClientId( clientIds ),
+				isContentOnly:
+					clientIds.length === 1 &&
+					getBlockEditingMode( clientIds[ 0 ] ) === 'contentOnly',
+			};
+		},
 		[ clientIds ]
 	);
 
+	// Do not show the convert button if the block is in content-only mode.
+	if ( isContentOnly ) {
+		return null;
+	}
+
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
 		return (

package/src/hooks/commands/use-common-commands.js

@@ -18,14 +18,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
-import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
-import getIsListPage from '../../utils/get-is-list-page';
 
 const { useGlobalStylesReset } = unlock( blockEditorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -35,8 +33,6 @@ function useGlobalStylesOpenStylesCommands() {
 		useDispatch( editSiteStore )
 	);
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const history = useHistory();
 
@@ -55,13 +51,13 @@ function useGlobalStylesOpenStylesCommands() {
 				label: __( 'Open styles' ),
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -73,9 +69,9 @@ function useGlobalStylesOpenStylesCommands() {
 		history,
 		openGeneralSidebar,
 		setCanvasMode,
-		isEditorPage,
 		getCanvasMode,
 		isBlockBasedTheme,
+		params.postId,
 	] );
 
 	return {
@@ -89,8 +85,6 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 		useDispatch( editSiteStore )
 	);
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { set } = useDispatch( preferencesStore );
 
@@ -110,13 +104,13 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 				label: __( 'Learn about styles' ),
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -134,10 +128,10 @@ function useGlobalStylesToggleWelcomeGuideCommands() {
 		history,
 		openGeneralSidebar,
 		setCanvasMode,
-		isEditorPage,
 		getCanvasMode,
 		isBlockBasedTheme,
 		set,
+		params.postId,
 	] );
 
 	return {
@@ -176,9 +170,6 @@ function useGlobalStylesOpenCssCommands() {
 	const { openGeneralSidebar, setEditorCanvasContainerView, setCanvasMode } =
 		unlock( useDispatch( editSiteStore ) );
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isListPage = getIsListPage( params, isMobileViewport );
-	const isEditorPage = ! isListPage;
 	const history = useHistory();
 	const { canEditCSS } = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -207,13 +198,13 @@ function useGlobalStylesOpenCssCommands() {
 				icon: brush,
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -226,9 +217,9 @@ function useGlobalStylesOpenCssCommands() {
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
 		canEditCSS,
-		isEditorPage,
 		getCanvasMode,
 		setCanvasMode,
+		params.postId,
 	] );
 	return {
 		isLoading: false,
@@ -241,8 +232,6 @@ function useGlobalStylesOpenRevisionsCommands() {
 		unlock( useDispatch( editSiteStore ) );
 	const { getCanvasMode } = unlock( useSelect( editSiteStore ) );
 	const { params } = useLocation();
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const isEditorPage = ! getIsListPage( params, isMobileViewport );
 	const history = useHistory();
 	const hasRevisions = useSelect( ( select ) => {
 		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
@@ -266,13 +255,13 @@ function useGlobalStylesOpenRevisionsCommands() {
 				icon: backup,
 				callback: ( { close } ) => {
 					close();
-					if ( ! isEditorPage ) {
+					if ( ! params.postId ) {
 						history.push( {
 							path: '/wp_global_styles',
 							canvas: 'edit',
 						} );
 					}
-					if ( isEditorPage && getCanvasMode() !== 'edit' ) {
+					if ( params.postId && getCanvasMode() !== 'edit' ) {
 						setCanvasMode( 'edit' );
 					}
 					openGeneralSidebar( 'edit-site/global-styles' );
@@ -285,9 +274,9 @@ function useGlobalStylesOpenRevisionsCommands() {
 		history,
 		openGeneralSidebar,
 		setEditorCanvasContainerView,
-		isEditorPage,
 		getCanvasMode,
 		setCanvasMode,
+		params.postId,
 	] );
 
 	return {

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

@@ -3,25 +3,11 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __, sprintf, isRTL } from '@wordpress/i18n';
-import {
-	edit,
-	trash,
-	rotateLeft,
-	rotateRight,
-	layout,
-	page,
-	drawerLeft,
-	drawerRight,
-	blockDefault,
-	symbol,
-} from '@wordpress/icons';
+import { trash, rotateLeft, rotateRight, layout, page } from '@wordpress/icons';
 import { useCommandLoader } from '@wordpress/commands';
 import { decodeEntities } from '@wordpress/html-entities';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import {
-	store as editorStore,
-	privateApis as editorPrivateApis,
-} from '@wordpress/editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -30,12 +16,10 @@ import { store as editSiteStore } from '../../store';
 import useEditedEntityRecord from '../../components/use-edited-entity-record';
 import isTemplateRemovable from '../../utils/is-template-removable';
 import isTemplateRevertable from '../../utils/is-template-revertable';
-import { PATTERN_MODALS } from '../../components/pattern-modal';
 import { unlock } from '../../lock-unlock';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 import { useLink } from '../../components/routes/link';
 
-const { interfaceStore } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
@@ -153,8 +137,6 @@ function useManipulateDocumentCommands() {
 						__( 'Delete template part: %s' ),
 						decodeEntities( template.title )
 				  );
-		const path =
-			template.type === TEMPLATE_POST_TYPE ? '/wp_template' : '/patterns';
 		commands.push( {
 			name: 'core/remove-template',
 			label,
@@ -163,7 +145,7 @@ function useManipulateDocumentCommands() {
 				removeTemplate( template );
 				// Navigate to the template list
 				history.push( {
-					path,
+					postType: template.type,
 				} );
 				close();
 			},
@@ -176,111 +158,15 @@ function useManipulateDocumentCommands() {
 	};
 }
 
-function useEditUICommands() {
-	const { openGeneralSidebar, closeGeneralSidebar } =
-		useDispatch( editSiteStore );
-	const { canvasMode, activeSidebar } = useSelect( ( select ) => {
-		return {
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			activeSidebar:
-				select( interfaceStore ).getActiveComplementaryArea( 'core' ),
-		};
-	}, [] );
-
-	if ( canvasMode !== 'edit' ) {
-		return { isLoading: false, commands: [] };
-	}
-
-	const commands = [];
-
-	commands.push( {
-		name: 'core/open-settings-sidebar',
-		label: __( 'Toggle settings sidebar' ),
-		icon: isRTL() ? drawerLeft : drawerRight,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-post/document' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-post/document' );
-			}
-		},
-	} );
-
-	commands.push( {
-		name: 'core/open-block-inspector',
-		label: __( 'Toggle block inspector' ),
-		icon: blockDefault,
-		callback: ( { close } ) => {
-			close();
-			if ( activeSidebar === 'edit-site/block' ) {
-				closeGeneralSidebar();
-			} else {
-				openGeneralSidebar( 'edit-site/block' );
-			}
-		},
-	} );
-
-	return {
-		isLoading: false,
-		commands,
-	};
-}
-
-function usePatternCommands() {
-	const { isLoaded, record: pattern } = useEditedEntityRecord();
-	const { openModal } = useDispatch( interfaceStore );
-
-	if ( ! isLoaded ) {
-		return { isLoading: true, commands: [] };
-	}
-
-	const commands = [];
-
-	if ( pattern?.type === 'wp_block' ) {
-		commands.push( {
-			name: 'core/rename-pattern',
-			label: __( 'Rename pattern' ),
-			icon: edit,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.rename );
-				close();
-			},
-		} );
-		commands.push( {
-			name: 'core/duplicate-pattern',
-			label: __( 'Duplicate pattern' ),
-			icon: symbol,
-			callback: ( { close } ) => {
-				openModal( PATTERN_MODALS.duplicate );
-				close();
-			},
-		} );
-	}
-
-	return { isLoading: false, commands };
-}
-
 export function useEditModeCommands() {
 	useCommandLoader( {
 		name: 'core/edit-site/page-content-focus',
 		hook: usePageContentFocusCommands,
-		context: 'site-editor-edit',
+		context: 'entity-edit',
 	} );
 
 	useCommandLoader( {
 		name: 'core/edit-site/manipulate-document',
 		hook: useManipulateDocumentCommands,
 	} );
-
-	useCommandLoader( {
-		name: 'core/edit-site/patterns',
-		hook: usePatternCommands,
-		context: 'site-editor-edit',
-	} );
-
-	useCommandLoader( {
-		name: 'core/edit-site/edit-ui',
-		hook: useEditUICommands,
-	} );
 }

package/src/hooks/index.js

@@ -1,5 +1,4 @@
 /**
  * Internal dependencies
  */
-import './components';
 import './push-changes-to-global-styles';

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

@@ -337,7 +337,8 @@ function PushChangesToGlobalStylesControl( {
 				{ __( 'Styles' ) }
 			</BaseControl.VisualLabel>
 			<Button
-				variant="primary"
+				__next40pxDefaultSize
+				variant="secondary"
 				disabled={ changes.length === 0 }
 				onClick={ pushChanges }
 			>

package/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js

@@ -5,16 +5,17 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../../components/global-styles/global-styles-provider';
 import cloneDeep from '../../utils/clone-deep';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 /**
  * Removes all instances of a property from an object.
@@ -159,8 +160,12 @@ export default function useThemeStyleVariationsByProperty( {
 					cloneDeep( variation ),
 					property
 				);
+
 				// Remove variations that are empty once the property is filtered out.
-				if ( Object.keys( variationFilteredByProperty ).length === 0 ) {
+				if (
+					variation.title !== __( 'Default' ) &&
+					Object.keys( variationFilteredByProperty ).length === 0
+				) {
 					return accumulator;
 				}
 

package/src/index.js

@@ -42,7 +42,7 @@ export function initializeEditor( id, settings ) {
 	dispatch( blocksStore ).setFreeformFallbackBlockName( 'core/html' );
 	registerLegacyWidgetBlock( { inserter: false } );
 	registerWidgetGroupBlock( { inserter: false } );
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	if ( globalThis.IS_GUTENBERG_PLUGIN ) {
 		__experimentalRegisterExperimentalCoreBlocks( {
 			enableFSEBlocks: true,
 		} );

package/src/store/private-actions.js

@@ -16,16 +16,24 @@ export const setCanvasMode =
 		const isMediumOrBigger =
 			window.matchMedia( '(min-width: 782px)' ).matches;
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
+		const isPublishSidebarOpened = registry
+			.select( editorStore )
+			.isPublishSidebarOpened();
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
 			mode,
 		} );
+		const isEditMode = mode === 'edit';
+		if ( isPublishSidebarOpened && ! isEditMode ) {
+			registry.dispatch( editorStore ).closePublishSidebar();
+		}
+
 		// Check if the block list view should be open by default.
 		// If `distractionFree` mode is enabled, the block list view should not be open.
 		// This behavior is disabled for small viewports.
 		if (
 			isMediumOrBigger &&
-			mode === 'edit' &&
+			isEditMode &&
 			registry
 				.select( preferencesStore )
 				.get( 'core', 'showListViewByDefault' ) &&

package/src/store/selectors.js

@@ -126,7 +126,7 @@ export function getHomeTemplateId() {
  *
  * @param {Object} state Global application state.
  *
- * @return {TemplateType?} Template type.
+ * @return {?TemplateType} Template type.
  */
 export function getEditedPostType( state ) {
 	return state.editedPost.postType;
@@ -137,7 +137,7 @@ export function getEditedPostType( state ) {
  *
  * @param {Object} state Global application state.
  *
- * @return {string?} Post ID.
+ * @return {?string} Post ID.
  */
 export function getEditedPostId( state ) {
 	return state.editedPost.id;

package/src/style.scss

@@ -3,22 +3,16 @@
 @import "./components/add-new-template/style.scss";
 @import "./components/block-editor/style.scss";
 @import "./components/canvas-loader/style.scss";
-@import "./components/code-editor/style.scss";
 @import "./components/global-styles/style.scss";
 @import "./components/global-styles/screen-revisions/style.scss";
-@import "./components/header-edit-mode/style.scss";
+@import "./components/global-styles-sidebar/style.scss";
 @import "./components/page/style.scss";
 @import "./components/page-pages/style.scss";
 @import "./components/page-patterns/style.scss";
 @import "./components/page-templates/style.scss";
 @import "./components/table/style.scss";
-@import "./components/sidebar-edit-mode/style.scss";
-@import "./components/sidebar-edit-mode/settings-header/style.scss";
-@import "./components/sidebar-edit-mode/template-panel/style.scss";
 @import "./components/editor/style.scss";
-@import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
-@import "./components/start-template-options/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
 @import "./components/save-panel/style.scss";
@@ -28,11 +22,8 @@
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-details-footer/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menu/style.scss";
-@import "./components/sidebar-navigation-screen-page/style.scss";
 @import "components/sidebar-navigation-screen-details-panel/style.scss";
-@import "./components/sidebar-navigation-screen-pattern/style.scss";
 @import "./components/sidebar-navigation-screen-patterns/style.scss";
-@import "./components/sidebar-navigation-screen-template/style.scss";
 @import "./components/sidebar-dataviews/style.scss";
 @import "./components/site-hub/style.scss";
 @import "./components/sidebar-navigation-screen-navigation-menus/style.scss";
@@ -85,13 +76,6 @@ body.js.site-editor-php {
 	.interface-interface-skeleton {
 		top: 0;
 	}
-
-	// Todo: Remove this rule when edit site gets support
-	// for opening unpinned sidebar items.
-	.interface-complementary-area__pin-unpin-item.components-button {
-		display: none;
-	}
-
 }
 
 /**

package/src/utils/template-part-create.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { paramCase as kebabCase } from 'change-case';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { TEMPLATE_PART_POST_TYPE } from './constants';
-
-export const useExistingTemplateParts = () => {
-	return useSelect(
-		( select ) =>
-			select( coreStore ).getEntityRecords(
-				'postType',
-				TEMPLATE_PART_POST_TYPE,
-				{
-					per_page: -1,
-				}
-			),
-		[]
-	);
-};
-
-/**
- * Return a unique template part title based on
- * the given title and existing template parts.
- *
- * @param {string} title         The original template part title.
- * @param {Object} templateParts The array of template part entities.
- * @return {string} A unique template part title.
- */
-export const getUniqueTemplatePartTitle = ( title, templateParts ) => {
-	const lowercaseTitle = title.toLowerCase();
-	const existingTitles = templateParts.map( ( templatePart ) =>
-		templatePart.title.rendered.toLowerCase()
-	);
-
-	if ( ! existingTitles.includes( lowercaseTitle ) ) {
-		return title;
-	}
-
-	let suffix = 2;
-	while ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {
-		suffix++;
-	}
-
-	return `${ title } ${ suffix }`;
-};
-
-/**
- * Get a valid slug for a template part.
- * Currently template parts only allow latin chars.
- * The fallback slug will receive suffix by default.
- *
- * @param {string} title The template part title.
- * @return {string} A valid template part slug.
- */
-export const getCleanTemplatePartSlug = ( title ) => {
-	return kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
-};

package/src/utils/use-activate-theme.js

@@ -14,7 +14,7 @@ import {
 	currentlyPreviewingTheme,
 } from './is-previewing-theme';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 /**
  * This should be refactored to use the REST API, once the REST API can activate themes.
@@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
  */
 export function useActivateTheme() {
 	const history = useHistory();
-	const location = useLocation();
 	const { startResolution, finishResolution } = useDispatch( coreStore );
 
 	return async () => {
@@ -36,9 +35,10 @@ export function useActivateTheme() {
 			startResolution( 'activateTheme' );
 			await window.fetch( activationURL );
 			finishResolution( 'activateTheme' );
-			const { wp_theme_preview: themePreview, ...params } =
-				location.params;
-			history.replace( params );
+			// Remove the wp_theme_preview query param: we've finished activating
+			// the queue and are switching to normal Site Editor.
+			const { params } = history.getLocationWithParams();
+			history.replace( { ...params, wp_theme_preview: undefined } );
 		}
 	};
 }