@wordpress/block-editor 10.0.2 → 10.1.0

package/build-style/style-rtl.css

@@ -1045,8 +1045,8 @@
     min-width: 0 !important;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
-    height: 100%;
-    width: 100%;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1066,9 +1066,6 @@
     padding-left: 0 !important;
     overflow: hidden;
   }
-  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > *::before {
-    height: 100%;
-  }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     right: 5px;
   }
@@ -3640,6 +3637,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   width: 100%;
 }
 .block-editor-warning .block-editor-warning__actions {
+  align-items: center;
   display: flex;
   margin-top: 1em;
 }

package/build-style/style.css

@@ -1045,8 +1045,8 @@
     min-width: 0 !important;
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container > *::before {
-    height: 100%;
-    width: 100%;
+    height: calc(100% - 4px);
+    width: calc(100% - 4px);
   }
   .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     top: 5px;
@@ -1066,9 +1066,6 @@
     padding-right: 0 !important;
     overflow: hidden;
   }
-  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > *::before {
-    height: 100%;
-  }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     left: 5px;
   }
@@ -3640,6 +3637,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   width: 100%;
 }
 .block-editor-warning .block-editor-warning__actions {
+  align-items: center;
   display: flex;
   margin-top: 1em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.0.2",
+	"version": "10.1.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.17.1",
-		"@wordpress/api-fetch": "^6.14.1",
-		"@wordpress/blob": "^3.17.1",
-		"@wordpress/blocks": "^11.16.2",
-		"@wordpress/components": "^21.0.2",
-		"@wordpress/compose": "^5.15.2",
-		"@wordpress/data": "^7.1.2",
-		"@wordpress/date": "^4.17.1",
-		"@wordpress/deprecated": "^3.17.1",
-		"@wordpress/dom": "^3.17.2",
-		"@wordpress/element": "^4.15.1",
-		"@wordpress/hooks": "^3.17.1",
-		"@wordpress/html-entities": "^3.17.1",
-		"@wordpress/i18n": "^4.17.1",
-		"@wordpress/icons": "^9.8.1",
-		"@wordpress/is-shallow-equal": "^4.17.1",
-		"@wordpress/keyboard-shortcuts": "^3.15.2",
-		"@wordpress/keycodes": "^3.17.1",
-		"@wordpress/notices": "^3.17.2",
-		"@wordpress/rich-text": "^5.15.2",
-		"@wordpress/shortcode": "^3.17.1",
-		"@wordpress/style-engine": "^1.0.1",
-		"@wordpress/token-list": "^2.17.1",
-		"@wordpress/url": "^3.18.1",
-		"@wordpress/warning": "^2.17.1",
-		"@wordpress/wordcount": "^3.17.1",
+		"@wordpress/a11y": "^3.18.0",
+		"@wordpress/api-fetch": "^6.15.0",
+		"@wordpress/blob": "^3.18.0",
+		"@wordpress/blocks": "^11.17.0",
+		"@wordpress/components": "^21.1.0",
+		"@wordpress/compose": "^5.16.0",
+		"@wordpress/data": "^7.2.0",
+		"@wordpress/date": "^4.18.0",
+		"@wordpress/deprecated": "^3.18.0",
+		"@wordpress/dom": "^3.18.0",
+		"@wordpress/element": "^4.16.0",
+		"@wordpress/hooks": "^3.18.0",
+		"@wordpress/html-entities": "^3.18.0",
+		"@wordpress/i18n": "^4.18.0",
+		"@wordpress/icons": "^9.9.0",
+		"@wordpress/is-shallow-equal": "^4.18.0",
+		"@wordpress/keyboard-shortcuts": "^3.16.0",
+		"@wordpress/keycodes": "^3.18.0",
+		"@wordpress/notices": "^3.18.0",
+		"@wordpress/rich-text": "^5.16.0",
+		"@wordpress/shortcode": "^3.18.0",
+		"@wordpress/style-engine": "^1.1.0",
+		"@wordpress/token-list": "^2.18.0",
+		"@wordpress/url": "^3.19.0",
+		"@wordpress/warning": "^2.18.0",
+		"@wordpress/wordcount": "^3.18.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6021282457317c7e12dcc3a3f02c9ac28e16a30"
+	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
 }

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

@@ -1,11 +1,17 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
  */
+import {
+	registerBlockType,
+	unregisterBlockType,
+	getBlockTypes,
+} from '@wordpress/blocks';
+import { SlotFillProvider, ToolbarGroup } from '@wordpress/components';
 import { alignCenter, alignLeft, alignRight } from '@wordpress/icons';
 
 /**
@@ -33,15 +39,85 @@ describe( 'BlockControls', () => {
 		},
 	];
 
+	beforeEach( () => {
+		const edit = ( { children } ) => <>{ children }</>;
+
+		registerBlockType( 'core/test-block', {
+			save: () => {},
+			category: 'text',
+			title: 'block title',
+			edit,
+		} );
+	} );
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
 	it( 'should render a dynamic toolbar of controls', () => {
-		const wrapper = shallow(
-			<BlockEdit isSelected>
-				<BlockControls controls={ controls }>
-					<p>Child</p>
-				</BlockControls>
-			</BlockEdit>
+		render(
+			<SlotFillProvider>
+				<BlockEdit name="core/test-block" isSelected>
+					<BlockControls controls={ controls }>
+						<p>Child</p>
+					</BlockControls>
+				</BlockEdit>
+				<BlockControls.Slot />
+			</SlotFillProvider>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getAllByRole( 'button', { name: /^Align [\w]+/ } )
+		).toHaveLength( controls.length );
+
+		controls.forEach( ( { title, align } ) => {
+			const control = screen.getByRole( 'button', {
+				name: title,
+			} );
+			expect( control ).toBeVisible();
+			expect( control ).toHaveAttribute( 'align', align );
+		} );
+	} );
+
+	it( 'should render its children', () => {
+		render(
+			<SlotFillProvider>
+				<BlockEdit name="core/test-block" isSelected>
+					<BlockControls controls={ controls }>
+						<p>Child</p>
+					</BlockControls>
+				</BlockEdit>
+				<BlockControls.Slot />
+			</SlotFillProvider>
+		);
+
+		expect( screen.getByText( 'Child' ) ).toBeVisible();
+	} );
+
+	it( 'should a dynamic toolbar when passed as children', () => {
+		render(
+			<SlotFillProvider>
+				<BlockEdit name="core/test-block" isSelected>
+					<BlockControls>
+						<ToolbarGroup controls={ controls } />
+					</BlockControls>
+				</BlockEdit>
+				<BlockControls.Slot />
+			</SlotFillProvider>
+		);
+
+		expect(
+			screen.getAllByRole( 'button', { name: /^Align [\w]+/ } )
+		).toHaveLength( controls.length );
+
+		controls.forEach( ( { title, align } ) => {
+			const control = screen.getByRole( 'button', {
+				name: title,
+			} );
+			expect( control ).toBeVisible();
+			expect( control ).toHaveAttribute( 'align', align );
+		} );
 	} );
 } );

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

@@ -6,9 +6,23 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { AsyncModeProvider, useSelect, useDispatch } from '@wordpress/data';
-import { useViewportMatch, useMergeRefs } from '@wordpress/compose';
-import { createContext, useState, useMemo } from '@wordpress/element';
+import {
+	AsyncModeProvider,
+	useSelect,
+	useDispatch,
+	useRegistry,
+} from '@wordpress/data';
+import {
+	useViewportMatch,
+	useMergeRefs,
+	useDebounce,
+} from '@wordpress/compose';
+import {
+	createContext,
+	useState,
+	useMemo,
+	useCallback,
+} from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,6 +44,7 @@ import {
 const elementContext = createContext();
 
 export const IntersectionObserver = createContext();
+const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
 	const [ element, setElement ] = useState();
@@ -47,7 +62,24 @@ function Root( { className, ...settings } ) {
 		},
 		[]
 	);
+	const registry = useRegistry();
 	const { setBlockVisibility } = useDispatch( blockEditorStore );
+
+	const delayedBlockVisibilityUpdates = useDebounce(
+		useCallback( () => {
+			const updates = {};
+			pendingBlockVisibilityUpdatesPerRegistry
+				.get( registry )
+				.forEach( ( [ id, isIntersecting ] ) => {
+					updates[ id ] = isIntersecting;
+				} );
+			setBlockVisibility( updates );
+		}, [ registry ] ),
+		300,
+		{
+			trailing: true,
+		}
+	);
 	const intersectionObserver = useMemo( () => {
 		const { IntersectionObserver: Observer } = window;
 
@@ -56,12 +88,16 @@ function Root( { className, ...settings } ) {
 		}
 
 		return new Observer( ( entries ) => {
-			const updates = {};
+			if ( ! pendingBlockVisibilityUpdatesPerRegistry.get( registry ) ) {
+				pendingBlockVisibilityUpdatesPerRegistry.set( registry, [] );
+			}
 			for ( const entry of entries ) {
 				const clientId = entry.target.getAttribute( 'data-block' );
-				updates[ clientId ] = entry.isIntersecting;
+				pendingBlockVisibilityUpdatesPerRegistry
+					.get( registry )
+					.push( [ clientId, entry.isIntersecting ] );
 			}
-			setBlockVisibility( updates );
+			delayedBlockVisibilityUpdates();
 		} );
 	}, [] );
 	const innerBlocksProps = useInnerBlocksProps(

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

@@ -11,6 +11,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
@@ -77,6 +78,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	} = useSelect(
 		( select ) => {
 			const {
+				getBlockAttributes,
 				getBlockIndex,
 				getBlockMode,
 				getBlockName,
@@ -87,19 +89,22 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
 			} = select( blockEditorStore );
+			const { getActiveBlockVariation } = select( blocksStore );
 			const isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
 				isBlockMultiSelected( clientId ) ||
 				isAncestorMultiSelected( clientId );
 			const blockName = getBlockName( clientId );
 			const blockType = getBlockType( blockName );
+			const attributes = getBlockAttributes( clientId );
+			const match = getActiveBlockVariation( blockName, attributes );
 
 			return {
 				index: getBlockIndex( clientId ),
 				mode: getBlockMode( clientId ),
 				name: blockName,
 				blockApiVersion: blockType?.apiVersion || 1,
-				blockTitle: blockType?.title,
+				blockTitle: match?.title || blockType?.title,
 				isPartOfSelection: isSelected || isPartOfMultiSelection,
 				adjustScrolling:
 					isSelected || isFirstMultiSelectedBlock( clientId ),

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

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRefEffect } from '@wordpress/compose';
-
+import { useRefEffect, useDebounce } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
@@ -33,6 +32,10 @@ export function useInBetweenInserter() {
 	const { showInsertionPoint, hideInsertionPoint } =
 		useDispatch( blockEditorStore );
 
+	const delayedShowInsertionPoint = useDebounce( showInsertionPoint, 500, {
+		trailing: true,
+	} );
+
 	return useRefEffect(
 		( node ) => {
 			if ( isInBetweenInserterDisabled ) {
@@ -53,6 +56,7 @@ export function useInBetweenInserter() {
 						'block-editor-block-list__layout'
 					)
 				) {
+					delayedShowInsertionPoint.cancel();
 					if ( isBlockInsertionPointVisible() ) {
 						hideInsertionPoint();
 					}
@@ -134,6 +138,7 @@ export function useInBetweenInserter() {
 						( event.clientX > elementRect.right ||
 							event.clientX < elementRect.left ) )
 				) {
+					delayedShowInsertionPoint.cancel();
 					if ( isBlockInsertionPointVisible() ) {
 						hideInsertionPoint();
 					}
@@ -145,13 +150,14 @@ export function useInBetweenInserter() {
 				// Don't show the in-between inserter before the first block in
 				// the list (preserves the original behaviour).
 				if ( index === 0 ) {
+					delayedShowInsertionPoint.cancel();
 					if ( isBlockInsertionPointVisible() ) {
 						hideInsertionPoint();
 					}
 					return;
 				}
 
-				showInsertionPoint( rootClientId, index, {
+				delayedShowInsertionPoint( rootClientId, index, {
 					__unstableWithInserter: true,
 				} );
 			}

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

@@ -15,8 +15,8 @@
 
 				// Focus style.
 				&::before {
-					height: 100%;
-					width: 100%;
+					height: calc(100% - 4px);
+					width: calc(100% - 4px);
 				}
 			}
 
@@ -40,11 +40,6 @@
 				padding-left: 0 !important;
 				padding-right: 0 !important;
 				overflow: hidden;
-
-				// Focus style.
-				&::before {
-					height: 100%;
-				}
 			}
 
 			.block-editor-block-mover-button.is-up-button svg {

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

@@ -23,6 +23,8 @@ import { store as blockEditorStore } from '../../store';
 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;
+
 export const InsertionPointOpenRef = createContext();
 
 function BlockPopoverInbetween( {
@@ -34,8 +36,9 @@ function BlockPopoverInbetween( {
 	...props
 } ) {
 	// This is a temporary hack to get the inbetween inserter to recompute properly.
-	const [ positionRecompute, forceRecompute ] = useReducer(
-		( s ) => s + 1,
+	const [ popoverRecomputeCounter, forcePopoverRecompute ] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
 		0
 	);
 
@@ -66,7 +69,14 @@ function BlockPopoverInbetween( {
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
-		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
+		if (
+			// popoverRecomputeCounter 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.
+			popoverRecomputeCounter < 0 ||
+			( ! previousElement && ! nextElement ) ||
+			! isVisible
+		) {
 			return {};
 		}
 
@@ -102,12 +112,19 @@ function BlockPopoverInbetween( {
 		previousElement,
 		nextElement,
 		isVertical,
-		positionRecompute,
+		popoverRecomputeCounter,
 		isVisible,
 	] );
 
 	const popoverAnchor = useMemo( () => {
-		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
+		if (
+			// popoverRecomputeCounter 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.
+			popoverRecomputeCounter < 0 ||
+			( ! previousElement && ! nextElement ) ||
+			! isVisible
+		) {
 			return undefined;
 		}
 
@@ -161,7 +178,7 @@ function BlockPopoverInbetween( {
 	}, [
 		previousElement,
 		nextElement,
-		positionRecompute,
+		popoverRecomputeCounter,
 		isVertical,
 		isVisible,
 	] );
@@ -169,11 +186,18 @@ function BlockPopoverInbetween( {
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
 	// This is only needed for a smooth transition when moving blocks.
+	// When blocks are moved up/down, their position can be set 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 ( ! previousElement ) {
 			return;
 		}
-		const observer = new window.MutationObserver( forceRecompute );
+		const observer = new window.MutationObserver( forcePopoverRecompute );
 		observer.observe( previousElement, { attributes: true } );
 
 		return () => {
@@ -185,7 +209,7 @@ function BlockPopoverInbetween( {
 		if ( ! nextElement ) {
 			return;
 		}
-		const observer = new window.MutationObserver( forceRecompute );
+		const observer = new window.MutationObserver( forcePopoverRecompute );
 		observer.observe( nextElement, { attributes: true } );
 
 		return () => {
@@ -199,12 +223,12 @@ function BlockPopoverInbetween( {
 		}
 		previousElement.ownerDocument.defaultView.addEventListener(
 			'resize',
-			forceRecompute
+			forcePopoverRecompute
 		);
 		return () => {
 			previousElement.ownerDocument.defaultView.removeEventListener(
 				'resize',
-				forceRecompute
+				forcePopoverRecompute
 			);
 		};
 	}, [ previousElement ] );

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;