@wordpress/edit-site 5.35.0 → 6.0.0

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

@@ -23,18 +23,55 @@
 	}
 }
 
-.edit-site-site-hub__title {
+.edit-site-site-hub__title .components-button {
+	color: $gray-200;
+	display: block;
+	flex-grow: 1;
+	font-size: 15px;
+	font-weight: 500;
+	overflow: hidden;
+	// Add space for the ↗ to render.
+	padding-right: $grid-unit-20;
+	position: relative;
+	text-decoration: none;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	overflow: hidden;
-	flex-grow: 1;
-	color: $gray-200;
-}
 
-.edit-site-site-hub__site-view-link {
-	margin-right: var(--wp-admin-border-width-focus);
-	svg {
-		fill: $gray-200;
+	&:hover,
+	&:focus,
+	&:active {
+		color: $gray-200;
+	}
+
+	&:focus {
+		// Defer to :focus-visible below.
+		box-shadow: none;
+		outline: none;
+	}
+
+	&:focus-visible {
+		// Push the shadow away from the title.
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $gray-900, 0 0 0 calc(2 * var(--wp-admin-border-width-focus)) var(--wp-admin-theme-color);
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent;
+		outline-offset: 2px;
+	}
+
+	&::after {
+		content: "\2197";
+		font-weight: 400;
+		opacity: 0;
+		position: absolute;
+		right: 0;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+
+	&:hover::after,
+	&:focus::after,
+	&:active::after {
+		opacity: 1;
 	}
 }
 

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

@@ -190,7 +190,7 @@ function StyleBook( {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ textColor ] = useGlobalStyle( 'color.text' );
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
-	const examples = useMemo( getExamples, [] );
+	const [ examples ] = useState( getExamples );
 	const tabs = useMemo(
 		() =>
 			getCategories()

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -27,7 +27,9 @@ const postTypesWithoutParentTemplate = [
 	PATTERN_TYPES.user,
 ];
 
-function useResolveEditedEntityAndContext( { path, postId, postType } ) {
+const authorizedPostTypes = [ 'page' ];
+
+function useResolveEditedEntityAndContext( { postId, postType } ) {
 	const {
 		hasLoadedAllDependencies,
 		homepageId,
@@ -81,7 +83,10 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 		( select ) => {
 			// If we're rendering a post type that doesn't have a template
 			// no need to resolve its template.
-			if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+			if (
+				postTypesWithoutParentTemplate.includes( postType ) &&
+				postId
+			) {
 				return undefined;
 			}
 
@@ -168,16 +173,16 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 				return undefined;
 			}
 
-			// If we're rendering a specific page, post... we need to resolve its template.
-			if ( postType && postId ) {
+			// If we're rendering a specific page, we need to resolve its template.
+			// The site editor only supports pages for now, not other CPTs.
+			if (
+				postType &&
+				postId &&
+				authorizedPostTypes.includes( postType )
+			) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
 			}
 
-			// Some URLs in list views are different
-			if ( path === '/page' && postId ) {
-				return resolveTemplateForPostTypeAndId( 'page', postId );
-			}
-
 			// If we're rendering the home page, and we have a static home page, resolve its template.
 			if ( homepageId ) {
 				return resolveTemplateForPostTypeAndId( 'page', homepageId );
@@ -196,37 +201,27 @@ function useResolveEditedEntityAndContext( { path, postId, postType } ) {
 			url,
 			postId,
 			postType,
-			path,
 			frontPageTemplateId,
 		]
 	);
 
 	const context = useMemo( () => {
-		if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+		if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 			return {};
 		}
 
-		if ( postType && postId ) {
+		if ( postType && postId && authorizedPostTypes.includes( postType ) ) {
 			return { postType, postId };
 		}
 
-		// Some URLs in list views are different
-		if ( path === '/page' && postId ) {
-			return { postType: 'page', postId };
-		}
-
 		if ( homepageId ) {
 			return { postType: 'page', postId: homepageId };
 		}
 
 		return {};
-	}, [ homepageId, postType, postId, path ] );
-
-	if ( path === '/wp_template' && postId ) {
-		return { isReady: true, postType: 'wp_template', postId, context };
-	}
+	}, [ homepageId, postType, postId ] );
 
-	if ( postTypesWithoutParentTemplate.includes( postType ) ) {
+	if ( postTypesWithoutParentTemplate.includes( postType ) && postId ) {
 		return { isReady: true, postType, postId, context };
 	}
 

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

@@ -160,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,18 +3,15 @@
 @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/global-styles-sidebar/style.scss";
-@import "./components/header-edit-mode/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/editor/style.scss";
-@import "./components/create-template-part-modal/style.scss";
 @import "./components/welcome-guide/style.scss";
 @import "./components/layout/style.scss";
 @import "./components/save-hub/style.scss";
@@ -25,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";