@wordpress/editor 14.10.0 → 14.11.0

package/src/components/visual-editor/index.js

@@ -16,7 +16,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
-import { useEffect, useRef, useMemo } from '@wordpress/element';
+import { useEffect, useRef, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
@@ -41,6 +41,7 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 	TEMPLATE_POST_TYPE,
 } from '../../store/constants';
+import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 
 const {
 	LayoutStyle,
@@ -48,7 +49,6 @@ const {
 	useLayoutStyles,
 	ExperimentalBlockCanvas: BlockCanvas,
 	useFlashEditableBlocks,
-	useZoomOutModeExit,
 } = unlock( blockEditorPrivateApis );
 
 /**
@@ -106,9 +106,11 @@ function VisualEditor( {
 	contentRef,
 	className,
 } ) {
-	const [ resizeObserver, sizes ] = useResizeObserver();
+	const [ contentHeight, setContentHeight ] = useState( '' );
+	const effectContentHeight = useResizeObserver( ( [ entry ] ) => {
+		setContentHeight( entry.borderBoxSize[ 0 ].blockSize );
+	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const {
 		renderingMode,
 		postContentAttributes,
@@ -167,7 +169,7 @@ function VisualEditor( {
 			deviceType: getDeviceType(),
 			isFocusedEntity: !! editorSettings.onNavigateToPreviousEntityRecord,
 			postType: postTypeSlug,
-			isPreview: editorSettings.__unstableIsPreviewMode,
+			isPreview: editorSettings.isPreviewMode,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -324,29 +326,6 @@ function VisualEditor( {
 		.is-root-container.alignfull { max-width: none; margin-left: auto; margin-right: auto;}
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
 
-	const localRef = useRef();
-	const typewriterRef = useTypewriter();
-	contentRef = useMergeRefs( [
-		localRef,
-		contentRef,
-		renderingMode === 'post-only' ? typewriterRef : null,
-		useFlashEditableBlocks( {
-			isEnabled: renderingMode === 'template-locked',
-		} ),
-		useSelectNearestEditableBlock( {
-			isEnabled: renderingMode === 'template-locked',
-		} ),
-		useZoomOutModeExit(),
-	] );
-
-	const zoomOutProps =
-		isZoomedOut && ! isTabletViewport
-			? {
-					scale: 'default',
-					frameSize: '40px',
-			  }
-			: {};
-
 	const forceFullHeight = postType === NAVIGATION_POST_TYPE;
 	const enableResizing =
 		[
@@ -360,14 +339,15 @@ function VisualEditor( {
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
 		! isZoomedOut;
-	const shouldIframe =
-		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
 	const iframeStyles = useMemo( () => {
 		return [
 			...( styles ?? [] ),
 			{
-				css: `.is-root-container{display:flow-root;${
+				// Ensures margins of children are contained so that the body background paints behind them.
+				// Otherwise, the background of html (when zoomed out) would show there and appear broken. It’s
+				// important mostly for post-only views yet conceivably an issue in templated views too.
+				css: `:where(.block-editor-iframe__body){display:flow-root;}.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;' : ''
@@ -376,6 +356,24 @@ function VisualEditor( {
 		];
 	}, [ styles, enableResizing ] );
 
+	const localRef = useRef();
+	const typewriterRef = useTypewriter();
+	contentRef = useMergeRefs( [
+		localRef,
+		contentRef,
+		renderingMode === 'post-only' ? typewriterRef : null,
+		useFlashEditableBlocks( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useSelectNearestEditableBlock( {
+			isEnabled: renderingMode === 'template-locked',
+		} ),
+		useZoomOutModeExit(),
+		// Avoid resize listeners when not needed, these will trigger
+		// unnecessary re-renders when animating the iframe width.
+		enableResizing ? effectContentHeight : null,
+	] );
+
 	return (
 		<div
 			className={ clsx(
@@ -386,24 +384,23 @@ function VisualEditor( {
 				{
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
-					'is-iframed': shouldIframe,
+					'is-iframed': ! disableIframe,
 				}
 			) }
 		>
 			<ResizableEditor
 				enableResizing={ enableResizing }
 				height={
-					sizes.height && ! forceFullHeight ? sizes.height : '100%'
+					contentHeight && ! forceFullHeight ? contentHeight : '100%'
 				}
 			>
 				<BlockCanvas
-					shouldIframe={ shouldIframe }
+					shouldIframe={ ! disableIframe }
 					contentRef={ contentRef }
 					styles={ iframeStyles }
 					height="100%"
 					iframeProps={ {
 						...iframeProps,
-						...zoomOutProps,
 						style: {
 							...iframeProps?.style,
 							...deviceStyles,
@@ -488,12 +485,6 @@ function VisualEditor( {
 							/>
 						) }
 					</RecursionProvider>
-					{
-						// Avoid resize listeners when not needed,
-						// these will trigger unnecessary re-renders
-						// when animating the iframe width.
-						enableResizing && resizeObserver
-					}
 				</BlockCanvas>
 			</ResizableEditor>
 		</div>

package/src/components/visual-editor/use-zoom-out-mode-exit.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Allows Zoom Out mode to be exited by double clicking in the selected block.
+ */
+export function useZoomOutModeExit() {
+	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
+
+	return useRefEffect(
+		( node ) => {
+			function onDoubleClick( event ) {
+				if ( ! isZoomOut() ) {
+					return;
+				}
+
+				if ( ! event.defaultPrevented ) {
+					event.preventDefault();
+
+					const { __experimentalSetIsInserterOpened } = getSettings();
+
+					if (
+						typeof __experimentalSetIsInserterOpened === 'function'
+					) {
+						__experimentalSetIsInserterOpened( false );
+					}
+					resetZoomLevel();
+				}
+			}
+
+			node.addEventListener( 'dblclick', onDoubleClick );
+
+			return () => {
+				node.removeEventListener( 'dblclick', onDoubleClick );
+			};
+		},
+		[ getSettings, isZoomOut, resetZoomLevel ]
+	);
+}

package/src/components/zoom-out-toggle/index.js

@@ -3,18 +3,23 @@
  */
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-
+import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { square as zoomOutIcon } from '@wordpress/icons';
 import { store as preferencesStore } from '@wordpress/preferences';
+import {
+	useShortcut,
+	store as keyboardShortcutsStore,
+} from '@wordpress/keyboard-shortcuts';
+import { isAppleOS } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 
-const ZoomOutToggle = () => {
+const ZoomOutToggle = ( { disabled } ) => {
 	const { isZoomOut, showIconLabels } = useSelect( ( select ) => ( {
 		isZoomOut: unlock( select( blockEditorStore ) ).isZoomOut(),
 		showIconLabels: select( preferencesStore ).get(
@@ -23,21 +28,50 @@ const ZoomOutToggle = () => {
 		),
 	} ) );
 
-	const { resetZoomLevel, setZoomLevel, __unstableSetEditorMode } = unlock(
+	const { resetZoomLevel, setZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
+	const { registerShortcut, unregisterShortcut } = useDispatch(
+		keyboardShortcutsStore
+	);
+
+	useEffect( () => {
+		registerShortcut( {
+			name: 'core/editor/zoom',
+			category: 'global',
+			description: __( 'Enter or exit zoom out.' ),
+			keyCombination: {
+				// `primaryShift+0` (`ctrl+shift+0`) is the shortcut for switching
+				// to input mode in Windows, so apply a different key combination.
+				modifier: isAppleOS() ? 'primaryShift' : 'secondary',
+				character: '0',
+			},
+		} );
+		return () => {
+			unregisterShortcut( 'core/editor/zoom' );
+		};
+	}, [ registerShortcut, unregisterShortcut ] );
+
+	useShortcut( 'core/editor/zoom', () => {
+		if ( isZoomOut ) {
+			resetZoomLevel();
+		} else {
+			setZoomLevel( 'auto-scaled' );
+		}
+	} );
 
 	const handleZoomOut = () => {
 		if ( isZoomOut ) {
 			resetZoomLevel();
 		} else {
-			setZoomLevel( 50 );
+			setZoomLevel( 'auto-scaled' );
 		}
-		__unstableSetEditorMode( isZoomOut ? 'edit' : 'zoom-out' );
 	};
 
 	return (
 		<Button
+			accessibleWhenDisabled
+			disabled={ disabled }
 			onClick={ handleZoomOut }
 			icon={ zoomOutIcon }
 			label={ __( 'Zoom Out' ) }

package/src/dataviews/actions/duplicate-template-part.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { __, sprintf, _x } from '@wordpress/i18n';
+import { _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useMemo } from '@wordpress/element';
 // @ts-ignore
@@ -42,7 +42,7 @@ const duplicateTemplatePart: Action< TemplatePart > = {
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: The new template part's title e.g. 'Call to action (copy)'.
-					__( '"%s" duplicated.' ),
+					_x( '"%s" duplicated.', 'template part' ),
 					getItemTitle( item )
 				),
 				{ type: 'snackbar', id: 'edit-site-patterns-success' }
@@ -55,7 +55,7 @@ const duplicateTemplatePart: Action< TemplatePart > = {
 				defaultArea={ item.area }
 				defaultTitle={ sprintf(
 					/* translators: %s: Existing template part title */
-					__( '%s (Copy)' ),
+					_x( '%s (Copy)', 'template part' ),
 					getItemTitle( item )
 				) }
 				onCreate={ onTemplatePartSuccess }

package/src/store/actions.js

@@ -841,8 +841,8 @@ export const toggleDistractionFree =
 				.dispatch( noticesStore )
 				.createInfoNotice(
 					isDistractionFree
-						? __( 'Distraction free off.' )
-						: __( 'Distraction free on.' ),
+						? __( 'Distraction free mode deactivated.' )
+						: __( 'Distraction free mode activated.' ),
 					{
 						id: 'core/editor/distraction-free-mode/notice',
 						type: 'snackbar',
@@ -883,9 +883,11 @@ export const switchEditorMode =
 	( { dispatch, registry } ) => {
 		registry.dispatch( preferencesStore ).set( 'core', 'editorMode', mode );
 
-		// Unselect blocks when we switch to a non visual mode.
 		if ( mode !== 'visual' ) {
+			// Unselect blocks when we switch to a non visual mode.
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
+			// Exit zoom out state when switching to a non visual mode.
+			unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
 		}
 
 		if ( mode === 'visual' ) {

package/src/store/private-actions.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -410,8 +410,8 @@ export const removeTemplates =
 							decodeEntities( title )
 					  )
 					: sprintf(
-							/* translators: The template/part's name. */
-							__( '"%s" deleted.' ),
+							/* translators: %s: The template/part's name. */
+							_x( '"%s" deleted.', 'template part' ),
 							decodeEntities( title )
 					  );
 			} else {

package/src/store/selectors.js

@@ -28,6 +28,7 @@ import {
 } from './constants';
 import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
+import { unlock } from '../lock-unlock';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -1299,8 +1300,8 @@ export function getRenderingMode( state ) {
  */
 export const getDeviceType = createRegistrySelector(
 	( select ) => ( state ) => {
-		const editorMode = select( blockEditorStore ).__unstableGetEditorMode();
-		if ( editorMode === 'zoom-out' ) {
+		const isZoomOut = unlock( select( blockEditorStore ) ).isZoomOut();
+		if ( isZoomOut ) {
 			return 'Desktop';
 		}
 		return state.deviceType;

package/src/style.scss

@@ -2,6 +2,7 @@
 
 @import "./components/autocompleters/style.scss";
 @import "./components/block-manager/style.scss";
+@import "./components/collab-sidebar/style.scss";
 @import "./components/collapsible-block-toolbar/style.scss";
 @import "./components/create-template-part-modal/style.scss";
 @import "./components/block-settings-menu/style.scss";

package/src/utils/pageTypeBadge.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
+/**
+ * Custom hook to get the page type badge for the current post on edit site view.
+ */
+export default function usePageTypeBadge() {
+	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { canUser, getEditedEntityRecord } = select( coreStore );
+		const postId = getCurrentPostId();
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+
+		return {
+			isFrontPage: siteSettings?.page_on_front === postId,
+			isPostsPage: siteSettings?.page_for_posts === postId,
+		};
+	} );
+
+	if ( isFrontPage ) {
+		return __( 'Homepage' );
+	} else if ( isPostsPage ) {
+		return __( 'Posts Page' );
+	}
+
+	return false;
+}

package/src/utils/terms.js

@@ -14,14 +14,16 @@ export function buildTermsTree( flatTerms ) {
 	const flatTermsWithParentAndChildren = flatTerms.map( ( term ) => {
 		return {
 			children: [],
-			parent: null,
+			parent: undefined,
 			...term,
 		};
 	} );
 
 	// All terms should have a `parent` because we're about to index them by it.
 	if (
-		flatTermsWithParentAndChildren.some( ( { parent } ) => parent === null )
+		flatTermsWithParentAndChildren.some(
+			( { parent } ) => parent === undefined
+		)
 	) {
 		return flatTermsWithParentAndChildren;
 	}

package/src/utils/test/terms.js

@@ -4,14 +4,14 @@
 import { buildTermsTree } from '../terms';
 
 describe( 'buildTermsTree()', () => {
-	it( 'Should return same array as input with null parent and empty children added if parent is never specified.', () => {
+	it( 'Should return same array as input with undefined parent and empty children added if parent is never specified.', () => {
 		const input = Object.freeze( [
 			{ id: 2232, dummy: true },
 			{ id: 2245, dummy: true },
 		] );
 		const output = Object.freeze( [
-			{ id: 2232, parent: null, children: [], dummy: true },
-			{ id: 2245, parent: null, children: [], dummy: true },
+			{ id: 2232, parent: undefined, children: [], dummy: true },
+			{ id: 2245, parent: undefined, children: [], dummy: true },
 		] );
 		const termsTreem = buildTermsTree( input );
 		expect( termsTreem ).toEqual( output );