@wordpress/block-editor 10.0.0 → 10.0.2

package/src/components/inner-blocks/use-inner-block-template-sync.js

@@ -19,7 +19,7 @@ import { store as blockEditorStore } from '../../store';
  * This hook makes sure that a block's inner blocks stay in sync with the given
  * block "template". The template is a block hierarchy to which inner blocks must
  * conform. If the blocks get "out of sync" with the template and the template
- * is meant to be locked (e.g. templateLock = "all" or templateLock = "noContent"),
+ * is meant to be locked (e.g. templateLock = "all" or templateLock = "contentOnly"),
  * then we replace the inner blocks with the correct value after synchronizing it with the template.
  *
  * @param {string}  clientId                       The block client ID.
@@ -47,42 +47,53 @@ export default function useInnerBlockTemplateSync(
 		( select ) => select( blockEditorStore ).getBlocks( clientId ),
 		[ clientId ]
 	);
+	const { getBlocks } = useSelect( blockEditorStore );
 
 	// Maintain a reference to the previous value so we can do a deep equality check.
 	const existingTemplate = useRef( null );
 	useLayoutEffect( () => {
-		// Only synchronize innerBlocks with template if innerBlocks are empty
-		// or a locking "all" or "noContent" exists directly on the block.
-		if (
-			innerBlocks.length === 0 ||
-			templateLock === 'all' ||
-			templateLock === 'noContent'
-		) {
+		// There's an implicit dependency between useInnerBlockTemplateSync and useNestedSettingsUpdate
+		// The former needs to happen after the latter and since the latter is using microtasks to batch updates (performance optimization),
+		// we need to schedule this one in a microtask as well.
+		// Exemple: If you remove queueMicrotask here, ctrl + click to insert quote block won't close the inserter.
+		window.queueMicrotask( () => {
+			// Only synchronize innerBlocks with template if innerBlocks are empty
+			// or a locking "all" or "contentOnly" exists directly on the block.
+			const currentInnerBlocks = getBlocks( clientId );
+			const shouldApplyTemplate =
+				currentInnerBlocks.length === 0 ||
+				templateLock === 'all' ||
+				templateLock === 'contentOnly';
+
 			const hasTemplateChanged = ! isEqual(
 				template,
 				existingTemplate.current
 			);
-			if ( hasTemplateChanged ) {
-				existingTemplate.current = template;
-				const nextBlocks = synchronizeBlocksWithTemplate(
-					innerBlocks,
-					template
+
+			if ( ! shouldApplyTemplate || ! hasTemplateChanged ) {
+				return;
+			}
+
+			existingTemplate.current = template;
+			const nextBlocks = synchronizeBlocksWithTemplate(
+				currentInnerBlocks,
+				template
+			);
+
+			if ( ! isEqual( nextBlocks, currentInnerBlocks ) ) {
+				replaceInnerBlocks(
+					clientId,
+					nextBlocks,
+					currentInnerBlocks.length === 0 &&
+						templateInsertUpdatesSelection &&
+						nextBlocks.length !== 0,
+					// This ensures the "initialPosition" doesn't change when applying the template
+					// If we're supposed to focus the block, we'll focus the first inner block
+					// otherwise, we won't apply any auto-focus.
+					// This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
+					getSelectedBlocksInitialCaretPosition()
 				);
-				if ( ! isEqual( nextBlocks, innerBlocks ) ) {
-					replaceInnerBlocks(
-						clientId,
-						nextBlocks,
-						innerBlocks.length === 0 &&
-							templateInsertUpdatesSelection &&
-							nextBlocks.length !== 0,
-						// This ensures the "initialPosition" doesn't change when applying the template
-						// If we're supposed to focus the block, we'll focus the first inner block
-						// otherwise, we won't apply any auto-focus.
-						// This ensures for instance that the focus stays in the inserter when inserting the "buttons" block.
-						getSelectedBlocksInitialCaretPosition()
-					);
-				}
 			}
-		}
+		} );
 	}, [ innerBlocks, template, templateLock, clientId ] );
 }

package/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo } from '@wordpress/element';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -13,6 +13,8 @@ import { getLayoutType } from '../../layouts';
 
 /** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
 
+const pendingSettingsUpdates = new WeakMap();
+
 /**
  * This hook is a side effect which updates the block-editor store when changes
  * happen to inner block settings. The given props are transformed into a
@@ -46,6 +48,7 @@ export default function useNestedSettingsUpdate(
 	layout
 ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
+	const registry = useRegistry();
 
 	const { blockListSettings, parentLock } = useSelect(
 		( select ) => {
@@ -69,7 +72,7 @@ export default function useNestedSettingsUpdate(
 		const newSettings = {
 			allowedBlocks: _allowedBlocks,
 			templateLock:
-				templateLock === undefined || parentLock === 'noContent'
+				templateLock === undefined || parentLock === 'contentOnly'
 					? parentLock
 					: templateLock,
 		};
@@ -98,7 +101,30 @@ export default function useNestedSettingsUpdate(
 		}
 
 		if ( ! isShallowEqual( blockListSettings, newSettings ) ) {
-			updateBlockListSettings( clientId, newSettings );
+			// Batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// To avoid triggering updateBlockListSettings for each container block
+			// causing X re-renderings for X container blocks,
+			// we batch all the updatedBlockListSettings in a single "data" batch
+			// which results in a single re-render.
+			if ( ! pendingSettingsUpdates.get( registry ) ) {
+				pendingSettingsUpdates.set( registry, [] );
+			}
+			pendingSettingsUpdates
+				.get( registry )
+				.push( [ clientId, newSettings ] );
+			window.queueMicrotask( () => {
+				if ( pendingSettingsUpdates.get( registry )?.length ) {
+					registry.batch( () => {
+						pendingSettingsUpdates
+							.get( registry )
+							.forEach( ( args ) => {
+								updateBlockListSettings( ...args );
+							} );
+						pendingSettingsUpdates.set( registry, [] );
+					} );
+				}
+			} );
 		}
 	}, [
 		clientId,
@@ -112,5 +138,6 @@ export default function useNestedSettingsUpdate(
 		orientation,
 		updateBlockListSettings,
 		layout,
+		registry,
 	] );
 }

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

@@ -99,7 +99,7 @@ function ListViewBranch( props ) {
 			return !! (
 				parentId &&
 				select( blockEditorStore ).getTemplateLock( parentId ) ===
-					'noContent'
+					'contentOnly'
 			);
 		},
 		[ parentId ]

package/src/components/list-view/drop-indicator.js

@@ -68,40 +68,41 @@ export default function ListViewDropIndicator( {
 		};
 	}, [ getDropIndicatorIndent, targetElement ] );
 
-	const getAnchorRect = useCallback( () => {
-		if ( ! targetElement ) {
-			return {};
+	const popoverAnchor = useMemo( () => {
+		const isValidDropPosition =
+			dropPosition === 'top' ||
+			dropPosition === 'bottom' ||
+			dropPosition === 'inside';
+		if ( ! targetElement || ! isValidDropPosition ) {
+			return undefined;
 		}
 
-		const ownerDocument = targetElement.ownerDocument;
-		const rect = targetElement.getBoundingClientRect();
-		const indent = getDropIndicatorIndent();
-
-		const anchorRect = {
-			left: rect.left + indent,
-			right: rect.right,
-			width: 0,
-			height: 0,
-			ownerDocument,
+		return {
+			ownerDocument: targetElement.ownerDocument,
+			getBoundingClientRect() {
+				const rect = targetElement.getBoundingClientRect();
+				const indent = getDropIndicatorIndent();
+
+				const left = rect.left + indent;
+				const right = rect.right;
+				let top = 0;
+				let bottom = 0;
+
+				if ( dropPosition === 'top' ) {
+					top = rect.top;
+					bottom = rect.top;
+				} else {
+					// `dropPosition` is either `bottom` or `inside`
+					top = rect.bottom;
+					bottom = rect.bottom;
+				}
+
+				const width = right - left;
+				const height = bottom - top;
+
+				return new window.DOMRect( left, top, width, height );
+			},
 		};
-
-		if ( dropPosition === 'top' ) {
-			return {
-				...anchorRect,
-				top: rect.top,
-				bottom: rect.top,
-			};
-		}
-
-		if ( dropPosition === 'bottom' || dropPosition === 'inside' ) {
-			return {
-				...anchorRect,
-				top: rect.bottom,
-				bottom: rect.bottom,
-			};
-		}
-
-		return {};
 	}, [ targetElement, dropPosition, getDropIndicatorIndent ] );
 
 	if ( ! targetElement ) {
@@ -111,7 +112,7 @@ export default function ListViewDropIndicator( {
 	return (
 		<Popover
 			animate={ false }
-			getAnchorRect={ getAnchorRect }
+			anchor={ popoverAnchor }
 			focusOnMount={ false }
 			className="block-editor-list-view-drop-indicator"
 		>

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

@@ -6,7 +6,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	isCollapsed,
 	getActiveFormats,
-	useAnchorRef,
+	useAnchor,
 	store as richTextStore,
 } from '@wordpress/rich-text';
 
@@ -17,28 +17,32 @@ import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
 import { store as blockEditorStore } from '../../store';
 
-function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
+function InlineSelectionToolbar( {
+	value,
+	editableContentElement,
+	activeFormats,
+} ) {
 	const lastFormat = activeFormats[ activeFormats.length - 1 ];
 	const lastFormatType = lastFormat?.type;
 	const settings = useSelect(
 		( select ) => select( richTextStore ).getFormatType( lastFormatType ),
 		[ lastFormatType ]
 	);
-	const selectionRef = useAnchorRef( {
-		ref: anchorRef,
+	const popoverAnchor = useAnchor( {
+		editableContentElement,
 		value,
 		settings,
 	} );
 
-	return <InlineToolbar anchorRef={ selectionRef } />;
+	return <InlineToolbar popoverAnchor={ popoverAnchor } />;
 }
 
-function InlineToolbar( { anchorRef } ) {
+function InlineToolbar( { popoverAnchor } ) {
 	return (
 		<Popover
 			position="top center"
 			focusOnMount={ false }
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			className="block-editor-rich-text__inline-format-toolbar"
 			__unstableSlotName="block-toolbar"
 		>
@@ -51,14 +55,18 @@ function InlineToolbar( { anchorRef } ) {
 	);
 }
 
-const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
+const FormatToolbarContainer = ( {
+	inline,
+	editableContentElement,
+	value,
+} ) => {
 	const hasInlineToolbar = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().hasInlineToolbar,
 		[]
 	);
 
 	if ( inline ) {
-		return <InlineToolbar anchorRef={ anchorRef } />;
+		return <InlineToolbar popoverAnchor={ editableContentElement } />;
 	}
 
 	if ( hasInlineToolbar ) {
@@ -70,7 +78,7 @@ const FormatToolbarContainer = ( { inline, anchorRef, value } ) => {
 
 		return (
 			<InlineSelectionToolbar
-				anchorRef={ anchorRef }
+				editableContentElement={ editableContentElement }
 				value={ value }
 				activeFormats={ activeFormats }
 			/>

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

@@ -328,7 +328,7 @@ function RichTextWrapper(
 	}
 
 	function onFocus() {
-		anchorRef.current.focus();
+		anchorRef.current?.focus();
 	}
 
 	const TagName = tagName;
@@ -354,7 +354,7 @@ function RichTextWrapper(
 			{ isSelected && hasFormats && (
 				<FormatToolbarContainer
 					inline={ inlineToolbar }
-					anchorRef={ anchorRef }
+					editableContentElement={ anchorRef.current }
 					value={ value }
 				/>
 			) }

package/src/components/spacing-sizes-control/linked-button.js

@@ -6,16 +6,15 @@ import { __ } from '@wordpress/i18n';
 import { Button, Tooltip } from '@wordpress/components';
 
 export default function LinkedButton( { isLinked, onClick } ) {
-	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
 	return (
 		<Tooltip text={ label }>
 			<span className="component-spacing-sizes-control__linked-button">
 				<Button
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 					onClick={ onClick }
 				/>

package/src/components/spacing-sizes-control/style.scss

@@ -46,10 +46,13 @@
 		grid-column: 2 / 2;
 		grid-row: 1 / 1;
 		justify-self: end;
-		margin-right: $grid-unit-05;
 		padding: 0;
 	}
 
+	.component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
+		margin-right: $grid-unit-05;
+	}
+
 	.components-spacing-sizes-control__custom-toggle-single {
 		grid-column: 3 / 3;
 		justify-self: end;

package/src/components/spacing-sizes-control/utils.js

@@ -211,12 +211,5 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty(
-		Object.values( values ).filter(
-			// Switching units when input is empty causes values only
-			// containing units. This gives false positive on mixed values
-			// unless filtered.
-			( value ) => !! value && /\d/.test( value )
-		)
-	);
+	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
 }

package/src/components/text-decoration-control/index.js

@@ -6,14 +6,16 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-} from '@wordpress/components';
-import { formatStrikethrough, formatUnderline } from '@wordpress/icons';
+import { BaseControl, Button } from '@wordpress/components';
+import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 const TEXT_DECORATIONS = [
+	{
+		name: __( 'None' ),
+		value: 'none',
+		icon: reset,
+	},
 	{
 		name: __( 'Underline' ),
 		value: 'underline',
@@ -40,30 +42,36 @@ export default function TextDecorationControl( {
 	value,
 	onChange,
 	className,
-	...props
 } ) {
 	return (
-		<ToggleGroupControl
-			{ ...props }
+		<fieldset
 			className={ classnames(
 				'block-editor-text-decoration-control',
 				className
 			) }
-			__experimentalIsBorderless
-			label={ __( 'Decoration' ) }
-			value={ value }
-			onChange={ onChange }
 		>
-			{ TEXT_DECORATIONS.map( ( textDecoration ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textDecoration.value }
-						value={ textDecoration.value }
-						icon={ textDecoration.icon }
-						label={ textDecoration.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Decoration' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-text-decoration-control__buttons">
+				{ TEXT_DECORATIONS.map( ( textDecoration ) => {
+					return (
+						<Button
+							key={ textDecoration.value }
+							icon={ textDecoration.icon }
+							label={ textDecoration.name }
+							isPressed={ textDecoration.value === value }
+							onClick={ () => {
+								onChange(
+									textDecoration.value === value
+										? undefined
+										: textDecoration.value
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
 	);
 }

package/src/components/text-decoration-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-text-decoration-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-text-decoration-control__buttons {
+		// 4px of padding makes the row 40px high, same as an input.
+		padding: $grid-unit-05 0;
+		display: flex;
+	}
+
+	.components-button.has-icon {
+		height: $grid-unit-40;
+		margin-right: $grid-unit-05;
+		min-width: $grid-unit-40;
+		padding: 0;
+	}
+}

package/src/components/text-transform-control/index.js

@@ -1,21 +1,26 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
-} from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import {
+	reset,
 	formatCapitalize,
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
 
 const TEXT_TRANSFORMS = [
+	{
+		name: __( 'None' ),
+		value: 'none',
+		icon: reset,
+	},
 	{
 		name: __( 'Uppercase' ),
 		value: 'uppercase',
@@ -36,32 +41,43 @@ const TEXT_TRANSFORMS = [
 /**
  * Control to facilitate text transform selections.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected text transform.
- * @param {Function} props.onChange Handles change in text transform selection.
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className Class name to add to the control.
+ * @param {string}   props.value     Currently selected text transform.
+ * @param {Function} props.onChange  Handles change in text transform selection.
  *
  * @return {WPElement} Text transform control.
  */
-export default function TextTransformControl( { value, onChange, ...props } ) {
+export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<ToggleGroupControl
-			{ ...props }
-			className="block-editor-text-transform-control"
-			__experimentalIsBorderless
-			label={ __( 'Letter case' ) }
-			value={ value }
-			onChange={ onChange }
+		<fieldset
+			className={ classnames(
+				'block-editor-text-transform-control',
+				className
+			) }
 		>
-			{ TEXT_TRANSFORMS.map( ( textTransform ) => {
-				return (
-					<ToggleGroupControlOptionIcon
-						key={ textTransform.value }
-						value={ textTransform.value }
-						icon={ textTransform.icon }
-						label={ textTransform.name }
-					/>
-				);
-			} ) }
-		</ToggleGroupControl>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Letter case' ) }
+			</BaseControl.VisualLabel>
+			<div className="block-editor-text-transform-control__buttons">
+				{ TEXT_TRANSFORMS.map( ( textTransform ) => {
+					return (
+						<Button
+							key={ textTransform.value }
+							icon={ textTransform.icon }
+							label={ textTransform.name }
+							isPressed={ textTransform.value === value }
+							onClick={ () => {
+								onChange(
+									textTransform.value === value
+										? undefined
+										: textTransform.value
+								);
+							} }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
 	);
 }

package/src/components/text-transform-control/style.scss

@@ -0,0 +1,18 @@
+.block-editor-text-transform-control {
+	border: 0;
+	margin: 0;
+	padding: 0;
+
+	.block-editor-text-transform-control__buttons {
+		// 4px of padding makes the row 40px high, same as an input.
+		padding: $grid-unit-05 0;
+		display: flex;
+	}
+
+	.components-button.has-icon {
+		height: $grid-unit-40;
+		margin-right: $grid-unit-05;
+		min-width: $grid-unit-40;
+		padding: 0;
+	}
+}

package/src/components/url-popover/image-url-input-ui.js

@@ -51,7 +51,9 @@ const ImageURLInputUI = ( {
 	rel,
 } ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
-	const buttonRef = useRef( null );
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
 	const openLinkUI = useCallback( () => {
 		setIsOpen( true );
 	} );
@@ -246,11 +248,11 @@ const ImageURLInputUI = ( {
 				label={ url ? __( 'Edit link' ) : __( 'Insert link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
-				ref={ buttonRef }
+				ref={ setPopoverAnchor }
 			/>
 			{ isOpen && (
 				<URLPopover
-					anchorRef={ buttonRef }
+					anchor={ popoverAnchor }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
 					renderSettings={ () => advancedOptions }

package/src/components/use-block-drop-zone/index.js

@@ -101,7 +101,7 @@ export default function useBlockDropZone( {
 			} = select( blockEditorStore );
 			const templateLock = getTemplateLock( targetRootClientId );
 			return (
-				[ 'all', 'noContent' ].some(
+				[ 'all', 'contentOnly' ].some(
 					( lock ) => lock === templateLock
 				) ||
 				__unstableHasActiveBlockOverlayActive( targetRootClientId ) ||

package/src/hooks/content-lock-ui.js

@@ -72,7 +72,7 @@ export const withBlockControls = createHigherOrderComponent(
 			__unstableSetTemporarilyEditingAsBlocks,
 		} = useDispatch( blockEditorStore );
 		const isContentLocked =
-			! isLockedByParent && templateLock === 'noContent';
+			! isLockedByParent && templateLock === 'contentOnly';
 		const {
 			__unstableMarkNextChangeAsNotPersistent,
 			updateBlockAttributes,
@@ -81,11 +81,11 @@ export const withBlockControls = createHigherOrderComponent(
 		const stopEditingAsBlock = useCallback( () => {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateBlockAttributes( props.clientId, {
-				templateLock: 'noContent',
+				templateLock: 'contentOnly',
 			} );
 			updateBlockListSettings( props.clientId, {
 				...getBlockListSettings( props.clientId ),
-				templateLock: 'noContent',
+				templateLock: 'contentOnly',
 			} );
 			updateSettings( { focusMode: focusModeToRevert.current } );
 			__unstableSetTemporarilyEditingAsBlocks();