@wordpress/edit-site 6.0.4 → 6.2.0

package/src/components/layout/index.js

@@ -21,91 +21,60 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import {
-	CommandMenu,
-	privateApis as commandsPrivateApis,
-} from '@wordpress/commands';
-import { store as preferencesStore } from '@wordpress/preferences';
-import {
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
+import { CommandMenu } from '@wordpress/commands';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import {
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { privateApis as coreCommandsPrivateApis } from '@wordpress/core-commands';
 
 /**
  * Internal dependencies
  */
 import ErrorBoundary from '../error-boundary';
 import { store as editSiteStore } from '../../store';
-import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import SiteHub from '../site-hub';
 import ResizableFrame from '../resizable-frame';
-import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 import { unlock } from '../../lock-unlock';
 import SavePanel from '../save-panel';
 import KeyboardShortcutsRegister from '../keyboard-shortcuts/register';
 import KeyboardShortcutsGlobal from '../keyboard-shortcuts/global';
-import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import { useIsSiteEditorLoading } from './hooks';
-import useLayoutAreas from './router';
 import useMovingAnimation from './animation';
 import SidebarContent from '../sidebar';
 import SaveHub from '../save-hub';
+import useSyncCanvasModeWithURL from '../sync-state-with-url/use-sync-canvas-mode-with-url';
 
 const { useCommands } = unlock( coreCommandsPrivateApis );
-const { useCommandContext } = unlock( commandsPrivateApis );
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 const { NavigableRegion } = unlock( editorPrivateApis );
 
 const ANIMATION_DURATION = 0.3;
 
-export default function Layout() {
-	// This ensures the edited entity id and type are initialized properly.
-	useInitEditedEntityFromURL();
+export default function Layout( { route } ) {
 	useSyncCanvasModeWithURL();
 	useCommands();
-	useEditModeCommands();
-	useCommonCommands();
-
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const toggleRef = useRef();
-	const {
-		isDistractionFree,
-		hasFixedToolbar,
-		hasBlockSelected,
-		canvasMode,
-		previousShortcut,
-		nextShortcut,
-	} = useSelect( ( select ) => {
-		const { getAllShortcutKeyCombinations } = select(
-			keyboardShortcutsStore
-		);
-		const { getCanvasMode } = unlock( select( editSiteStore ) );
-		return {
-			canvasMode: getCanvasMode(),
-			previousShortcut: getAllShortcutKeyCombinations(
-				'core/editor/previous-region'
-			),
-			nextShortcut: getAllShortcutKeyCombinations(
-				'core/editor/next-region'
-			),
-			hasFixedToolbar: select( preferencesStore ).get(
-				'core',
-				'fixedToolbar'
-			),
-			isDistractionFree: select( preferencesStore ).get(
-				'core',
-				'distractionFree'
-			),
-			hasBlockSelected:
-				select( blockEditorStore ).getBlockSelectionStart(),
-		};
-	}, [] );
+	const { canvasMode, previousShortcut, nextShortcut } = useSelect(
+		( select ) => {
+			const { getAllShortcutKeyCombinations } = select(
+				keyboardShortcutsStore
+			);
+			const { getCanvasMode } = unlock( select( editSiteStore ) );
+			return {
+				canvasMode: getCanvasMode(),
+				previousShortcut: getAllShortcutKeyCombinations(
+					'core/editor/previous-region'
+				),
+				nextShortcut: getAllShortcutKeyCombinations(
+					'core/editor/next-region'
+				),
+			};
+		},
+		[]
+	);
 	const navigateRegionsProps = useNavigateRegions( {
 		previous: previousShortcut,
 		next: nextShortcut,
@@ -116,22 +85,11 @@ export default function Layout() {
 	const isEditorLoading = useIsSiteEditorLoading();
 	const [ isResizableFrameOversized, setIsResizableFrameOversized ] =
 		useState( false );
-	const { key: routeKey, areas, widths } = useLayoutAreas();
+	const { key: routeKey, areas, widths } = route;
 	const animationRef = useMovingAnimation( {
 		triggerAnimationOnChange: canvasMode + '__' + routeKey,
 	} );
 
-	// Sets the right context for the command palette
-	let commandContext = 'site-editor';
-
-	if ( canvasMode === 'edit' ) {
-		commandContext = 'entity-edit';
-	}
-	if ( hasBlockSelected ) {
-		commandContext = 'block-selection-edit';
-	}
-	useCommandContext( commandContext );
-
 	const [ backgroundColor ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
 	const previousCanvaMode = usePrevious( canvasMode );
@@ -163,11 +121,7 @@ export default function Layout() {
 					'edit-site-layout',
 					navigateRegionsProps.className,
 					{
-						'is-distraction-free':
-							isDistractionFree && canvasMode === 'edit',
 						'is-full-canvas': canvasMode === 'edit',
-						'has-fixed-toolbar': hasFixedToolbar,
-						'is-block-toolbar-visible': hasBlockSelected,
 					}
 				) }
 			>

package/src/components/page/header.js

@@ -22,6 +22,7 @@ export default function Header( { title, subTitle, actions } ) {
 					level={ 3 }
 					weight={ 500 }
 					className="edit-site-page-header__title"
+					truncate
 				>
 					{ title }
 				</Heading>

package/src/components/page/style.scss

@@ -24,6 +24,12 @@
 
 	.edit-site-page-header__page-title {
 		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
 	}
 
 	.edit-site-page-header__sub-title {

package/src/components/page-patterns/header.js

@@ -58,12 +58,18 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 1 }>
 			<HStack
 				justify="space-between"
 				className="edit-site-patterns__title"
 			>
-				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
+				<Heading
+					as="h2"
+					level={ 3 }
+					id={ titleId }
+					weight={ 500 }
+					truncate
+				>
 					{ title }
 				</Heading>
 				<HStack expanded={ false }>

package/src/components/page-patterns/rename-category-menu-item.js

@@ -57,6 +57,8 @@ function RenameModal( { category, onClose } ) {
 			existingCategories={ existingCategories }
 			onClose={ onClose }
 			overlayClassName="edit-site-list__rename-modal"
+			focusOnMount="firstContentElement"
+			size="small"
 		/>
 	);
 }

package/src/components/page-patterns/style.scss

@@ -98,6 +98,12 @@
 
 		.edit-site-patterns__title {
 			min-height: $grid-unit-50;
+
+			.components-heading {
+				flex-grow: 1;
+				flex-basis: 0;
+				white-space: nowrap;
+			}
 		}
 
 		.edit-site-patterns__sub-title {

package/src/components/posts-app/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	UnsavedChangesWarning,
+	privateApis as editorPrivateApis,
+} from '@wordpress/editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import Layout from '../layout';
+import Page from '../page';
+import { unlock } from '../../lock-unlock';
+
+const { RouterProvider } = unlock( routerPrivateApis );
+const { GlobalStylesProvider } = unlock( editorPrivateApis );
+
+const defaultRoute = {
+	key: 'index',
+	areas: {
+		sidebar: 'Empty Sidebar',
+		content: <Page>Welcome to Posts</Page>,
+		preview: undefined,
+		mobile: <Page>Welcome to Posts</Page>,
+	},
+};
+
+export default function PostsApp() {
+	return (
+		<GlobalStylesProvider>
+			<UnsavedChangesWarning />
+			<RouterProvider>
+				<Layout route={ defaultRoute } />
+			</RouterProvider>
+		</GlobalStylesProvider>
+	);
+}

package/src/components/sidebar/style.scss

@@ -3,7 +3,7 @@
 	overflow-y: auto;
 }
 
-@keyframes slide-from-right {
+@keyframes local--slide-from-right {
 	from {
 		transform: translateX(50px);
 		opacity: 0;
@@ -14,7 +14,7 @@
 	}
 }
 
-@keyframes slide-from-left {
+@keyframes local--slide-from-left {
 	from {
 		transform: translateX(-50px);
 		opacity: 0;
@@ -47,11 +47,11 @@
 	}
 
 	&.slide-from-left {
-		animation-name: slide-from-left;
+		animation-name: local--slide-from-left;
 	}
 
 	&.slide-from-right {
-		animation-name: slide-from-right;
+		animation-name: local--slide-from-right;
 	}
 
 }

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

@@ -22,7 +22,12 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 		titleHasChanged && notEmptyString( editedMenuTitle );
 
 	return (
-		<Modal title={ __( 'Rename' ) } onRequestClose={ onClose }>
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ onClose }
+			focusOnMount="firstContentElement"
+			size="small"
+		>
 			<form className="sidebar-navigation__rename-modal-form">
 				<VStack spacing="3">
 					<TextControl

package/src/hooks/commands/use-set-command-context.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { privateApis as commandsPrivateApis } from '@wordpress/commands';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { useHasEditorCanvasContainer } from '../../components/editor-canvas-container';
+
+const { useCommandContext } = unlock( commandsPrivateApis );
+
+/**
+ * React hook used to set the correct command context based on the current state.
+ */
+export default function useSetCommandContext() {
+	const { hasBlockSelected, canvasMode } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getBlockSelectionStart } = select( blockEditorStore );
+		return {
+			canvasMode: getCanvasMode(),
+			hasBlockSelected: getBlockSelectionStart(),
+		};
+	}, [] );
+
+	const hasEditorCanvasContainer = useHasEditorCanvasContainer();
+
+	// Sets the right context for the command palette
+	let commandContext = 'site-editor';
+	if ( canvasMode === 'edit' ) {
+		commandContext = 'entity-edit';
+	}
+	if ( hasBlockSelected ) {
+		commandContext = 'block-selection-edit';
+	}
+	if ( hasEditorCanvasContainer ) {
+		/*
+		 * The editor canvas overlay will likely be deprecated in the future, so for now we clear the command context
+		 * to remove the suggested commands that may not make sense with Style Book or Style Revisions open.
+		 * See https://github.com/WordPress/gutenberg/issues/62216.
+		 */
+		commandContext = '';
+	}
+	useCommandContext( commandContext );
+}

package/src/index.js

@@ -9,7 +9,7 @@ import {
 } from '@wordpress/block-library';
 import { dispatch } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
-import { createRoot } from '@wordpress/element';
+import { createRoot, StrictMode } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
@@ -85,7 +85,11 @@ export function initializeEditor( id, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	root.render( <App /> );
+	root.render(
+		<StrictMode>
+			<App />
+		</StrictMode>
+	);
 
 	return root;
 }
@@ -100,3 +104,7 @@ export function reinitializeEditor() {
 export { default as PluginTemplateSettingPanel } from './components/plugin-template-setting-panel';
 export { store } from './store';
 export * from './deprecated';
+
+// Temporary: While the posts dashboard is being iterated on
+// it's being built in the same package as the site editor.
+export { initializePostsDashboard } from './posts';

package/src/posts.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { createRoot, StrictMode } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import PostsApp from './components/posts-app';
+
+/**
+ * Initializes the "Posts Dashboard"
+ * @param {string} id DOM element id.
+ */
+export function initializePostsDashboard( id ) {
+	if ( ! globalThis.IS_GUTENBERG_PLUGIN ) {
+		return;
+	}
+	const target = document.getElementById( id );
+	const root = createRoot( target );
+
+	root.render(
+		<StrictMode>
+			<PostsApp />
+		</StrictMode>
+	);
+
+	return root;
+}

package/src/posts.scss

@@ -0,0 +1,46 @@
+@import "../../dataviews/src/style.scss";
+@import "./components/layout/style.scss";
+@import "./components/page/style.scss";
+@import "./components/save-hub/style.scss";
+@import "./components/save-panel/style.scss";
+@import "./components/sidebar/style.scss";
+@import "./components/site-hub/style.scss";
+@import "./components/site-icon/style.scss";
+@import "./components/editor-canvas-container/style.scss";
+@import "./components/resizable-frame/style.scss";
+
+@include wordpress-admin-schemes();
+
+#wpadminbar,
+#adminmenumain {
+	display: none;
+}
+#wpcontent {
+	margin-left: 0;
+}
+body.js #wpbody {
+	padding-top: 0;
+}
+body {
+	@include wp-admin-reset("#gutenberg-posts-dashboard");
+}
+#gutenberg-posts-dashboard {
+	@include reset;
+	height: 100vh;
+
+	// On mobile the main content area has to scroll, otherwise you can invoke
+	// the over-scroll bounce on the non-scrolling container, for a bad experience.
+	@include break-small {
+		bottom: 0;
+		left: 0;
+		min-height: 100vh;
+		position: fixed;
+		right: 0;
+		top: 0;
+	}
+
+	.no-js & {
+		min-height: 0;
+		position: static;
+	}
+}

package/build/components/block-editor/block-inspector-button.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BlockInspectorButton;
-var _i18n = require("@wordpress/i18n");
-var _a11y = require("@wordpress/a11y");
-var _components = require("@wordpress/components");
-var _data = require("@wordpress/data");
-var _keyboardShortcuts = require("@wordpress/keyboard-shortcuts");
-var _editor = require("@wordpress/editor");
-var _lockUnlock = require("../../lock-unlock");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  interfaceStore
-} = (0, _lockUnlock.unlock)(_editor.privateApis);
-function BlockInspectorButton({
-  onClick = () => {}
-}) {
-  const {
-    shortcut,
-    isBlockInspectorOpen
-  } = (0, _data.useSelect)(select => ({
-    shortcut: select(_keyboardShortcuts.store).getShortcutRepresentation('core/editor/toggle-sidebar'),
-    isBlockInspectorOpen: select(interfaceStore).getActiveComplementaryArea('core') === 'edit-post/block'
-  }), []);
-  const {
-    enableComplementaryArea,
-    disableComplementaryArea
-  } = (0, _data.useDispatch)(interfaceStore);
-  const label = isBlockInspectorOpen ? (0, _i18n.__)('Hide more settings') : (0, _i18n.__)('Show more settings');
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
-    onClick: () => {
-      if (isBlockInspectorOpen) {
-        disableComplementaryArea('core');
-        (0, _a11y.speak)((0, _i18n.__)('Block settings closed'));
-      } else {
-        enableComplementaryArea('core', 'edit-post/block');
-        (0, _a11y.speak)((0, _i18n.__)('Additional settings are now available in the Editor block settings sidebar'));
-      }
-      // Close dropdown menu.
-      onClick();
-    },
-    shortcut: shortcut,
-    children: label
-  });
-}
-//# sourceMappingURL=block-inspector-button.js.map

package/build/components/block-editor/block-inspector-button.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_i18n","require","_a11y","_components","_data","_keyboardShortcuts","_editor","_lockUnlock","_jsxRuntime","interfaceStore","unlock","editorPrivateApis","BlockInspectorButton","onClick","shortcut","isBlockInspectorOpen","useSelect","select","keyboardShortcutsStore","getShortcutRepresentation","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","useDispatch","label","__","jsx","MenuItem","speak","children"],"sources":["@wordpress/edit-site/src/components/block-editor/block-inspector-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { MenuItem } from '@wordpress/components';\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';\nimport { privateApis as editorPrivateApis } from '@wordpress/editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { interfaceStore } = unlock( editorPrivateApis );\n\nexport default function BlockInspectorButton( { onClick = () => {} } ) {\n\tconst { shortcut, isBlockInspectorOpen } = useSelect(\n\t\t( select ) => ( {\n\t\t\tshortcut: select(\n\t\t\t\tkeyboardShortcutsStore\n\t\t\t).getShortcutRepresentation( 'core/editor/toggle-sidebar' ),\n\t\t\tisBlockInspectorOpen:\n\t\t\t\tselect( interfaceStore ).getActiveComplementaryArea(\n\t\t\t\t\t'core'\n\t\t\t\t) === 'edit-post/block',\n\t\t} ),\n\t\t[]\n\t);\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\tconst label = isBlockInspectorOpen\n\t\t? __( 'Hide more settings' )\n\t\t: __( 'Show more settings' );\n\n\treturn (\n\t\t<MenuItem\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isBlockInspectorOpen ) {\n\t\t\t\t\tdisableComplementaryArea( 'core' );\n\t\t\t\t\tspeak( __( 'Block settings closed' ) );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( 'core', 'edit-post/block' );\n\t\t\t\t\tspeak(\n\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t'Additional settings are now available in the Editor block settings sidebar'\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\t// Close dropdown menu.\n\t\t\t\tonClick();\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAKA,IAAAM,WAAA,GAAAN,OAAA;AAA2C,IAAAO,WAAA,GAAAP,OAAA;AAb3C;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAM;EAAEQ;AAAe,CAAC,GAAG,IAAAC,kBAAM,EAAEC,mBAAkB,CAAC;AAEvC,SAASC,oBAAoBA,CAAE;EAAEC,OAAO,GAAGA,CAAA,KAAM,CAAC;AAAE,CAAC,EAAG;EACtE,MAAM;IAAEC,QAAQ;IAAEC;EAAqB,CAAC,GAAG,IAAAC,eAAS,EACjDC,MAAM,KAAQ;IACfH,QAAQ,EAAEG,MAAM,CACfC,wBACD,CAAC,CAACC,yBAAyB,CAAE,4BAA6B,CAAC;IAC3DJ,oBAAoB,EACnBE,MAAM,CAAER,cAAe,CAAC,CAACW,0BAA0B,CAClD,MACD,CAAC,KAAK;EACR,CAAC,CAAE,EACH,EACD,CAAC;EACD,MAAM;IAAEC,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D,IAAAC,iBAAW,EAAEd,cAAe,CAAC;EAE9B,MAAMe,KAAK,GAAGT,oBAAoB,GAC/B,IAAAU,QAAE,EAAE,oBAAqB,CAAC,GAC1B,IAAAA,QAAE,EAAE,oBAAqB,CAAC;EAE7B,oBACC,IAAAjB,WAAA,CAAAkB,GAAA,EAACvB,WAAA,CAAAwB,QAAQ;IACRd,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKE,oBAAoB,EAAG;QAC3BO,wBAAwB,CAAE,MAAO,CAAC;QAClC,IAAAM,WAAK,EAAE,IAAAH,QAAE,EAAE,uBAAwB,CAAE,CAAC;MACvC,CAAC,MAAM;QACNJ,uBAAuB,CAAE,MAAM,EAAE,iBAAkB,CAAC;QACpD,IAAAO,WAAK,EACJ,IAAAH,QAAE,EACD,4EACD,CACD,CAAC;MACF;MACA;MACAZ,OAAO,CAAC,CAAC;IACV,CAAG;IACHC,QAAQ,EAAGA,QAAU;IAAAe,QAAA,EAEnBL;EAAK,CACE,CAAC;AAEb","ignoreList":[]}