@wordpress/block-editor 10.0.2 → 10.0.3

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

@@ -8,7 +8,12 @@ import classnames from 'classnames';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { forwardRef, useMemo } from '@wordpress/element';
+import {
+	forwardRef,
+	useMemo,
+	useReducer,
+	useLayoutEffect,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -16,6 +21,8 @@ import { forwardRef, useMemo } from '@wordpress/element';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
+const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
+
 function BlockPopover(
 	{
 		clientId,
@@ -47,8 +54,41 @@ function BlockPopover(
 		};
 	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
+	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
+		useReducer(
+			// Module is there to make sure that the counter doesn't overflow.
+			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+			0
+		);
+
+	// When blocks are moved up/down, they are animated to their new position by
+	// updating the `transform` property manually (i.e. without using CSS
+	// transitions or animations). The animation, which can also scroll the block
+	// editor, can sometimes cause the position of the Popover to get out of sync.
+	// A MutationObserver is therefore used to make sure that changes to the
+	// selectedElement's attribute (i.e. `transform`) can be tracked and used to
+	// trigger the Popover to rerender.
+	useLayoutEffect( () => {
+		if ( ! selectedElement ) {
+			return;
+		}
+
+		const observer = new window.MutationObserver(
+			forceRecomputePopoverAnchor
+		);
+		observer.observe( selectedElement, { attributes: true } );
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [ selectedElement ] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
+			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverAnchorRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -88,7 +128,12 @@ function BlockPopover(
 			},
 			ownerDocument: selectedElement.ownerDocument,
 		};
-	}, [ bottomClientId, lastSelectedElement, selectedElement ] );
+	}, [
+		bottomClientId,
+		lastSelectedElement,
+		selectedElement,
+		popoverAnchorRecomputeCounter,
+	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
 		return null;

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