@wordpress/edit-site 5.24.1 → 5.25.1-next.79a6196f.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.24.1",
+	"version": "5.25.1-next.79a6196f.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,46 +27,46 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@tanstack/react-table": "^8.10.3",
-		"@wordpress/a11y": "^3.47.0",
-		"@wordpress/api-fetch": "^6.44.0",
-		"@wordpress/blob": "^3.47.0",
-		"@wordpress/block-editor": "^12.15.0",
-		"@wordpress/block-library": "^8.24.1",
-		"@wordpress/blocks": "^12.24.0",
-		"@wordpress/commands": "^0.18.0",
-		"@wordpress/components": "^25.13.0",
-		"@wordpress/compose": "^6.24.0",
-		"@wordpress/core-commands": "^0.16.0",
-		"@wordpress/core-data": "^6.24.0",
-		"@wordpress/data": "^9.17.0",
-		"@wordpress/date": "^4.47.0",
-		"@wordpress/deprecated": "^3.47.0",
-		"@wordpress/dom": "^3.47.0",
-		"@wordpress/editor": "^13.24.1",
-		"@wordpress/element": "^5.24.0",
-		"@wordpress/escape-html": "^2.47.0",
-		"@wordpress/hooks": "^3.47.0",
-		"@wordpress/html-entities": "^3.47.0",
-		"@wordpress/i18n": "^4.47.0",
-		"@wordpress/icons": "^9.38.0",
-		"@wordpress/interface": "^5.24.0",
-		"@wordpress/keyboard-shortcuts": "^4.24.0",
-		"@wordpress/keycodes": "^3.47.0",
-		"@wordpress/media-utils": "^4.38.0",
-		"@wordpress/notices": "^4.15.0",
-		"@wordpress/patterns": "^1.8.0",
-		"@wordpress/plugins": "^6.15.0",
-		"@wordpress/preferences": "^3.24.0",
-		"@wordpress/primitives": "^3.45.0",
-		"@wordpress/private-apis": "^0.29.0",
-		"@wordpress/reusable-blocks": "^4.24.0",
-		"@wordpress/router": "^0.16.0",
-		"@wordpress/style-engine": "^1.30.0",
-		"@wordpress/url": "^3.48.0",
-		"@wordpress/viewport": "^5.24.0",
-		"@wordpress/widgets": "^3.24.0",
-		"@wordpress/wordcount": "^3.47.0",
+		"@wordpress/a11y": "^3.48.1-next.79a6196f.0",
+		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
+		"@wordpress/blob": "^3.48.1-next.79a6196f.0",
+		"@wordpress/block-editor": "^12.16.1-next.79a6196f.0",
+		"@wordpress/block-library": "^8.25.1-next.79a6196f.0",
+		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
+		"@wordpress/commands": "^0.19.1-next.79a6196f.0",
+		"@wordpress/components": "^25.15.1-next.79a6196f.0",
+		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
+		"@wordpress/core-commands": "^0.17.1-next.79a6196f.0",
+		"@wordpress/core-data": "^6.25.1-next.79a6196f.0",
+		"@wordpress/data": "^9.18.1-next.79a6196f.0",
+		"@wordpress/dataviews": "^0.2.1-next.79a6196f.0",
+		"@wordpress/date": "^4.48.1-next.79a6196f.0",
+		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
+		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
+		"@wordpress/editor": "^13.26.1-next.79a6196f.0",
+		"@wordpress/element": "^5.25.1-next.79a6196f.0",
+		"@wordpress/escape-html": "^2.48.1-next.79a6196f.0",
+		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
+		"@wordpress/html-entities": "^3.48.1-next.79a6196f.0",
+		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
+		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
+		"@wordpress/interface": "^5.25.1-next.79a6196f.0",
+		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
+		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
+		"@wordpress/media-utils": "^4.39.1-next.79a6196f.0",
+		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
+		"@wordpress/patterns": "^1.9.1-next.79a6196f.0",
+		"@wordpress/plugins": "^6.16.1-next.79a6196f.0",
+		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
+		"@wordpress/primitives": "^3.46.1-next.79a6196f.0",
+		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
+		"@wordpress/reusable-blocks": "^4.25.1-next.79a6196f.0",
+		"@wordpress/router": "^0.17.1-next.79a6196f.0",
+		"@wordpress/style-engine": "^1.31.1-next.79a6196f.0",
+		"@wordpress/url": "^3.49.1-next.79a6196f.0",
+		"@wordpress/viewport": "^5.25.1-next.79a6196f.0",
+		"@wordpress/widgets": "^3.25.1-next.79a6196f.0",
+		"@wordpress/wordcount": "^3.48.1-next.79a6196f.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "12b897d7feff1cb00ddbf9016b62c1177d9c0081"
+	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
 }

package/src/components/add-new-template/add-custom-template-modal-content.js

@@ -15,12 +15,12 @@ import {
 } from '@wordpress/components';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { useDebouncedInput } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import useDebouncedInput from '../../utils/use-debounced-input';
 import { mapToIHasNameAndId } from './utils';
 
 const {

package/src/components/add-new-template/style.scss

@@ -39,7 +39,8 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			overflow: scroll;
+			max-height: $grid-unit-70 * 4; // Height of four buttons
+			overflow-y: auto;
 		}
 
 		&__list-item {

package/src/components/block-editor/back-button.js

@@ -12,6 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import {
 	TEMPLATE_PART_POST_TYPE,
 	NAVIGATION_POST_TYPE,
+	PATTERN_TYPES,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
 
@@ -22,11 +23,12 @@ function BackButton() {
 	const history = useHistory();
 	const isTemplatePart = location.params.postType === TEMPLATE_PART_POST_TYPE;
 	const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE;
+	const isPattern = location.params.postType === PATTERN_TYPES.user;
 	const previousTemplateId = location.state?.fromTemplateId;
 
-	const isFocusMode = isTemplatePart || isNavigationMenu;
+	const isFocusMode = isTemplatePart || isNavigationMenu || isPattern;
 
-	if ( ! isFocusMode || ! previousTemplateId ) {
+	if ( ! isFocusMode || ( ! previousTemplateId && ! isPattern ) ) {
 		return null;
 	}
 

package/src/components/block-editor/editor-canvas.js

@@ -6,46 +6,44 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
+import {
+	FOCUSABLE_ENTITIES,
+	NAVIGATION_POST_TYPE,
+} from '../../utils/constants';
 
-const { ExperimentalBlockCanvas: BlockCanvas } = unlock(
-	blockEditorPrivateApis
-);
+const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( {
-	enableResizing,
-	settings,
-	children,
-	contentRef,
-	...props
-} ) {
-	const { canvasMode, deviceType, isZoomOutMode } = useSelect(
-		( select ) => ( {
-			deviceType:
-				select( editSiteStore ).__experimentalGetPreviewDeviceType(),
-			isZoomOutMode:
-				select( blockEditorStore ).__unstableGetEditorMode() ===
-				'zoom-out',
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-		} ),
-		[]
-	);
+function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
+		useSelect( ( select ) => {
+			const { getBlockCount, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const { getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _templateType = getEditedPostType();
+
+			return {
+				templateType: _templateType,
+				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+				canvasMode: getCanvasMode(),
+				hasBlocks: !! getBlockCount(),
+			};
+		}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const deviceStyles = useResizeCanvas( deviceType );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -70,15 +68,48 @@ function EditorCanvas( {
 		onClick: () => setCanvasMode( 'edit' ),
 		readonly: true,
 	};
+	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
+	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
+	// Hide the appender when:
+	// - In navigation focus mode (should only allow the root Nav block).
+	// - In view mode (i.e. not editing).
+	const showBlockAppender =
+		( isNavigationFocusMode && hasBlocks ) || canvasMode === 'view'
+			? false
+			: undefined;
+
+	const styles = useMemo(
+		() => [
+			...settings.styles,
+			{
+				// Forming a "block formatting context" to prevent margin collapsing.
+				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+
+				css: `.is-root-container{display:flow-root;${
+					// Some themes will have `min-height: 100vh` for the root container,
+					// which isn't a requirement in auto resize mode.
+					enableResizing ? 'min-height:0!important;' : ''
+				}}body{position:relative; ${
+					canvasMode === 'view'
+						? 'cursor: pointer; min-height: 100vh;'
+						: ''
+				}}}`,
+			},
+		],
+		[ settings.styles, enableResizing, canvasMode ]
+	);
 
 	return (
-		<BlockCanvas
-			height="100%"
+		<EditorCanvasRoot
+			className={ classnames( 'edit-site-editor-canvas__block-list', {
+				'is-navigation-block': isTemplateTypeNavigation,
+			} ) }
+			renderAppender={ showBlockAppender }
+			styles={ styles }
 			iframeProps={ {
 				expand: isZoomOutMode,
 				scale: isZoomOutMode ? 0.45 : undefined,
 				frameSize: isZoomOutMode ? 100 : undefined,
-				style: enableResizing ? {} : deviceStyles,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{
@@ -88,24 +119,9 @@ function EditorCanvas( {
 				...props,
 				...( canvasMode === 'view' ? viewModeProps : {} ),
 			} }
-			styles={ settings.styles }
-			contentRef={ contentRef }
 		>
-			<style>{
-				// Forming a "block formatting context" to prevent margin collapsing.
-				// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
-				`.is-root-container{display:flow-root;${
-					// Some themes will have `min-height: 100vh` for the root container,
-					// which isn't a requirement in auto resize mode.
-					enableResizing ? 'min-height:0!important;' : ''
-				}}body{position:relative; ${
-					canvasMode === 'view'
-						? 'cursor: pointer; min-height: 100vh;'
-						: ''
-				}}}`
-			}</style>
 			{ children }
-		</BlockCanvas>
+		</EditorCanvasRoot>
 	);
 }
 

package/src/components/block-editor/resizable-editor.js

@@ -46,8 +46,8 @@ function ResizableEditor( { enableResizing, height, children } ) {
 			maxWidth="100%"
 			maxHeight="100%"
 			enable={ {
-				right: enableResizing,
 				left: enableResizing,
+				right: enableResizing,
 			} }
 			showHandle={ enableResizing }
 			// The editor is centered horizontally, resizing it only

package/src/components/block-editor/site-editor-canvas.js

@@ -5,14 +5,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
-import {
-	BlockList,
-	BlockTools,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
+
 /**
  * Internal dependencies
  */
@@ -27,17 +22,8 @@ import {
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
 import { unlock } from '../../lock-unlock';
-import PageContentFocusNotifications from '../page-content-focus-notifications';
-
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
 
 export default function SiteEditorCanvas() {
-	const { clearSelectedBlock } = useDispatch( blockEditorStore );
-
 	const { templateType, isFocusMode, isViewMode } = useSelect( ( select ) => {
 		const { getEditedPostType, getCanvasMode } = unlock(
 			select( editSiteStore )
@@ -56,16 +42,6 @@ export default function SiteEditorCanvas() {
 
 	const settings = useSiteEditorSettings();
 
-	const { hasBlocks } = useSelect( ( select ) => {
-		const { getBlockCount } = select( blockEditorStore );
-
-		const blocks = getBlockCount();
-
-		return {
-			hasBlocks: !! blocks,
-		};
-	}, [] );
-
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const enableResizing =
 		isFocusMode &&
@@ -73,83 +49,43 @@ export default function SiteEditorCanvas() {
 		// Disable resizing in mobile viewport.
 		! isMobileViewport;
 
-	const contentRef = useRef();
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
-
 	const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
-
-	// Hide the appender when:
-	// - In navigation focus mode (should only allow the root Nav block).
-	// - In view mode (i.e. not editing).
-	const showBlockAppender =
-		( isNavigationFocusMode && hasBlocks ) || isViewMode
-			? false
-			: undefined;
-
 	const forceFullHeight = isNavigationFocusMode;
 
 	return (
-		<>
-			<EditorCanvasContainer.Slot>
-				{ ( [ editorCanvasView ] ) =>
-					editorCanvasView ? (
-						<div className="edit-site-visual-editor is-focus-mode">
-							{ editorCanvasView }
-						</div>
-					) : (
-						<BlockTools
-							className={ classnames( 'edit-site-visual-editor', {
-								'is-focus-mode':
-									isFocusMode || !! editorCanvasView,
-								'is-view-mode': isViewMode,
-							} ) }
-							__unstableContentRef={ contentRef }
-							onClick={ ( event ) => {
-								// Clear selected block when clicking on the gray background.
-								if ( event.target === event.currentTarget ) {
-									clearSelectedBlock();
-								}
-							} }
+		<EditorCanvasContainer.Slot>
+			{ ( [ editorCanvasView ] ) =>
+				editorCanvasView ? (
+					<div className="edit-site-visual-editor is-focus-mode">
+						{ editorCanvasView }
+					</div>
+				) : (
+					<div
+						className={ classnames( 'edit-site-visual-editor', {
+							'is-focus-mode': isFocusMode || !! editorCanvasView,
+							'is-view-mode': isViewMode,
+						} ) }
+					>
+						<BackButton />
+						<ResizableEditor
+							enableResizing={ enableResizing }
+							height={
+								sizes.height && ! forceFullHeight
+									? sizes.height
+									: '100%'
+							}
 						>
-							<BackButton />
-							<ResizableEditor
+							<EditorCanvas
 								enableResizing={ enableResizing }
-								height={
-									sizes.height && ! forceFullHeight
-										? sizes.height
-										: '100%'
-								}
+								settings={ settings }
 							>
-								<EditorCanvas
-									enableResizing={ enableResizing }
-									settings={ settings }
-									contentRef={ contentRef }
-								>
-									{ resizeObserver }
-									<BlockList
-										className={ classnames(
-											'edit-site-block-editor__block-list wp-site-blocks',
-											{
-												'is-navigation-block':
-													isTemplateTypeNavigation,
-											}
-										) }
-										dropZoneElement={
-											// Pass in the html element of the iframe to ensure that
-											// the drop zone extends to the very edges of the iframe,
-											// even if the template is shorter than the viewport.
-											contentRef.current?.parentNode
-										}
-										layout={ LAYOUT }
-										renderAppender={ showBlockAppender }
-									/>
-								</EditorCanvas>
-							</ResizableEditor>
-						</BlockTools>
-					)
-				}
-			</EditorCanvasContainer.Slot>
-			<PageContentFocusNotifications contentRef={ contentRef } />
-		</>
+								{ resizeObserver }
+							</EditorCanvas>
+						</ResizableEditor>
+					</div>
+				)
+			}
+		</EditorCanvasContainer.Slot>
 	);
 }

package/src/components/block-editor/style.scss

@@ -14,7 +14,7 @@
 
 // Navigation focus mode requires padding around the root Navigation block
 // for presentational purposes.
-.edit-site-block-editor__block-list.is-navigation-block {
+.edit-site-editor-canvas__block-list.is-navigation-block {
 	padding: $grid-unit-30;
 }
 
@@ -27,6 +27,7 @@
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
+	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {
 		display: block;
 		width: 100%;
@@ -35,8 +36,6 @@
 	}
 
 	.edit-site-visual-editor__editor-canvas {
-		height: 100%;
-
 		&.is-focused {
 			outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color);
 			outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
@@ -69,17 +68,6 @@
 
 	&.is-view-mode {
 		box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 8px 10px -6px rgba(0, 0, 0, 0.8);
-
-		/*
-			Temporary to hide the contextual toolbar in view mode.
-			See: https://github.com/WordPress/gutenberg/pull/46298
-			This rule can possibly be removed once the
-			contextual toolbar has been redesigned.
-			See: https://github.com/WordPress/gutenberg/issues/40450
-		*/
-		.block-editor-block-contextual-toolbar.is-fixed {
-			display: none;
-		}
 	}
 }
 
@@ -96,6 +84,11 @@
 	}
 }
 
+// The toolbar header in distraction mode sits over the back button, which renders it unreachable.
+.is-distraction-free .edit-site-visual-editor__back-button {
+	display: none;
+}
+
 .resizable-editor__drag-handle {
 	position: absolute;
 	top: 0;

package/src/components/block-editor/use-post-link-props.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { getPostLinkProps } from '../routes/link';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export function usePostLinkProps() {
+	const history = useHistory();
+
+	return ( params, state ) => {
+		return getPostLinkProps( history, params, state );
+	};
+}