@wordpress/edit-site 5.25.0 → 5.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.25.0",
+	"version": "5.26.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",
-		"@wordpress/a11y": "^3.48.0",
-		"@wordpress/api-fetch": "^6.45.0",
-		"@wordpress/blob": "^3.48.0",
-		"@wordpress/block-editor": "^12.16.0",
-		"@wordpress/block-library": "^8.25.0",
-		"@wordpress/blocks": "^12.25.0",
-		"@wordpress/commands": "^0.19.0",
-		"@wordpress/components": "^25.14.0",
-		"@wordpress/compose": "^6.25.0",
-		"@wordpress/core-commands": "^0.17.0",
-		"@wordpress/core-data": "^6.25.0",
-		"@wordpress/data": "^9.18.0",
-		"@wordpress/dataviews": "^0.2.0",
-		"@wordpress/date": "^4.48.0",
-		"@wordpress/deprecated": "^3.48.0",
-		"@wordpress/dom": "^3.48.0",
-		"@wordpress/editor": "^13.25.0",
-		"@wordpress/element": "^5.25.0",
-		"@wordpress/escape-html": "^2.48.0",
-		"@wordpress/hooks": "^3.48.0",
-		"@wordpress/html-entities": "^3.48.0",
-		"@wordpress/i18n": "^4.48.0",
-		"@wordpress/icons": "^9.39.0",
-		"@wordpress/interface": "^5.25.0",
-		"@wordpress/keyboard-shortcuts": "^4.25.0",
-		"@wordpress/keycodes": "^3.48.0",
-		"@wordpress/media-utils": "^4.39.0",
-		"@wordpress/notices": "^4.16.0",
-		"@wordpress/patterns": "^1.9.0",
-		"@wordpress/plugins": "^6.16.0",
-		"@wordpress/preferences": "^3.25.0",
-		"@wordpress/primitives": "^3.46.0",
-		"@wordpress/private-apis": "^0.30.0",
-		"@wordpress/reusable-blocks": "^4.25.0",
-		"@wordpress/router": "^0.17.0",
-		"@wordpress/style-engine": "^1.31.0",
-		"@wordpress/url": "^3.49.0",
-		"@wordpress/viewport": "^5.25.0",
-		"@wordpress/widgets": "^3.25.0",
-		"@wordpress/wordcount": "^3.48.0",
+		"@wordpress/a11y": "^3.49.0",
+		"@wordpress/api-fetch": "^6.46.0",
+		"@wordpress/blob": "^3.49.0",
+		"@wordpress/block-editor": "^12.17.0",
+		"@wordpress/block-library": "^8.26.0",
+		"@wordpress/blocks": "^12.26.0",
+		"@wordpress/commands": "^0.20.0",
+		"@wordpress/components": "^25.15.0",
+		"@wordpress/compose": "^6.26.0",
+		"@wordpress/core-commands": "^0.18.0",
+		"@wordpress/core-data": "^6.26.0",
+		"@wordpress/data": "^9.19.0",
+		"@wordpress/dataviews": "^0.3.0",
+		"@wordpress/date": "^4.49.0",
+		"@wordpress/deprecated": "^3.49.0",
+		"@wordpress/dom": "^3.49.0",
+		"@wordpress/editor": "^13.26.0",
+		"@wordpress/element": "^5.26.0",
+		"@wordpress/escape-html": "^2.49.0",
+		"@wordpress/hooks": "^3.49.0",
+		"@wordpress/html-entities": "^3.49.0",
+		"@wordpress/i18n": "^4.49.0",
+		"@wordpress/icons": "^9.40.0",
+		"@wordpress/interface": "^5.26.0",
+		"@wordpress/keyboard-shortcuts": "^4.26.0",
+		"@wordpress/keycodes": "^3.49.0",
+		"@wordpress/media-utils": "^4.40.0",
+		"@wordpress/notices": "^4.17.0",
+		"@wordpress/patterns": "^1.10.0",
+		"@wordpress/plugins": "^6.17.0",
+		"@wordpress/preferences": "^3.26.0",
+		"@wordpress/primitives": "^3.47.0",
+		"@wordpress/private-apis": "^0.31.0",
+		"@wordpress/reusable-blocks": "^4.26.0",
+		"@wordpress/router": "^0.18.0",
+		"@wordpress/style-engine": "^1.32.0",
+		"@wordpress/url": "^3.50.0",
+		"@wordpress/viewport": "^5.26.0",
+		"@wordpress/widgets": "^3.26.0",
+		"@wordpress/wordcount": "^3.49.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
+	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
 }

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/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/style.scss

@@ -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));

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 );
+	};
+}

package/src/components/block-editor/use-site-editor-settings.js

@@ -1,18 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { useViewportMatch } from '@wordpress/compose';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { usePostLinkProps } from './use-post-link-props';
 
 const { useBlockEditorSettings } = unlock( editorPrivateApis );
 
@@ -89,18 +88,8 @@ function useArchiveLabel( templateSlug ) {
 }
 
 export function useSpecificEditorSettings() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const isLargeViewport = useViewportMatch( 'medium' );
-	const {
-		templateSlug,
-		focusMode,
-		isDistractionFree,
-		hasFixedToolbar,
-		keepCaretInsideBlock,
-		canvasMode,
-		settings,
-		postWithTemplate,
-	} = useSelect(
+	const getPostLinkProps = usePostLinkProps();
+	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
 		( select ) => {
 			const {
 				getEditedPostType,
@@ -109,7 +98,6 @@ export function useSpecificEditorSettings() {
 				getCanvasMode,
 				getSettings,
 			} = unlock( select( editSiteStore ) );
-			const { get: getPreference } = select( preferencesStore );
 			const { getEditedEntityRecord } = select( coreStore );
 			const usedPostType = getEditedPostType();
 			const usedPostId = getEditedPostId();
@@ -121,24 +109,12 @@ export function useSpecificEditorSettings() {
 			const _context = getEditedPostContext();
 			return {
 				templateSlug: _record.slug,
-				focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
-				isDistractionFree: !! getPreference(
-					'core/edit-site',
-					'distractionFree'
-				),
-				hasFixedToolbar:
-					!! getPreference( 'core/edit-site', 'fixedToolbar' ) ||
-					! isLargeViewport,
-				keepCaretInsideBlock: !! getPreference(
-					'core/edit-site',
-					'keepCaretInsideBlock'
-				),
 				canvasMode: getCanvasMode(),
 				settings: getSettings(),
 				postWithTemplate: _context?.postId,
 			};
 		},
-		[ isLargeViewport ]
+		[]
 	);
 	const archiveLabels = useArchiveLabel( templateSlug );
 	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
@@ -146,29 +122,22 @@ export function useSpecificEditorSettings() {
 		return {
 			...settings,
 
+			richEditingEnabled: true,
 			supportsTemplateMode: true,
-			__experimentalSetIsInserterOpened: setIsInserterOpened,
-			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
-			isDistractionFree,
-			hasFixedToolbar,
-			keepCaretInsideBlock,
+			focusMode: canvasMode !== 'view',
 			defaultRenderingMode,
-
+			getPostLinkProps,
 			// I wonder if they should be set in the post editor too
 			__experimentalArchiveTitleTypeLabel: archiveLabels.archiveTypeLabel,
 			__experimentalArchiveTitleNameLabel: archiveLabels.archiveNameLabel,
 		};
 	}, [
 		settings,
-		setIsInserterOpened,
-		focusMode,
-		isDistractionFree,
-		hasFixedToolbar,
-		keepCaretInsideBlock,
 		canvasMode,
+		defaultRenderingMode,
+		getPostLinkProps,
 		archiveLabels.archiveTypeLabel,
 		archiveLabels.archiveNameLabel,
-		defaultRenderingMode,
 	] );
 
 	return defaultEditorSettings;

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

@@ -41,10 +41,6 @@
 			font-size: $default-font-size;
 			color: $gray-900;
 		}
-
-		.components-button svg {
-			order: 1;
-		}
 	}
 }
 

package/src/components/create-template-part-modal/index.js

@@ -39,11 +39,25 @@ import {
 } from '../../utils/template-part-create';
 
 export default function CreateTemplatePartModal( {
+	modalTitle = __( 'Create template part' ),
+	...restProps
+} ) {
+	return (
+		<Modal
+			title={ modalTitle }
+			onRequestClose={ restProps.closeModal }
+			overlayClassName="edit-site-create-template-part-modal"
+		>
+			<CreateTemplatePartModalContents { ...restProps } />
+		</Modal>
+	);
+}
+
+export function CreateTemplatePartModalContents( {
 	defaultArea = TEMPLATE_PART_AREA_DEFAULT_CATEGORY,
 	blocks = [],
 	confirmLabel = __( 'Create' ),
 	closeModal,
-	modalTitle = __( 'Create template part' ),
 	onCreate,
 	onError,
 	defaultTitle = '',
@@ -62,7 +76,6 @@ export default function CreateTemplatePartModal( {
 			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
 		[]
 	);
-
 	async function createTemplatePart() {
 		if ( ! title || isSubmitting ) {
 			return;
@@ -105,91 +118,79 @@ export default function CreateTemplatePartModal( {
 			setIsSubmitting( false );
 		}
 	}
-
 	return (
-		<Modal
-			title={ modalTitle }
-			onRequestClose={ closeModal }
-			overlayClassName="edit-site-create-template-part-modal"
+		<form
+			onSubmit={ async ( event ) => {
+				event.preventDefault();
+				await createTemplatePart();
+			} }
 		>
-			<form
-				onSubmit={ async ( event ) => {
-					event.preventDefault();
-					await createTemplatePart();
-				} }
-			>
-				<VStack spacing="4">
-					<TextControl
-						__nextHasNoMarginBottom
-						label={ __( 'Name' ) }
-						value={ title }
-						onChange={ setTitle }
-						required
-					/>
-					<BaseControl
+			<VStack spacing="4">
+				<TextControl
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					required
+				/>
+				<BaseControl
+					label={ __( 'Area' ) }
+					id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
+					className="edit-site-create-template-part-modal__area-base-control"
+				>
+					<RadioGroup
 						label={ __( 'Area' ) }
+						className="edit-site-create-template-part-modal__area-radio-group"
 						id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-						className="edit-site-create-template-part-modal__area-base-control"
+						onChange={ setArea }
+						checked={ area }
 					>
-						<RadioGroup
-							label={ __( 'Area' ) }
-							className="edit-site-create-template-part-modal__area-radio-group"
-							id={ `edit-site-create-template-part-modal__area-selection-${ instanceId }` }
-							onChange={ setArea }
-							checked={ area }
-						>
-							{ templatePartAreas.map(
-								( {
-									icon,
-									label,
-									area: value,
-									description,
-								} ) => (
-									<Radio
-										key={ label }
-										value={ value }
-										className="edit-site-create-template-part-modal__area-radio"
-									>
-										<Flex align="start" justify="start">
-											<FlexItem>
-												<Icon icon={ icon } />
-											</FlexItem>
-											<FlexBlock className="edit-site-create-template-part-modal__option-label">
-												{ label }
-												<div>{ description }</div>
-											</FlexBlock>
+						{ templatePartAreas.map(
+							( { icon, label, area: value, description } ) => (
+								<Radio
+									key={ label }
+									value={ value }
+									className="edit-site-create-template-part-modal__area-radio"
+								>
+									<Flex align="start" justify="start">
+										<FlexItem>
+											<Icon icon={ icon } />
+										</FlexItem>
+										<FlexBlock className="edit-site-create-template-part-modal__option-label">
+											{ label }
+											<div>{ description }</div>
+										</FlexBlock>
 
-											<FlexItem className="edit-site-create-template-part-modal__checkbox">
-												{ area === value && (
-													<Icon icon={ check } />
-												) }
-											</FlexItem>
-										</Flex>
-									</Radio>
-								)
-							) }
-						</RadioGroup>
-					</BaseControl>
-					<HStack justify="right">
-						<Button
-							variant="tertiary"
-							onClick={ () => {
-								closeModal();
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							type="submit"
-							aria-disabled={ ! title || isSubmitting }
-							isBusy={ isSubmitting }
-						>
-							{ confirmLabel }
-						</Button>
-					</HStack>
-				</VStack>
-			</form>
-		</Modal>
+										<FlexItem className="edit-site-create-template-part-modal__checkbox">
+											{ area === value && (
+												<Icon icon={ check } />
+											) }
+										</FlexItem>
+									</Flex>
+								</Radio>
+							)
+						) }
+					</RadioGroup>
+				</BaseControl>
+				<HStack justify="right">
+					<Button
+						variant="tertiary"
+						onClick={ () => {
+							closeModal();
+						} }
+					>
+						{ __( 'Cancel' ) }
+					</Button>
+					<Button
+						variant="primary"
+						type="submit"
+						aria-disabled={ ! title || isSubmitting }
+						isBusy={ isSubmitting }
+					>
+						{ confirmLabel }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
 	);
 }

package/src/components/editor/index.js

@@ -23,6 +23,8 @@ import {
 	store as interfaceStore,
 } from '@wordpress/interface';
 import {
+	EditorKeyboardShortcutsRegister,
+	EditorKeyboardShortcuts,
 	EditorNotices,
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
@@ -40,8 +42,6 @@ import {
 } from '../sidebar-edit-mode';
 import CodeEditor from '../code-editor';
 import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
-import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
-import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
 import StartTemplateOptions from '../start-template-options';
 import { store as editSiteStore } from '../../store';
@@ -50,7 +50,6 @@ import useTitle from '../routes/use-title';
 import CanvasLoader from '../canvas-loader';
 import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
-import { SidebarFixedBottomSlot } from '../sidebar-edit-mode/sidebar-fixed-bottom';
 import PatternModal from '../pattern-modal';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 import SiteEditorCanvas from '../block-editor/site-editor-canvas';
@@ -58,8 +57,11 @@ import TemplatePartConverter from '../template-part-converter';
 import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
 
 const { BlockRemovalWarningModal } = unlock( blockEditorPrivateApis );
-const { ExperimentalEditorProvider: EditorProvider } =
-	unlock( editorPrivateApis );
+const {
+	ExperimentalEditorProvider: EditorProvider,
+	InserterSidebar,
+	ListViewSidebar,
+} = unlock( editorPrivateApis );
 
 const interfaceLabels = {
 	/* translators: accessibility text for the editor content landmark region. */
@@ -84,7 +86,7 @@ const blockRemovalRules = {
 	),
 };
 
-export default function Editor( { listViewToggleElement, isLoading } ) {
+export default function Editor( { isLoading } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -108,17 +110,15 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		showIconLabels,
 		showBlockBreadcrumbs,
 	} = useSelect( ( select ) => {
-		const {
-			getEditedPostContext,
-			getEditorMode,
-			getCanvasMode,
-			isInserterOpened,
-			isListViewOpened,
-		} = unlock( select( editSiteStore ) );
+		const { get } = select( preferencesStore );
+		const { getEditedPostContext, getEditorMode, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
 		const { __unstableGetEditorMode } = select( blockEditorStore );
 		const { getActiveComplementaryArea } = select( interfaceStore );
 		const { getEntityRecord } = select( coreDataStore );
-		const { getRenderingMode } = select( editorStore );
+		const { getRenderingMode, isInserterOpened, isListViewOpened } =
+			select( editorStore );
 		const _context = getEditedPostContext();
 
 		// The currently selected entity to display.
@@ -141,14 +141,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 			isRightSidebarOpen: getActiveComplementaryArea(
 				editSiteStore.name
 			),
-			showIconLabels: select( preferencesStore ).get(
-				'core/edit-site',
-				'showIconLabels'
-			),
-			showBlockBreadcrumbs: select( preferencesStore ).get(
-				'core/edit-site',
-				'showBlockBreadcrumbs'
-			),
+			showBlockBreadcrumbs: get( 'core', 'showBlockBreadcrumbs' ),
+			showIconLabels: get( 'core', 'showIconLabels' ),
 		};
 	}, [] );
 
@@ -248,26 +242,25 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 								{ editorMode === 'text' && isEditMode && (
 									<CodeEditor />
 								) }
-								{ isEditMode && <KeyboardShortcutsEditMode /> }
+								{ isEditMode && (
+									<>
+										<KeyboardShortcutsEditMode />
+										<EditorKeyboardShortcutsRegister />
+										<EditorKeyboardShortcuts />
+									</>
+								) }
 							</>
 						}
 						secondarySidebar={
 							isEditMode &&
 							( ( shouldShowInserter && <InserterSidebar /> ) ||
-								( shouldShowListView && (
-									<ListViewSidebar
-										listViewToggleElement={
-											listViewToggleElement
-										}
-									/>
-								) ) )
+								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={
 							isEditMode &&
 							isRightSidebarOpen && (
 								<>
 									<ComplementaryArea.Slot scope="core/edit-site" />
-									<SidebarFixedBottomSlot />
 								</>
 							)
 						}