@wordpress/block-editor 10.0.2 → 10.1.0

package/src/components/block-preview/auto.js

@@ -20,13 +20,12 @@ let MemoizedBlockList;
 
 const MAX_HEIGHT = 2000;
 
-function AutoBlockPreview( {
+function ScaledBlockPreview( {
 	viewportWidth,
+	containerWidth,
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
-	const [ containerResizeListener, { width: containerWidth } ] =
-		useResizeObserver();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
 	const { styles, assets, duotone } = useSelect( ( select ) => {
@@ -62,71 +61,84 @@ function AutoBlockPreview( {
 
 	const scale = containerWidth / viewportWidth;
 	return (
-		<div className="block-editor-block-preview__container">
-			{ containerResizeListener }
-			<Disabled
-				className="block-editor-block-preview__content"
+		<Disabled
+			className="block-editor-block-preview__content"
+			style={ {
+				transform: `scale(${ scale })`,
+				height: contentHeight * scale,
+				maxHeight:
+					contentHeight > MAX_HEIGHT ? MAX_HEIGHT * scale : undefined,
+				minHeight: __experimentalMinHeight,
+			} }
+		>
+			<Iframe
+				head={ <EditorStyles styles={ editorStyles } /> }
+				assets={ assets }
+				contentRef={ useRefEffect( ( bodyElement ) => {
+					const {
+						ownerDocument: { documentElement },
+					} = bodyElement;
+					documentElement.classList.add(
+						'block-editor-block-preview__content-iframe'
+					);
+					documentElement.style.position = 'absolute';
+					documentElement.style.width = '100%';
+					bodyElement.style.padding = __experimentalPadding + 'px';
+
+					// Necessary for contentResizeListener to work.
+					bodyElement.style.boxSizing = 'border-box';
+					bodyElement.style.position = 'absolute';
+					bodyElement.style.width = '100%';
+				}, [] ) }
+				aria-hidden
+				tabIndex={ -1 }
 				style={ {
-					transform: `scale(${ scale })`,
-					height: contentHeight * scale,
-					maxHeight:
-						contentHeight > MAX_HEIGHT
-							? MAX_HEIGHT * scale
-							: undefined,
-					minHeight: __experimentalMinHeight,
+					position: 'absolute',
+					width: viewportWidth,
+					height: contentHeight,
+					pointerEvents: 'none',
+					// This is a catch-all max-height for patterns.
+					// See: https://github.com/WordPress/gutenberg/pull/38175.
+					maxHeight: MAX_HEIGHT,
+					minHeight:
+						scale !== 0 && scale < 1 && __experimentalMinHeight
+							? __experimentalMinHeight / scale
+							: __experimentalMinHeight,
 				} }
 			>
-				<Iframe
-					head={ <EditorStyles styles={ editorStyles } /> }
-					assets={ assets }
-					contentRef={ useRefEffect( ( bodyElement ) => {
-						const {
-							ownerDocument: { documentElement },
-						} = bodyElement;
-						documentElement.classList.add(
-							'block-editor-block-preview__content-iframe'
-						);
-						documentElement.style.position = 'absolute';
-						documentElement.style.width = '100%';
-						bodyElement.style.padding =
-							__experimentalPadding + 'px';
-
-						// Necessary for contentResizeListener to work.
-						bodyElement.style.boxSizing = 'border-box';
-						bodyElement.style.position = 'absolute';
-						bodyElement.style.width = '100%';
-					}, [] ) }
-					aria-hidden
-					tabIndex={ -1 }
-					style={ {
-						position: 'absolute',
-						width: viewportWidth,
-						height: contentHeight,
-						pointerEvents: 'none',
-						// This is a catch-all max-height for patterns.
-						// See: https://github.com/WordPress/gutenberg/pull/38175.
-						maxHeight: MAX_HEIGHT,
-						minHeight:
-							scale !== 0 && scale < 1 && __experimentalMinHeight
-								? __experimentalMinHeight / scale
-								: __experimentalMinHeight,
-					} }
-				>
-					{ contentResizeListener }
-					{
-						/* Filters need to be rendered before children to avoid Safari rendering issues. */
-						svgFilters.map( ( preset ) => (
-							<PresetDuotoneFilter
-								preset={ preset }
-								key={ preset.slug }
-							/>
-						) )
-					}
-					<MemoizedBlockList renderAppender={ false } />
-				</Iframe>
-			</Disabled>
-		</div>
+				{ contentResizeListener }
+				{
+					/* Filters need to be rendered before children to avoid Safari rendering issues. */
+					svgFilters.map( ( preset ) => (
+						<PresetDuotoneFilter
+							preset={ preset }
+							key={ preset.slug }
+						/>
+					) )
+				}
+				<MemoizedBlockList renderAppender={ false } />
+			</Iframe>
+		</Disabled>
 	);
 }
 
-export default AutoBlockPreview;
+export default function AutoBlockPreview( props ) {
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+
+	return (
+		<>
+			<div style={ { position: 'relative', width: '100%', height: 0 } }>
+				{ containerResizeListener }
+			</div>
+			<div className="block-editor-block-preview__container">
+				{ !! containerWidth && (
+					<ScaledBlockPreview
+						{ ...props }
+						containerWidth={ containerWidth }
+					/>
+				) }
+			</div>
+		</>
+	);
+}

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

@@ -1,14 +1,13 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { useState, useLayoutEffect } from '@wordpress/element';
-import { useViewportMatch } from '@wordpress/compose';
+import { debounce, useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,

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

@@ -20,6 +20,17 @@ import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
+function selector( select ) {
+	const { __unstableGetEditorMode, getSettings, isTyping } =
+		select( blockEditorStore );
+
+	return {
+		isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+		hasFixedToolbar: getSettings().hasFixedToolbar,
+		isTyping: isTyping(),
+	};
+}
+
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
  * insertion point and a slot for the inline rich text toolbar). Must be wrapped
@@ -35,15 +46,10 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
-		const { __unstableGetEditorMode, getSettings } =
-			select( blockEditorStore );
-
-		return {
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			hasFixedToolbar: getSettings().hasFixedToolbar,
-		};
-	}, [] );
+	const { hasFixedToolbar, isZoomOutMode, isTyping } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -118,7 +124,7 @@ export default function BlockTools( {
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
 			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-				{ ! isZoomOutMode && (
+				{ ! isTyping && ! isZoomOutMode && (
 					<InsertionPoint
 						__unstableContentRef={ __unstableContentRef }
 					/>

package/src/components/block-tools/insertion-point.js

@@ -149,13 +149,13 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: isInserterShown ? 0.4 : 0 },
+			transition: { delay: isInserterShown ? 0.1 : 0, type: 'tween' },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: 0.4 },
+			transition: { delay: 0.1, type: 'tween' },
 		},
 	};
 
@@ -165,7 +165,7 @@ function InsertionPointPopover( {
 		},
 		rest: {
 			scale: 1,
-			transition: { delay: 0.2 },
+			transition: { type: 'tween' },
 		},
 	};
 

package/src/components/block-variation-picker/index.native.js

@@ -85,6 +85,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 				title={ __( 'Select a layout' ) }
 				contentStyle={ styles.contentStyle }
 				leftButton={ leftButton }
+				testID="block-variation-modal"
 			>
 				<ScrollView
 					horizontal

package/src/components/button-block-appender/index.native.js

@@ -43,6 +43,7 @@ function ButtonBlockAppender( {
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 					<Button
+						testID="appender-button"
 						onClick={ onAddBlock || onToggle }
 						aria-expanded={ isOpen }
 						disabled={ disabled }

package/src/components/link-control/test/index.js

@@ -24,8 +24,7 @@ import {
 } from './fixtures';
 
 // Mock debounce() so that it runs instantly.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
 	debounce: ( fn ) => {
 		fn.cancel = jest.fn();
 		return fn;

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

@@ -188,6 +188,7 @@ function ListView(
 				onCollapseRow={ collapseRow }
 				onExpandRow={ expandRow }
 				onFocusRow={ focusRow }
+				applicationAriaLabel={ __( 'Block navigation structure' ) }
 			>
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch

package/src/components/rich-text/format-toolbar-container.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -15,6 +16,7 @@ import {
  */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
+import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
 function InlineSelectionToolbar( {
@@ -46,11 +48,15 @@ function InlineToolbar( { popoverAnchor } ) {
 			className="block-editor-rich-text__inline-format-toolbar"
 			__unstableSlotName="block-toolbar"
 		>
-			<div className="block-editor-rich-text__inline-format-toolbar-group">
+			<NavigableToolbar
+				className="block-editor-rich-text__inline-format-toolbar-group"
+				/* translators: accessibility text for the inline format toolbar */
+				aria-label={ __( 'Format tools' ) }
+			>
 				<ToolbarGroup>
 					<FormatToolbar />
 				</ToolbarGroup>
-			</div>
+			</NavigableToolbar>
 		</Popover>
 	);
 }

package/src/components/rich-text/index.js

@@ -173,6 +173,13 @@ function RichTextWrapper(
 
 	// Handle deprecated format.
 	if ( Array.isArray( originalValue ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
 		adjustedValue = childrenSource.toHTML( originalValue );
 		adjustedOnChange = ( newValue ) =>
 			originalOnChange(
@@ -436,6 +443,13 @@ ForwardedRichTextContainer.Content = ( {
 } ) => {
 	// Handle deprecated `children` and `node` sources.
 	if ( Array.isArray( value ) ) {
+		deprecated( 'wp.blockEditor.RichText value prop as children type', {
+			since: '6.1',
+			version: '6.3',
+			alternative: 'value prop as string',
+			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
+		} );
+
 		value = childrenSource.toHTML( value );
 	}
 

package/src/components/url-input/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -18,7 +17,12 @@ import {
 	withSpokenMessages,
 	Popover,
 } from '@wordpress/components';
-import { withInstanceId, withSafeTimeout, compose } from '@wordpress/compose';
+import {
+	compose,
+	debounce,
+	withInstanceId,
+	withSafeTimeout,
+} from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 import { isURL } from '@wordpress/url';
 

package/src/components/use-setting/index.js

@@ -21,10 +21,8 @@ import { store as blockEditorStore } from '../../store';
 const blockedPaths = [ 'color', 'border', 'typography', 'spacing' ];
 
 const deprecatedFlags = {
-	'color.palette': ( settings ) =>
-		settings.colors === undefined ? undefined : settings.colors,
-	'color.gradients': ( settings ) =>
-		settings.gradients === undefined ? undefined : settings.gradients,
+	'color.palette': ( settings ) => settings.colors,
+	'color.gradients': ( settings ) => settings.gradients,
 	'color.custom': ( settings ) =>
 		settings.disableCustomColors === undefined
 			? undefined
@@ -33,8 +31,7 @@ const deprecatedFlags = {
 		settings.disableCustomGradients === undefined
 			? undefined
 			: ! settings.disableCustomGradients,
-	'typography.fontSizes': ( settings ) =>
-		settings.fontSizes === undefined ? undefined : settings.fontSizes,
+	'typography.fontSizes': ( settings ) => settings.fontSizes,
 	'typography.customFontSize': ( settings ) =>
 		settings.disableCustomFontSizes === undefined
 			? undefined
@@ -109,7 +106,7 @@ const removeCustomPrefixes = ( path ) => {
 export default function useSetting( path ) {
 	const { name: blockName, clientId } = useBlockEditContext();
 
-	const setting = useSelect(
+	return useSelect(
 		( select ) => {
 			if ( blockedPaths.includes( path ) ) {
 				// eslint-disable-next-line no-console
@@ -120,14 +117,20 @@ export default function useSetting( path ) {
 			}
 
 			let result;
+
 			const normalizedPath = removeCustomPrefixes( path );
 
 			// 1. Take settings from the block instance or its ancestors.
+			// Start from the current block and work our way up the ancestors.
 			const candidates = [
-				...select( blockEditorStore ).getBlockParents( clientId ),
-				clientId, // The current block is added last, so it overwrites any ancestor.
+				clientId,
+				...select( blockEditorStore ).getBlockParents(
+					clientId,
+					/* ascending */ true
+				),
 			];
-			candidates.forEach( ( candidateClientId ) => {
+
+			for ( const candidateClientId of candidates ) {
 				const candidateBlockName =
 					select( blockEditorStore ).getBlockName(
 						candidateClientId
@@ -143,17 +146,18 @@ export default function useSetting( path ) {
 						select( blockEditorStore ).getBlockAttributes(
 							candidateClientId
 						);
-					const candidateResult =
+					result =
 						get(
 							candidateAtts,
 							`settings.blocks.${ blockName }.${ normalizedPath }`
 						) ??
 						get( candidateAtts, `settings.${ normalizedPath }` );
-					if ( candidateResult !== undefined ) {
-						result = candidateResult;
+					if ( result !== undefined ) {
+						// Stop the search for more distant ancestors and move on.
+						break;
 					}
 				}
-			} );
+			}
 
 			// 2. Fall back to the settings from the block editor store (__experimentalFeatures).
 			const settings = select( blockEditorStore ).getSettings();
@@ -188,6 +192,4 @@ export default function useSetting( path ) {
 		},
 		[ blockName, clientId, path ]
 	);
-
-	return setting;
 }

package/src/components/warning/style.scss

@@ -33,6 +33,7 @@
 	}
 
 	.block-editor-warning__actions {
+		align-items: center;
 		display: flex;
 		margin-top: 1em;
 	}

package/src/components/writing-flow/use-arrow-nav.js

@@ -17,7 +17,7 @@ import { useRefEffect } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { getBlockClientId } from '../../utils/dom';
+import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
 
 /**
@@ -101,6 +101,16 @@ export function getClosestTabbable(
 	}
 
 	function isTabCandidate( node ) {
+		// Skip if there's only one child that is content editable (and thus a
+		// better candidate).
+		if (
+			node.children.length === 1 &&
+			isInSameBlock( node, node.firstElementChild ) &&
+			node.firstElementChild.getAttribute( 'contenteditable' ) === 'true'
+		) {
+			return;
+		}
+
 		// Not a candidate if the node is not tabbable.
 		if ( ! focus.tabbable.isTabbableIndex( node ) ) {
 			return false;

package/src/store/reducer.js

@@ -614,7 +614,6 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 			order: mapBlockOrder( action.blocks ),
 			parents: mapBlockParents( action.blocks ),
 			controlledInnerBlocks: {},
-			visibility: {},
 		};
 
 		const subTree = buildBlockTree( newState, action.blocks );
@@ -1162,17 +1161,6 @@ export const blocks = flow(
 		}
 		return state;
 	},
-
-	visibility( state = {}, action ) {
-		if ( action.type === 'SET_BLOCK_VISIBILITY' ) {
-			return {
-				...state,
-				...action.updates,
-			};
-		}
-
-		return state;
-	},
 } );
 
 /**
@@ -1215,6 +1203,25 @@ export function draggedBlocks( state = [], action ) {
 	return state;
 }
 
+/**
+ * Reducer tracking the visible blocks.
+ *
+ * @param {Record<string,boolean>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string,boolean>} Block visibility.
+ */
+export function blockVisibility( state = {}, action ) {
+	if ( action.type === 'SET_BLOCK_VISIBILITY' ) {
+		return {
+			...state,
+			...action.updates,
+		};
+	}
+
+	return state;
+}
+
 /**
  * Internal helper reducer for selectionStart and selectionEnd. Can hold a block
  * selection, represented by an object with property clientId.
@@ -1660,7 +1667,7 @@ export function hasBlockMovingClientId( state = null, action ) {
  *
  * @return {[string,Object]} Updated state.
  */
-export function lastBlockAttributesChange( state, action ) {
+export function lastBlockAttributesChange( state = null, action ) {
 	switch ( action.type ) {
 		case 'UPDATE_BLOCK':
 			if ( ! action.updates.attributes ) {
@@ -1681,7 +1688,7 @@ export function lastBlockAttributesChange( state, action ) {
 			);
 	}
 
-	return null;
+	return state;
 }
 
 /**
@@ -1813,4 +1820,5 @@ export default combineReducers( {
 	highlightedBlock,
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,
+	blockVisibility,
 } );

package/src/store/selectors.js

@@ -2670,7 +2670,7 @@ export function wasBlockJustInserted( state, clientId, source ) {
  * @return {boolean} True if the block is visible.
  */
 export function isBlockVisible( state, clientId ) {
-	return state.blocks.visibility?.[ clientId ] ?? true;
+	return state.blockVisibility?.[ clientId ] ?? true;
 }
 
 /**
@@ -2682,12 +2682,12 @@ export function isBlockVisible( state, clientId ) {
 export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => {
 		return new Set(
-			Object.keys( state.blocks.visibility ).filter(
-				( key ) => state.blocks.visibility[ key ]
+			Object.keys( state.blockVisibility ).filter(
+				( key ) => state.blockVisibility[ key ]
 			)
 		);
 	},
-	( state ) => [ state.blocks.visibility ]
+	( state ) => [ state.blockVisibility ]
 );
 
 export const __unstableGetContentLockingParent = createSelector(

package/src/store/test/reducer.js

@@ -292,7 +292,6 @@ describe( 'state', () => {
 						chicken: '',
 					},
 					controlledInnerBlocks: {},
-					visibility: {},
 				} );
 				expect( state.tree.chicken ).not.toBe(
 					existingState.tree.chicken
@@ -375,7 +374,6 @@ describe( 'state', () => {
 						chicken: '',
 					},
 					controlledInnerBlocks: {},
-					visibility: {},
 				} );
 				expect( state.tree.chicken ).not.toBe(
 					existingState.tree.chicken
@@ -525,7 +523,6 @@ describe( 'state', () => {
 						[ newChildBlockId3 ]: 'chicken',
 					},
 					controlledInnerBlocks: {},
-					visibility: {},
 				} );
 
 				expect( state.tree[ '' ].innerBlocks[ 0 ] ).toBe(
@@ -635,7 +632,6 @@ describe( 'state', () => {
 						[ newChildBlockId ]: 'chicken',
 					},
 					controlledInnerBlocks: {},
-					visibility: {},
 				} );
 
 				// The block object of the parent should be updated.
@@ -657,7 +653,6 @@ describe( 'state', () => {
 				isIgnoredChange: false,
 				tree: {},
 				controlledInnerBlocks: {},
-				visibility: {},
 			} );
 		} );
 
@@ -3085,18 +3080,6 @@ describe( 'state', () => {
 				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': { food: 'banana' },
 			} );
 		} );
-
-		it( 'returns null on anything other than block attributes update', () => {
-			const original = deepFreeze( {
-				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': { food: 'banana' },
-			} );
-
-			const state = lastBlockAttributesChange( original, {
-				type: '__INERT__',
-			} );
-
-			expect( state ).toBe( null );
-		} );
 	} );
 
 	describe( 'lastBlockInserted', () => {