@wordpress/block-editor 14.5.0 → 14.6.0

package/src/autocompleters/block.js

@@ -6,6 +6,7 @@ import {
 	createBlock,
 	createBlocksFromInnerBlocksTemplate,
 	parse,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
@@ -36,22 +37,30 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+			const { rootClientId, selectedBlockId, prioritizedBlocks } =
 				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
-						getBlockName,
+						getBlock,
 						getBlockListSettings,
 						getBlockRootClientId,
 					} = select( blockEditorStore );
+					const { getActiveBlockVariation } = select( blocksStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const { name: blockName, attributes } = getBlock(
+						selectedBlockClientId
+					);
+					const activeBlockVariation = getActiveBlockVariation(
+						blockName,
+						attributes
+					);
 					const _rootClientId = getBlockRootClientId(
 						selectedBlockClientId
 					);
 					return {
-						selectedBlockName: selectedBlockClientId
-							? getBlockName( selectedBlockClientId )
-							: null,
+						selectedBlockId: activeBlockVariation
+							? `${ blockName }/${ activeBlockVariation.name }`
+							: blockName,
 						rootClientId: _rootClientId,
 						prioritizedBlocks:
 							getBlockListSettings( _rootClientId )
@@ -78,11 +87,11 @@ function createBlockCompleter() {
 					  );
 
 				return initialFilteredItems
-					.filter( ( item ) => item.name !== selectedBlockName )
+					.filter( ( item ) => item.id !== selectedBlockId )
 					.slice( 0, SHOWN_BLOCK_TYPES );
 			}, [
 				filterValue,
-				selectedBlockName,
+				selectedBlockId,
 				items,
 				categories,
 				collections,

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

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
 import { useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,6 +16,8 @@ import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 import { useBlockCommands } from '../use-block-commands';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 // EditorStyles is a memoized component, so avoid passing a new
 // object reference on each render.
@@ -32,10 +35,22 @@ export function ExperimentalBlockCanvas( {
 	iframeProps,
 } ) {
 	useBlockCommands();
+	const isTabletViewport = useViewportMatch( 'medium', '<' );
 	const resetTypingRef = useMouseMoveTypingReset();
 	const clearerRef = useBlockSelectionClearer();
 	const localRef = useRef();
 	const contentRef = useMergeRefs( [ contentRefProp, clearerRef, localRef ] );
+	const zoomLevel = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getZoomLevel(),
+		[]
+	);
+	const zoomOutIframeProps =
+		zoomLevel !== 100 && ! isTabletViewport
+			? {
+					scale: zoomLevel,
+					frameSize: '40px',
+			  }
+			: {};
 
 	if ( ! shouldIframe ) {
 		return (
@@ -70,6 +85,7 @@ export function ExperimentalBlockCanvas( {
 		>
 			<Iframe
 				{ ...iframeProps }
+				{ ...zoomOutIframeProps }
 				ref={ resetTypingRef }
 				contentRef={ contentRef }
 				style={ {

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

@@ -4,4 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	// Handles transitions between device previews
+	@include editor-canvas-resize-animation;
 }

package/src/components/block-card/index.js

@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, isRTL, sprintf } from '@wordpress/i18n';
+import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -68,8 +68,8 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 				<h2 className="block-editor-block-card__title">
 					{ name?.length
 						? sprintf(
-								// translators:  %1$s: Custom block name. %2$s: Block title.
-								__( '%1$s (%2$s)' ),
+								// translators:  1: Custom block name. 2: Block title.
+								_x( '%1$s (%2$s)', 'block label' ),
 								name,
 								title
 						  )

package/src/components/block-full-height-alignment-control/index.js

@@ -7,7 +7,7 @@ import { fullscreen } from '@wordpress/icons';
 
 function BlockFullHeightAlignmentControl( {
 	isActive,
-	label = __( 'Toggle full height' ),
+	label = __( 'Full height' ),
 	onToggle,
 	isDisabled,
 } ) {

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

@@ -46,9 +46,3 @@
 .block-editor-block-inspector__no-block-tools {
 	border-top: $border-width solid $gray-300;
 }
-
-.block-editor-block-inspector__tab-item {
-	flex: 1 1 0px;
-	display: flex;
-	justify-content: center;
-}

package/src/components/block-list/block.js

@@ -629,8 +629,7 @@ function BlockListBlockProvider( props ) {
 			const attributes = getBlockAttributes( clientId );
 			const { name: blockName, isValid } = blockWithoutAttributes;
 			const blockType = getBlockType( blockName );
-			const { supportsLayout, __unstableIsPreviewMode: isPreviewMode } =
-				getSettings();
+			const { supportsLayout, isPreviewMode } = getSettings();
 			const hasLightBlockWrapper = blockType?.apiVersion > 1;
 			const previewContext = {
 				isPreviewMode,

package/src/components/block-list/block.native.js

@@ -320,7 +320,6 @@ function BlockListBlock( {
 			name,
 			fontSizes || EMPTY_ARRAY
 		);
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		// It is crucial to keep the dependencies array minimal to prevent unnecessary calls that could negatively impact performance.
 		// JSON.stringify is used for the following purposes:
@@ -329,11 +328,8 @@ function BlockListBlock( {
 		// 2. To filter the attributes object, ensuring that only the relevant attributes (included in
 		//    GlobalStylesContext.BLOCK_STYLE_ATTRIBUTES) are considered as dependencies. This reduces the likelihood of
 		//    unnecessary useMemo calls when other, unrelated attributes change.
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( globalStyle ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify( wrapperProps?.style ),
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 		JSON.stringify(
 			Object.fromEntries(
 				Object.entries( attributes ?? {} ).filter( ( [ key ] ) =>

package/src/components/block-list/content.scss

@@ -24,7 +24,7 @@
 // hack a progressive enhancement.
 /* stylelint-disable -- Stylelint is disabled to allow the hack to work. */
 _::-webkit-full-page-media, _:future, :root .block-editor-block-list__layout::selection,
-_::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-block-list__layout::selection {
+_::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .block-editor-block-list__layout::selection {
 	background-color: transparent;
 }
 /* stylelint-enable */

package/src/components/block-list/index.js

@@ -181,13 +181,13 @@ function Items( {
 				__unstableGetVisibleBlocks,
 				getTemplateLock,
 				getBlockEditingMode,
-				__unstableGetEditorMode,
 				isSectionBlock,
+				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const _order = getBlockOrder( rootClientId );
 
-			if ( getSettings().__unstableIsPreviewMode ) {
+			if ( getSettings().isPreviewMode ) {
 				return {
 					order: _order,
 					selectedBlocks: EMPTY_ARRAY,
@@ -200,13 +200,13 @@ function Items( {
 				order: _order,
 				selectedBlocks: getSelectedBlockClientIds(),
 				visibleBlocks: __unstableGetVisibleBlocks(),
-				isZoomOut: __unstableGetEditorMode() === 'zoom-out',
+				isZoomOut: _isZoomOut(),
 				shouldRenderAppender:
 					! isSectionBlock( rootClientId ) &&
 					getBlockEditingMode( rootClientId ) !== 'disabled' &&
 					! getTemplateLock( rootClientId ) &&
 					hasAppender &&
-					__unstableGetEditorMode() !== 'zoom-out' &&
+					! _isZoomOut() &&
 					( hasCustomAppender ||
 						rootClientId === selectedBlockClientId ||
 						( ! rootClientId &&

package/src/components/block-list/use-block-props/index.js

@@ -25,7 +25,6 @@ import {
 } from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
-import { useZoomOutModeExit } from './use-zoom-out-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
@@ -112,7 +111,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { isInsideRootBlock } from '../../../utils/dom';
 import { store as blockEditorStore } from '../../../store';
+import { unlock } from '../../../lock-unlock';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
@@ -28,15 +29,16 @@ import { store as blockEditorStore } from '../../../store';
  */
 export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const { isBlockSelected, isMultiSelecting, __unstableGetEditorMode } =
-		useSelect( blockEditorStore );
+	const { isBlockSelected, isMultiSelecting, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
 
 	useEffect( () => {
 		// Check if the block is still selected at the time this effect runs.
 		if (
 			! isBlockSelected( clientId ) ||
 			isMultiSelecting() ||
-			__unstableGetEditorMode() === 'zoom-out'
+			isZoomOut()
 		) {
 			return;
 		}

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -21,18 +21,12 @@ import { unlock } from '../../../lock-unlock';
  * @param {string} clientId Block client ID.
  */
 export function useEventHandlers( { clientId, isSelected } ) {
-	const {
-		getBlockRootClientId,
-		getBlockIndex,
-		isZoomOut,
-		__unstableGetEditorMode,
-	} = unlock( useSelect( blockEditorStore ) );
-	const {
-		insertAfterBlock,
-		removeBlock,
-		__unstableSetEditorMode,
-		resetZoomLevel,
-	} = unlock( useDispatch( blockEditorStore ) );
+	const { getBlockRootClientId, getBlockIndex, isZoomOut } = unlock(
+		useSelect( blockEditorStore )
+	);
+	const { insertAfterBlock, removeBlock, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	return useRefEffect(
 		( node ) => {
@@ -66,12 +60,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 
 				event.preventDefault();
 
-				if (
-					keyCode === ENTER &&
-					__unstableGetEditorMode() === 'zoom-out' &&
-					isZoomOut()
-				) {
-					__unstableSetEditorMode( 'edit' );
+				if ( keyCode === ENTER && isZoomOut() ) {
 					resetZoomLevel();
 				} else if ( keyCode === ENTER ) {
 					insertAfterBlock( clientId );
@@ -105,8 +94,6 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			getBlockIndex,
 			insertAfterBlock,
 			removeBlock,
-			__unstableGetEditorMode,
-			__unstableSetEditorMode,
 			isZoomOut,
 			resetZoomLevel,
 		]

package/src/components/block-list/use-in-between-inserter.js

@@ -18,7 +18,7 @@ export function useInBetweenInserter() {
 	const isInBetweenInserterDisabled = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree ||
-			select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out',
+			unlock( select( blockEditorStore ) ).isZoomOut(),
 		[]
 	);
 	const {