@wordpress/block-editor 9.7.0 → 9.8.1-next.957ca95e4c.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.7.0",
+	"version": "9.8.1-next.957ca95e4c.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.15.0",
-		"@wordpress/api-fetch": "^6.12.0",
-		"@wordpress/blob": "^3.15.0",
-		"@wordpress/blocks": "^11.14.0",
-		"@wordpress/components": "^19.17.0",
-		"@wordpress/compose": "^5.13.0",
-		"@wordpress/data": "^6.15.0",
-		"@wordpress/date": "^4.15.0",
-		"@wordpress/deprecated": "^3.15.0",
-		"@wordpress/dom": "^3.15.0",
-		"@wordpress/element": "^4.13.0",
-		"@wordpress/hooks": "^3.15.0",
-		"@wordpress/html-entities": "^3.15.0",
-		"@wordpress/i18n": "^4.15.0",
-		"@wordpress/icons": "^9.6.0",
-		"@wordpress/is-shallow-equal": "^4.15.0",
-		"@wordpress/keyboard-shortcuts": "^3.13.0",
-		"@wordpress/keycodes": "^3.15.0",
-		"@wordpress/notices": "^3.15.0",
-		"@wordpress/rich-text": "^5.13.0",
-		"@wordpress/shortcode": "^3.15.0",
-		"@wordpress/style-engine": "^0.14.0",
-		"@wordpress/token-list": "^2.15.0",
-		"@wordpress/url": "^3.16.0",
-		"@wordpress/warning": "^2.15.0",
-		"@wordpress/wordcount": "^3.15.0",
+		"@wordpress/a11y": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/api-fetch": "^6.13.1-next.957ca95e4c.0",
+		"@wordpress/blob": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/blocks": "^11.15.1-next.957ca95e4c.0",
+		"@wordpress/components": "^20.0.2-next.957ca95e4c.0",
+		"@wordpress/compose": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/data": "^7.0.1-next.957ca95e4c.0",
+		"@wordpress/date": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/deprecated": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/dom": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/element": "^4.14.1-next.957ca95e4c.0",
+		"@wordpress/hooks": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/html-entities": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/i18n": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/icons": "^9.7.1-next.957ca95e4c.0",
+		"@wordpress/is-shallow-equal": "^4.16.1-next.957ca95e4c.0",
+		"@wordpress/keyboard-shortcuts": "^3.14.1-next.957ca95e4c.0",
+		"@wordpress/keycodes": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/notices": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/rich-text": "^5.14.1-next.957ca95e4c.0",
+		"@wordpress/shortcode": "^3.16.1-next.957ca95e4c.0",
+		"@wordpress/style-engine": "^0.15.1-next.957ca95e4c.0",
+		"@wordpress/token-list": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/url": "^3.17.1-next.957ca95e4c.0",
+		"@wordpress/warning": "^2.16.1-next.957ca95e4c.0",
+		"@wordpress/wordcount": "^3.16.1-next.957ca95e4c.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -68,6 +69,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^3.0.0",
 		"rememo": "^4.0.0",
+		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
 	"peerDependencies": {
@@ -77,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "08358f53b627a15148c3a3e433cdf58cf8714aa4"
+	"gitHead": "272a74bbbaab10ee24424eafe9578e705fbfbbb4"
 }

package/src/components/block-alignment-control/use-available-alignments.js

@@ -46,7 +46,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
-	if ( layoutType.name !== 'default' ) {
+	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return [];
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;

package/src/components/block-edit-visually-button/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds } ) {
+	// Edit visually only works for single block selection.
+	const clientId = clientIds.length === 1 ? clientIds[ 0 ] : undefined;
+	const canEditVisually = useSelect(
+		( select ) =>
+			!! clientId &&
+			select( blockEditorStore ).getBlockMode( clientId ) === 'html',
+		[ clientId ]
+	);
+	const { toggleBlockMode } = useDispatch( blockEditorStore );
+
+	if ( ! canEditVisually ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				onClick={ () => {
+					toggleBlockMode( clientId );
+				} }
+			>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

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

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+import BlockListBlock from './block';
+
+/**
+ * NOTE: This is a component currently used by the List block (V2)
+ * It only passes the needed props for this block, if other blocks will use it
+ * make sure you pass other props that might be required coming from:
+ * components/inner-blocks/index.native.js
+ */
+
+function BlockListCompact( props ) {
+	const {
+		marginHorizontal = styles.defaultBlock.marginLeft,
+		marginVertical = styles.defaultBlock.marginTop,
+		rootClientId,
+	} = props;
+	const { blockClientIds } = useSelect(
+		( select ) => {
+			const { getBlockOrder } = select( blockEditorStore );
+			const blockOrder = getBlockOrder( rootClientId );
+
+			return {
+				blockClientIds: blockOrder,
+			};
+		},
+		[ rootClientId ]
+	);
+
+	const containerStyle = {
+		marginVertical: -marginVertical,
+		marginHorizontal: -marginHorizontal,
+	};
+
+	return (
+		<View style={ containerStyle }>
+			{ blockClientIds.map( ( currentClientId ) => (
+				<BlockListBlock
+					clientId={ currentClientId }
+					key={ currentClientId }
+					marginHorizontal={ marginHorizontal }
+					marginVertical={ marginVertical }
+				/>
+			) ) }
+		</View>
+	);
+}
+
+export default BlockListCompact;

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

@@ -4,10 +4,6 @@
 	margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
-
 /**
  * Cross-Block Selection
  */
@@ -104,8 +100,20 @@
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
-}
 
+	// Ensure an accurate partial text selection.
+	// To do this, we disable text selection on the main container, then re-enable it only on the
+	// elements that actually get selected.
+	// To keep in mind: user-select is currently inherited to all nodes inside.
+	.has-multi-selection & {
+		user-select: none;
+	}
+
+	// Re-enable it on components inside.
+	[class^="components-"] {
+		user-select: text;
+	}
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
 	// Should be invisible but not unfocusable.
@@ -118,6 +126,19 @@
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
+	// Re-enable text-selection on editable blocks.
+	user-select: text;
+
+	// Hide the select style pseudo element as it interferes with the style.
+	&.is-partially-selected::after {
+		height: 0;
+	}
+
+	&.is-highlighted::after,
+	&.is-highlighted ~ .is-multi-selected::after {
+		height: auto;
+	}
+
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -192,7 +213,9 @@
 		bottom: 0;
 		left: 0;
 		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) transparent;
+		box-shadow: 0 0 0 0 transparent;
+		transition: box-shadow 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
 	// Warnings

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

@@ -85,7 +85,7 @@ export function useFocusFirstElement( clientId ) {
 		const { ownerDocument } = ref.current;
 
 		// Do not focus the block if it already contains the active element.
-		if ( ref.current.contains( ownerDocument.activeElement ) ) {
+		if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
 			return;
 		}
 

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

@@ -154,7 +154,10 @@ function BlockPopoverInbetween( {
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement || ! isVisible ) {
+	// If there's either a previous or a next element, show the inbetween popover.
+	// Note that drag and drop uses the inbetween popover to show the drop indicator
+	// before the first block and after the last block.
+	if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 		return null;
 	}
 

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

@@ -6,8 +6,9 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,19 +16,25 @@ import { useMemo } from '@wordpress/element';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 
-export default function BlockPopover( {
-	clientId,
-	bottomClientId,
-	children,
-	__unstableRefreshSize,
-	__unstableCoverTarget = false,
-	__unstablePopoverSlot,
-	__unstableContentRef,
-	...props
-} ) {
+function BlockPopover(
+	{
+		clientId,
+		bottomClientId,
+		children,
+		__unstableRefreshSize,
+		__unstableCoverTarget = false,
+		__unstablePopoverSlot,
+		__unstableContentRef,
+		...props
+	},
+	ref
+) {
 	const selectedElement = useBlockElement( clientId );
 	const lastSelectedElement = useBlockElement( bottomClientId ?? clientId );
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
+	const mergedRefs = useMergeRefs( [
+		ref,
+		usePopoverScroll( __unstableContentRef ),
+	] );
 	const style = useMemo( () => {
 		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
 			return {};
@@ -51,7 +58,7 @@ export default function BlockPopover( {
 
 	return (
 		<Popover
-			ref={ popoverScrollRef }
+			ref={ mergedRefs }
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
@@ -59,8 +66,6 @@ export default function BlockPopover( {
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ selectedElement }
 			__unstableForcePosition
 			__unstableShift
 			{ ...props }
@@ -74,3 +79,5 @@ export default function BlockPopover( {
 		</Popover>
 	);
 }
+
+export default forwardRef( BlockPopover );

package/src/components/block-settings-menu/index.js

@@ -7,24 +7,20 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
-import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<>
-			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
-			<ToolbarGroup>
-				<ToolbarItem>
-					{ ( toggleProps ) => (
-						<BlockSettingsDropdown
-							clientIds={ clientIds }
-							toggleProps={ toggleProps }
-							{ ...props }
-						/>
-					) }
-				</ToolbarItem>
-			</ToolbarGroup>
-		</>
+		<ToolbarGroup>
+			<ToolbarItem>
+				{ ( toggleProps ) => (
+					<BlockSettingsDropdown
+						clientIds={ clientIds }
+						toggleProps={ toggleProps }
+						{ ...props }
+					/>
+				) }
+			</ToolbarItem>
+		</ToolbarGroup>
 	);
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, uniq } from 'lodash';
+import { castArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,10 +28,10 @@ import { copy } from '@wordpress/icons';
 import { store as blockEditorStore } from '../../store';
 import useBlockDisplayInformation from '../use-block-display-information';
 import BlockIcon from '../block-icon';
-import BlockTitle from '../block-title';
 import BlockTransformationsMenu from './block-transformations-menu';
 import BlockStylesMenu from './block-styles-menu';
 import PatternTransformationsMenu from './pattern-transformations-menu';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 
 export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
@@ -41,7 +41,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
-		blockTitle,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -64,7 +63,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				_icon = blockInformation?.icon; // Take into account active block variations.
 			} else {
 				const isSelectionOfSameType =
-					uniq( blocks.map( ( { name } ) => name ) ).length === 1;
+					new Set( blocks.map( ( { name } ) => name ) ).size === 1;
 				// When selection consists of blocks of multiple types, display an
 				// appropriate icon to communicate the non-uniformity.
 				_icon = isSelectionOfSameType
@@ -79,7 +78,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
-				blockTitle: getBlockType( firstBlockName )?.title,
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -89,6 +87,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		[ clientIds, blocks, blockInformation?.icon ]
 	);
 
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
+		maximumLength: 35,
+	} );
 	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
 
@@ -119,10 +121,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 							<BlockIcon icon={ icon } showColors />
 							{ ( isReusable || isTemplate ) && (
 								<span className="block-editor-block-switcher__toggle-text">
-									<BlockTitle
-										clientId={ clientIds }
-										maximumLength={ 35 }
-									/>
+									{ blockTitle }
 								</span>
 							) }
 						</>
@@ -176,10 +175,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 								/>
 								{ ( isReusable || isTemplate ) && (
 									<span className="block-editor-block-switcher__toggle-text">
-										<BlockTitle
-											clientId={ clientIds }
-											maximumLength={ 35 }
-										/>
+										{ blockTitle }
 									</span>
 								) }
 							</>

package/src/components/block-switcher/test/index.js

@@ -8,7 +8,6 @@ import { shallow, mount } from 'enzyme';
  */
 import { useSelect } from '@wordpress/data';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
-import { DOWN } from '@wordpress/keycodes';
 import { Button } from '@wordpress/components';
 import { copy } from '@wordpress/icons';
 
@@ -18,6 +17,7 @@ import { copy } from '@wordpress/icons';
 import { BlockSwitcher, BlockSwitcherDropdownMenu } from '../';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () => jest.fn() );
 
 describe( 'BlockSwitcher', () => {
 	test( 'should not render block switcher without blocks', () => {
@@ -179,7 +179,7 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 			const onToggleStub = jest.fn();
 			const mockKeyDown = {
 				preventDefault: () => {},
-				keyCode: DOWN,
+				code: 'ArrowDown',
 			};
 
 			afterEach( () => {

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

@@ -23,6 +23,7 @@ import __unstableBlockToolbarLastItem from './block-toolbar-last-item';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
 import { BlockGroupToolbar } from '../convert-to-group-buttons';
+import BlockEditVisuallyButton from '../block-edit-visually-button';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
@@ -159,6 +160,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 					</__unstableBlockNameContext.Provider>
 				</>
 			) }
+			<BlockEditVisuallyButton clientIds={ blockClientIds } />
 			<BlockSettingsMenu clientIds={ blockClientIds } />
 		</div>
 	);

package/src/components/block-tools/selected-block-popover.js

@@ -20,6 +20,7 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 
 function selector( select ) {
 	const {
@@ -113,6 +114,11 @@ function SelectedBlockPopover( {
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
 	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
@@ -126,6 +132,7 @@ function SelectedBlockPopover( {
 			} ) }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			{ ...popoverProps }
 		>
 			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar

package/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { useCallback, useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+
+// By default the toolbar sets the `shift` prop. If the user scrolls the page
+// down the toolbar will stay on screen by adopting a sticky position at the
+// top of the viewport.
+const DEFAULT_PROPS = { __unstableForcePosition: true, __unstableShift: true };
+
+// When there isn't enough height between the top of the block and the editor
+// canvas, the `shift` prop is set to `false`, as it will cause the block to be
+// obscured. The `flip` behavior is enabled (by setting `forcePosition` to
+// `false`), which positions the toolbar below the block.
+const RESTRICTED_HEIGHT_PROPS = {
+	__unstableForcePosition: false,
+	__unstableShift: false,
+};
+
+/**
+ * Get the popover props for the block toolbar, determined by the space at the top of the canvas and the toolbar height.
+ *
+ * @param {Element} contentElement       The DOM element that represents the editor content or canvas.
+ * @param {Element} selectedBlockElement The outer DOM element of the first selected block.
+ * @param {number}  toolbarHeight        The height of the toolbar in pixels.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+function getProps( contentElement, selectedBlockElement, toolbarHeight ) {
+	if ( ! contentElement || ! selectedBlockElement ) {
+		return DEFAULT_PROPS;
+	}
+
+	const blockRect = selectedBlockElement.getBoundingClientRect();
+	const contentRect = contentElement.getBoundingClientRect();
+
+	if ( blockRect.top - contentRect.top > toolbarHeight ) {
+		return DEFAULT_PROPS;
+	}
+
+	return RESTRICTED_HEIGHT_PROPS;
+}
+
+/**
+ * Determines the desired popover positioning behavior, returning a set of appropriate props.
+ *
+ * @param {Object}  elements
+ * @param {Element} elements.contentElement The DOM element that represents the editor content or canvas.
+ * @param {string}  elements.clientId       The clientId of the first selected block.
+ *
+ * @return {Object} The popover props used to determine the position of the toolbar.
+ */
+export default function useBlockToolbarPopoverProps( {
+	contentElement,
+	clientId,
+} ) {
+	const selectedBlockElement = useBlockElement( clientId );
+	const [ toolbarHeight, setToolbarHeight ] = useState( 0 );
+	const [ props, setProps ] = useState( () =>
+		getProps( contentElement, selectedBlockElement, toolbarHeight )
+	);
+	const blockIndex = useSelect(
+		( select ) => select( blockEditorStore ).getBlockIndex( clientId ),
+		[ clientId ]
+	);
+
+	const popoverRef = useRefEffect( ( popoverNode ) => {
+		setToolbarHeight( popoverNode.offsetHeight );
+	}, [] );
+
+	const updateProps = useCallback(
+		() =>
+			setProps(
+				getProps( contentElement, selectedBlockElement, toolbarHeight )
+			),
+		[ contentElement, selectedBlockElement, toolbarHeight ]
+	);
+
+	// Update props when the block is moved. This also ensures the props are
+	// correct on initial mount, and when the selected block or content element
+	// changes (since the callback ref will update).
+	useLayoutEffect( updateProps, [ blockIndex, updateProps ] );
+
+	// Update props when the viewport is resized or the block is resized.
+	useLayoutEffect( () => {
+		if ( ! contentElement || ! selectedBlockElement ) {
+			return;
+		}
+
+		// Update the toolbar props on viewport resize.
+		const contentView = contentElement?.ownerDocument?.defaultView;
+		contentView?.addEventHandler?.( 'resize', updateProps );
+
+		// Update the toolbar props on block resize.
+		let resizeObserver;
+		const blockView = selectedBlockElement?.ownerDocument?.defaultView;
+		if ( blockView.ResizeObserver ) {
+			resizeObserver = new blockView.ResizeObserver( updateProps );
+			resizeObserver.observe( selectedBlockElement );
+		}
+
+		return () => {
+			contentView?.removeEventHandler?.( 'resize', updateProps );
+
+			if ( resizeObserver ) {
+				resizeObserver.disconnect();
+			}
+		};
+	}, [ updateProps, contentElement, selectedBlockElement ] );
+
+	return {
+		...props,
+		ref: popoverRef,
+	};
+}