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

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

@@ -1,17 +1,17 @@
 /**
  * WordPress dependencies
  */
-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 );
 
@@ -88,74 +88,54 @@ function useArchiveLabel( templateSlug ) {
 }
 
 export function useSpecificEditorSettings() {
-	const { setIsInserterOpened } = useDispatch( editSiteStore );
-	const {
-		templateSlug,
-		focusMode,
-		isDistractionFree,
-		hasFixedToolbar,
-		keepCaretInsideBlock,
-		canvasMode,
-		settings,
-	} = useSelect( ( select ) => {
-		const {
-			getEditedPostType,
-			getEditedPostId,
-			getCanvasMode,
-			getSettings,
-		} = unlock( select( editSiteStore ) );
-		const { get: getPreference } = select( preferencesStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const usedPostType = getEditedPostType();
-		const usedPostId = getEditedPostId();
-		const _record = getEditedEntityRecord(
-			'postType',
-			usedPostType,
-			usedPostId
-		);
-		return {
-			templateSlug: _record.slug,
-			focusMode: !! getPreference( 'core/edit-site', 'focusMode' ),
-			isDistractionFree: !! getPreference(
-				'core/edit-site',
-				'distractionFree'
-			),
-			hasFixedToolbar: !! getPreference(
-				'core/edit-site',
-				'fixedToolbar'
-			),
-			keepCaretInsideBlock: !! getPreference(
-				'core/edit-site',
-				'keepCaretInsideBlock'
-			),
-			canvasMode: getCanvasMode(),
-			settings: getSettings(),
-		};
-	}, [] );
+	const getPostLinkProps = usePostLinkProps();
+	const { templateSlug, canvasMode, settings, postWithTemplate } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostType,
+				getEditedPostId,
+				getEditedPostContext,
+				getCanvasMode,
+				getSettings,
+			} = unlock( select( editSiteStore ) );
+			const { getEditedEntityRecord } = select( coreStore );
+			const usedPostType = getEditedPostType();
+			const usedPostId = getEditedPostId();
+			const _record = getEditedEntityRecord(
+				'postType',
+				usedPostType,
+				usedPostId
+			);
+			const _context = getEditedPostContext();
+			return {
+				templateSlug: _record.slug,
+				canvasMode: getCanvasMode(),
+				settings: getSettings(),
+				postWithTemplate: _context?.postId,
+			};
+		},
+		[]
+	);
 	const archiveLabels = useArchiveLabel( templateSlug );
-
+	const defaultRenderingMode = postWithTemplate ? 'template-locked' : 'all';
 	const defaultEditorSettings = useMemo( () => {
 		return {
 			...settings,
 
-			__experimentalSetIsInserterOpened: setIsInserterOpened,
-			focusMode: canvasMode === 'view' && focusMode ? false : focusMode,
-			isDistractionFree,
-			hasFixedToolbar,
-			keepCaretInsideBlock,
-
+			richEditingEnabled: true,
+			supportsTemplateMode: true,
+			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,
 	] );

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

@@ -6,12 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import {
 	BlockBreadcrumb,
+	BlockToolbar,
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 	BlockInspector,
@@ -22,6 +23,8 @@ import {
 	store as interfaceStore,
 } from '@wordpress/interface';
 import {
+	EditorKeyboardShortcutsRegister,
+	EditorKeyboardShortcuts,
 	EditorNotices,
 	EditorSnackbars,
 	privateApis as editorPrivateApis,
@@ -29,7 +32,6 @@ import {
 } from '@wordpress/editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreDataStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -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,
@@ -93,6 +95,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 
 	const { type: editedPostType } = editedPost;
 
+	const isLargeViewport = useViewportMatch( 'medium' );
+
 	const {
 		context,
 		contextPost,
@@ -106,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.
@@ -139,17 +141,10 @@ 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' ),
 		};
 	}, [] );
-	const { setRenderingMode } = useDispatch( editorStore );
 
 	const isViewMode = canvasMode === 'view';
 	const isEditMode = canvasMode === 'edit';
@@ -169,8 +164,8 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 	let title;
 	if ( hasLoadedPost ) {
 		title = sprintf(
-			// translators: A breadcrumb trail in browser tab. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
-			__( '%1$s ‹ %2$s ‹ Editor' ),
+			// translators: A breadcrumb trail for the Admin document title. %1$s: title of template being edited, %2$s: type of template (Template or Template Part).
+			__( '%1$s ‹ %2$s' ),
 			getTitle(),
 			POST_TYPE_LABELS[ editedPostType ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
@@ -192,16 +187,6 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 		( ( postWithTemplate && !! contextPost && !! editedPost ) ||
 			( ! postWithTemplate && !! editedPost ) );
 
-	// This is the only reliable way I've found to reinitialize the rendering mode
-	// when the canvas mode or the edited entity changes.
-	useEffect( () => {
-		if ( canvasMode === 'edit' && postWithTemplate ) {
-			setRenderingMode( 'template-locked' );
-		} else {
-			setRenderingMode( 'all' );
-		}
-	}, [ canvasMode, postWithTemplate, setRenderingMode ] );
-
 	return (
 		<>
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
@@ -244,6 +229,9 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
 										<SidebarInspectorFill>
 											<BlockInspector />
 										</SidebarInspectorFill>
+										{ ! isLargeViewport && (
+											<BlockToolbar hideDragHandle />
+										) }
 										<SiteEditorCanvas />
 										<BlockRemovalWarningModal
 											rules={ blockRemovalRules }
@@ -254,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 />
 								</>
 							)
 						}

package/src/components/editor-canvas-container/index.js

@@ -13,6 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -33,6 +34,7 @@ function getEditorCanvasContainerTitle( view ) {
 		case 'style-book':
 			return __( 'Style Book' );
 		case 'global-styles-revisions':
+		case 'global-styles-revisions:style-book':
 			return __( 'Global styles revisions' );
 		default:
 			return '';
@@ -61,7 +63,7 @@ function EditorCanvasContainer( {
 			).getEditorCanvasContainerView();
 
 			const _showListViewByDefault = select( preferencesStore ).get(
-				'core/edit-site',
+				'core',
 				'showListViewByDefault'
 			);
 
@@ -76,6 +78,8 @@ function EditorCanvasContainer( {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
+	const { setIsListViewOpened } = useDispatch( editorStore );
+
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const sectionFocusReturnRef = useFocusReturn();
 	const title = useMemo(
@@ -83,15 +87,13 @@ function EditorCanvasContainer( {
 		[ editorCanvasContainerView ]
 	);
 
-	const { setIsListViewOpened } = useDispatch( editSiteStore );
-
 	function onCloseContainer() {
-		if ( typeof onClose === 'function' ) {
-			onClose();
-		}
 		setIsListViewOpened( showListViewByDefault );
 		setEditorCanvasContainerView( undefined );
 		setIsClosed( true );
+		if ( typeof onClose === 'function' ) {
+			onClose();
+		}
 	}
 
 	function closeOnEscape( event ) {

package/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -1,16 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
 	face,
@@ -27,18 +29,27 @@ function CollectionFontVariant( {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ selected }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

package/src/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -13,8 +13,8 @@ function ConfirmDeleteDialog( {
 	return (
 		<ConfirmDialog
 			isOpen={ isConfirmDeleteOpen }
-			cancelButtonText={ __( 'No, keep the font' ) }
-			confirmButtonText={ __( 'Yes, uninstall' ) }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
 			onCancel={ handleCancelUninstall }
 			onConfirm={ handleConfirmUninstall }
 		>
@@ -22,7 +22,7 @@ function ConfirmDeleteDialog( {
 				sprintf(
 					/* translators: %s: Name of the font. */
 					__(
-						'Would you like to remove %s and all its variants and assets?'
+						'Are you sure you want to delete "%s" font and all its variants and assets?'
 					),
 					font.name
 				) }