@wordpress/block-editor 9.0.0 → 9.1.0

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
@@ -18,7 +18,6 @@ import { useViewportMatch } from '@wordpress/compose';
  */
 import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
-import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 
@@ -77,7 +76,6 @@ function SelectedBlockPopover( {
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isToolbarForced = useRef( false );
-	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
@@ -119,14 +117,6 @@ function SelectedBlockPopover( {
 		return null;
 	}
 
-	function onFocus() {
-		setIsInserterShown( true );
-	}
-
-	function onBlur() {
-		setIsInserterShown( false );
-	}
-
 	return (
 		<BlockPopover
 			clientId={ capturingClientId || clientId }
@@ -137,31 +127,6 @@ function SelectedBlockPopover( {
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 		>
-			{ shouldShowContextualToolbar && (
-				<div
-					onFocus={ onFocus }
-					onBlur={ onBlur }
-					// While ideally it would be enough to capture the
-					// bubbling focus event from the Inserter, due to the
-					// characteristics of click focusing of `button`s in
-					// Firefox and Safari, it is not reliable.
-					//
-					// See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-					tabIndex={ -1 }
-					className={ classnames(
-						'block-editor-block-list__block-popover-inserter',
-						{
-							'is-visible': isInserterShown,
-						}
-					) }
-				>
-					<Inserter
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-						__experimentalIsQuick
-					/>
-				</div>
-			) }
 			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced

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

@@ -42,20 +42,9 @@
 	left: calc(50% - #{$button-size-small * 0.5});
 }
 
-.block-editor-block-list__block-popover-inserter {
-	position: absolute;
-	top: -9999em;
-	margin-bottom: $block-padding;
-
-	&.is-visible {
-		position: static;
-	}
-}
-
 // Sibling inserter / "inbetweenserter".
 .block-editor-default-block-appender,
-.block-editor-block-list__insertion-point-inserter,
-.block-editor-block-list__block-popover-inserter {
+.block-editor-block-list__insertion-point-inserter {
 	.block-editor-inserter__toggle.components-button.has-icon {
 		// Basic look
 		background: $gray-900;

package/src/components/border-radius-control/input-controls.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	Tooltip,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const CORNERS = {
@@ -39,16 +42,21 @@ export default function BoxInputControls( {
 			  };
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	// Tooltip rendering also requires the UnitControl to be wrapped. See:
+	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
 			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<UnitControl
-					{ ...props }
-					key={ key }
-					aria-label={ label }
-					value={ values[ key ] }
-					onChange={ createHandleOnChange( key ) }
-				/>
+				<Tooltip text={ label } position="top" key={ key }>
+					<div className="components-border-radius-control__tooltip-wrapper">
+						<UnitControl
+							{ ...props }
+							aria-label={ label }
+							value={ values[ key ] }
+							onChange={ createHandleOnChange( key ) }
+						/>
+					</div>
+				</Tooltip>
 			) ) }
 		</div>
 	);

package/src/components/border-radius-control/style.scss

@@ -13,7 +13,7 @@
 		> .components-unit-control-wrapper {
 			width: 110px;
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-10 };
+			margin-right: #{ $grid-unit-15 };
 			flex-shrink: 0;
 		}
 
@@ -41,7 +41,7 @@
 		width: 70%;
 		flex-wrap: wrap;
 
-		.components-unit-control-wrapper {
+		.components-border-radius-control__tooltip-wrapper {
 			width: calc(50% - #{ $grid-unit-10 });
 			margin-bottom: $grid-unit-10;
 			margin-right: $grid-unit-10;
@@ -52,6 +52,7 @@
 		display: flex;
 		justify-content: center;
 		margin-left: 2px;
+		margin-top: 3px;
 
 		svg {
 			margin-right: 0;

package/src/components/colors-gradients/dropdown.js

@@ -7,12 +7,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
-	__experimentalHStack as HStack,
-	FlexItem,
+	Button,
 	ColorIndicator,
 	Dropdown,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
 /**
@@ -20,77 +22,169 @@ import {
  */
 import ColorGradientControl from './control';
 
+// Conditionally wraps the `ColorGradientSettingsDropdown` color controls in an
+// `ItemGroup` allowing for a standalone group of controls to be
+// rendered semantically.
+const WithItemGroup = ( { __experimentalIsItemGroup, children } ) => {
+	if ( ! __experimentalIsItemGroup ) {
+		return children;
+	}
+
+	return (
+		<ItemGroup
+			isBordered
+			isSeparated
+			className="block-editor-panel-color-gradient-settings__item-group"
+		>
+			{ children }
+		</ItemGroup>
+	);
+};
+
+// When the `ColorGradientSettingsDropdown` controls are being rendered to a
+// `ToolsPanel` they must be wrapped in a `ToolsPanelItem`.
+const WithToolsPanelItem = ( {
+	__experimentalIsItemGroup,
+	settings,
+	children,
+	...props
+} ) => {
+	if ( __experimentalIsItemGroup ) {
+		return children;
+	}
+
+	return (
+		<ToolsPanelItem
+			hasValue={ settings.hasValue }
+			label={ settings.label }
+			onDeselect={ settings.onDeselect }
+			isShownByDefault={ settings.isShownByDefault }
+			resetAllFilter={ settings.resetAllFilter }
+			{ ...props }
+			className="block-editor-tools-panel-color-gradient-settings__item"
+		>
+			{ children }
+		</ToolsPanelItem>
+	);
+};
+
+const LabeledColorIndicator = ( { colorValue, label } ) => (
+	<HStack justify="flex-start">
+		<ColorIndicator
+			className="block-editor-panel-color-gradient-settings__color-indicator"
+			colorValue={ colorValue }
+		/>
+		<FlexItem>{ label }</FlexItem>
+	</HStack>
+);
+
+// Renders a color dropdown's toggle as an `Item` if it is within an `ItemGroup`
+// or as a `Button` if it isn't e.g. the controls are being rendered in
+// a `ToolsPanel`.
+const renderToggle = ( settings ) => ( { onToggle, isOpen } ) => {
+	const { __experimentalIsItemGroup, colorValue, label } = settings;
+
+	// Determine component, `Item` or `Button`, to wrap color indicator with.
+	const ToggleComponent = __experimentalIsItemGroup ? Item : Button;
+	const toggleClassName = __experimentalIsItemGroup
+		? 'block-editor-panel-color-gradient-settings__item'
+		: 'block-editor-panel-color-gradient-settings__dropdown';
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames( toggleClassName, { 'is-open': isOpen } ),
+		'aria-expanded': __experimentalIsItemGroup ? undefined : isOpen,
+	};
+
+	return (
+		<ToggleComponent { ...toggleProps }>
+			<LabeledColorIndicator colorValue={ colorValue } label={ label } />
+		</ToggleComponent>
+	);
+};
+
+// Renders a collection of color controls as dropdowns. Depending upon the
+// context in which these dropdowns are being rendered, they may be wrapped
+// in an `ItemGroup` with each dropdown's toggle as an `Item`, or alternatively,
+// the may be individually wrapped in a `ToolsPanelItem` with the toggle as
+// a regular `Button`.
+//
+// For more context see: https://github.com/WordPress/gutenberg/pull/40084
 export default function ColorGradientSettingsDropdown( {
 	colors,
-	gradients,
 	disableCustomColors,
 	disableCustomGradients,
-	__experimentalHasMultipleOrigins,
-	__experimentalIsRenderedInSidebar,
 	enableAlpha,
+	gradients,
+	__experimentalIsItemGroup = true,
 	settings,
+	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
+	...props
 } ) {
-	let dropdownPosition;
+	const dropdownClassName = __experimentalIsItemGroup
+		? 'block-editor-panel-color-gradient-settings__dropdown'
+		: 'block-editor-tools-panel-color-gradient-settings__dropdown';
+	let popoverProps;
 	if ( __experimentalIsRenderedInSidebar ) {
-		dropdownPosition = 'bottom left';
+		popoverProps = {
+			placement: 'left-start',
+			offset: 36,
+		};
 	}
 
 	return (
-		<ItemGroup
-			isBordered
-			isSeparated
-			className="block-editor-panel-color-gradient-settings__item-group"
-		>
-			{ settings.map(
-				( setting, index ) =>
+		// Only wrap with `ItemGroup` if these controls are being rendered
+		// semantically.
+		<WithItemGroup __experimentalIsItemGroup={ __experimentalIsItemGroup }>
+			{ settings.map( ( setting, index ) => {
+				const controlProps = {
+					clearable: __experimentalIsItemGroup ? undefined : false,
+					colorValue: setting.colorValue,
+					colors,
+					disableCustomColors,
+					disableCustomGradients,
+					enableAlpha,
+					gradientValue: setting.gradientValue,
+					gradients,
+					label: setting.label,
+					onColorChange: setting.onColorChange,
+					onGradientChange: setting.onGradientChange,
+					showTitle: false,
+					__experimentalHasMultipleOrigins,
+					__experimentalIsRenderedInSidebar,
+					...setting,
+				};
+				const toggleSettings = {
+					colorValue: setting.gradientValue ?? setting.colorValue,
+					__experimentalIsItemGroup,
+					label: setting.label,
+				};
+
+				return (
 					setting && (
-						<Dropdown
+						// If not in an `ItemGroup` wrap the dropdown in a
+						// `ToolsPanelItem`
+						<WithToolsPanelItem
 							key={ index }
-							position={ dropdownPosition }
-							className="block-editor-panel-color-gradient-settings__dropdown"
-							contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
-							renderToggle={ ( { isOpen, onToggle } ) => {
-								return (
-									<Item
-										onClick={ onToggle }
-										className={ classnames(
-											'block-editor-panel-color-gradient-settings__item',
-											{ 'is-open': isOpen }
-										) }
-									>
-										<HStack justify="flex-start">
-											<ColorIndicator
-												className="block-editor-panel-color-gradient-settings__color-indicator"
-												colorValue={
-													setting.gradientValue ??
-													setting.colorValue
-												}
-											/>
-											<FlexItem>
-												{ setting.label }
-											</FlexItem>
-										</HStack>
-									</Item>
-								);
-							} }
-							renderContent={ () => (
-								<ColorGradientControl
-									showTitle={ false }
-									{ ...{
-										colors,
-										gradients,
-										disableCustomColors,
-										disableCustomGradients,
-										__experimentalHasMultipleOrigins,
-										__experimentalIsRenderedInSidebar,
-										enableAlpha,
-										...setting,
-									} }
-								/>
-							) }
-						/>
+							__experimentalIsItemGroup={
+								__experimentalIsItemGroup
+							}
+							settings={ setting }
+							{ ...props }
+						>
+							<Dropdown
+								popoverProps={ popoverProps }
+								className={ dropdownClassName }
+								contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
+								renderToggle={ renderToggle( toggleSettings ) }
+								renderContent={ () => (
+									<ColorGradientControl { ...controlProps } />
+								) }
+							/>
+						</WithToolsPanelItem>
 					)
-			) }
-		</ItemGroup>
+				);
+			} ) }
+		</WithItemGroup>
 	);
 }

package/src/components/colors-gradients/style.scss

@@ -59,25 +59,7 @@
 }
 
 .block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-	& > div {
-		width: $sidebar-width;
-	}
-}
-
-@include break-medium() {
-	.block-editor-panel-color-gradient-settings__dropdown-content {
-		.components-popover__content {
-			margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
-		}
-
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-60 + $grid-unit-15) } !important;
-		}
-	}
+	width: $sidebar-width;
 }
 
 .block-editor-panel-color-gradient-settings__dropdown:last-child > div {
@@ -87,10 +69,6 @@
 .block-editor-panel-color-gradient-settings__item {
 	padding-top: $grid-unit-15 !important;
 	padding-bottom: $grid-unit-15 !important;
-	.block-editor-panel-color-gradient-settings__color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-	}
 
 	&.is-open {
 		background: $gray-100;
@@ -98,3 +76,53 @@
 	}
 }
 
+.block-editor-panel-color-gradient-settings__color-indicator {
+	// Show a diagonal line (crossed out) for empty swatches.
+	background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+}
+
+/**
+* The following styles replicate the separated border of the
+* `ItemGroup` component but allows for hidden items. This is because
+* to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
+* must at least render a placeholder which would otherwise interfere
+* with the `:last-child` styles.
+*/
+.block-editor-tools-panel-color-gradient-settings__item {
+	padding: 0;
+
+	// Border styles.
+	border-left: 1px solid rgba(0, 0, 0, 0.1);
+	border-right: 1px solid rgba(0, 0, 0, 0.1);
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+	&.first {
+		border-top-left-radius: 2px;
+		border-top-right-radius: 2px;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	&.last {
+		border-bottom-left-radius: 2px;
+		border-bottom-right-radius: 2px;
+	}
+
+	> div,
+	> div > button {
+		border-radius: inherit;
+	}
+}
+
+.block-editor-tools-panel-color-gradient-settings__dropdown {
+	display: block;
+	padding: 0;
+
+	> button {
+		height: 46px;
+
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}

package/src/components/duotone-control/style.scss

@@ -9,7 +9,7 @@ $popover-padding: $grid-unit-20;
 $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
 
 .block-editor-duotone-control__popover {
-	> .components-popover__content > div {
+	> .components-popover__content {
 		padding: $popover-padding;
 		width: $popover-width;
 	}
@@ -34,9 +34,3 @@ $swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover
 	margin: $grid-unit-20 0;
 	font-size: $helptext-font-size;
 }
-
-// Better align the popover under the swatch.
-// @todo: when the positioning for popovers gets refactored, this can presumably be removed.
-.block-editor-duotone-control__popover:not([data-y-axis="middle"][data-x-axis="right"]) > .components-popover__content {
-	margin-left: -14px;
-}

package/src/components/iframe/index.js

@@ -10,7 +10,6 @@ import {
 	useState,
 	createPortal,
 	forwardRef,
-	useEffect,
 	useMemo,
 	useReducer,
 } from '@wordpress/element';
@@ -34,61 +33,66 @@ const BLOCK_PREFIX = 'wp-block';
  *
  * Ideally, this hook should be removed in the future and styles should be added
  * explicitly as editor styles.
- *
- * @param {Document} doc The document to append cloned stylesheets to.
  */
-function styleSheetsCompat( doc ) {
-	// Search the document for stylesheets targetting the editor canvas.
-	Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
-		try {
-			// May fail for external styles.
-			// eslint-disable-next-line no-unused-expressions
-			styleSheet.cssRules;
-		} catch ( e ) {
-			return;
-		}
-
-		const { ownerNode, cssRules } = styleSheet;
-
-		if ( ! cssRules ) {
-			return;
-		}
+function useStylesCompatibility() {
+	return useRefEffect( ( node ) => {
+		// Search the document for stylesheets targetting the editor canvas.
+		Array.from( document.styleSheets ).forEach( ( styleSheet ) => {
+			try {
+				// May fail for external styles.
+				// eslint-disable-next-line no-unused-expressions
+				styleSheet.cssRules;
+			} catch ( e ) {
+				return;
+			}
 
-		// Generally, ignore inline styles. We add inline styles belonging to a
-		// stylesheet later, which may or may not match the selectors.
-		if ( ownerNode.tagName !== 'LINK' ) {
-			return;
-		}
+			const { ownerNode, cssRules } = styleSheet;
 
-		// Don't try to add the reset styles, which were removed as a dependency
-		// from `edit-blocks` for the iframe since we don't need to reset admin
-		// styles.
-		if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
-			return;
-		}
-
-		const isMatch = Array.from( cssRules ).find(
-			( { selectorText } ) =>
-				selectorText &&
-				( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
-					selectorText.includes( `.${ BLOCK_PREFIX }` ) )
-		);
+			if ( ! cssRules ) {
+				return;
+			}
 
-		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
-			// Display warning once we have a way to add style dependencies to the editor.
-			// See: https://github.com/WordPress/gutenberg/pull/37466.
+			// Generally, ignore inline styles. We add inline styles belonging to a
+			// stylesheet later, which may or may not match the selectors.
+			if ( ownerNode.tagName !== 'LINK' ) {
+				return;
+			}
 
-			doc.head.appendChild( ownerNode.cloneNode( true ) );
+			// Don't try to add the reset styles, which were removed as a dependency
+			// from `edit-blocks` for the iframe since we don't need to reset admin
+			// styles.
+			if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+				return;
+			}
 
-			// Add inline styles belonging to the stylesheet.
-			const inlineCssId = ownerNode.id.replace( '-css', '-inline-css' );
-			const inlineCssElement = document.getElementById( inlineCssId );
+			const isMatch = Array.from( cssRules ).find(
+				( { selectorText } ) =>
+					selectorText &&
+					( selectorText.includes( `.${ BODY_CLASS_NAME }` ) ||
+						selectorText.includes( `.${ BLOCK_PREFIX }` ) )
+			);
 
-			if ( inlineCssElement ) {
-				doc.head.appendChild( inlineCssElement.cloneNode( true ) );
+			if (
+				isMatch &&
+				! node.ownerDocument.getElementById( ownerNode.id )
+			) {
+				// Display warning once we have a way to add style dependencies to the editor.
+				// See: https://github.com/WordPress/gutenberg/pull/37466.
+				node.appendChild( ownerNode.cloneNode( true ) );
+
+				// Add inline styles belonging to the stylesheet.
+				const inlineCssId = ownerNode.id.replace(
+					'-css',
+					'-inline-css'
+				);
+				const inlineCssElement = document.getElementById( inlineCssId );
+
+				if ( inlineCssElement ) {
+					node.appendChild( inlineCssElement.cloneNode( true ) );
+				}
 			}
-		}
-	} );
+		} );
+	}, [] );
 }
 
 /**
@@ -222,12 +226,7 @@ function Iframe(
 			} );
 	}, [] );
 	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
-
-	useEffect( () => {
-		if ( iframeDocument ) {
-			styleSheetsCompat( iframeDocument );
-		}
-	}, [ iframeDocument ] );
+	const styleCompatibilityRef = useStylesCompatibility();
 
 	head = (
 		<>
@@ -275,6 +274,15 @@ function Iframe(
 									...bodyClasses
 								) }
 							>
+								{ /*
+								 * This is a wrapper for the extra styles and scripts
+								 * rendered imperatively by cloning the parent,
+								 * it's important that this div's content remains uncontrolled.
+								 */ }
+								<div
+									style={ { display: 'none' } }
+									ref={ styleCompatibilityRef }
+								/>
 								<StyleProvider document={ iframeDocument }>
 									{ children }
 								</StyleProvider>

package/src/components/image-editor/use-save-image.js

@@ -6,6 +6,7 @@ import { useDispatch } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 export default function useSaveImage( {
 	crop,
@@ -60,7 +61,7 @@ export default function useSaveImage( {
 					sprintf(
 						/* translators: 1. Error message */
 						__( 'Could not edit image. %s' ),
-						error.message
+						stripHTML( error.message )
 					),
 					{
 						id: 'image-editing-error',