@wordpress/block-editor 8.5.4 → 9.0.0

package/src/components/block-tools/{block-popover.js → selected-block-popover.js}

@@ -9,11 +9,9 @@ import classnames from 'classnames';
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-import { Popover } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { useViewportMatch } from '@wordpress/compose';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -22,8 +20,7 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import Inserter from '../inserter';
 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';
+import BlockPopover from '../block-popover';
 
 function selector( select ) {
 	const {
@@ -31,7 +28,6 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		isCaretWithinFormattedText,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
@@ -39,17 +35,16 @@ function selector( select ) {
 		isNavigationMode: isNavigationMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
-		isCaretWithinFormattedText: isCaretWithinFormattedText(),
-		hasMultiSelection: hasMultiSelection(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
-		lastClientId: getLastMultiSelectedBlockClientId(),
+		lastClientId: hasMultiSelection()
+			? getLastMultiSelectedBlockClientId()
+			: null,
 	};
 }
 
-function BlockPopover( {
+function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
-	isValid,
 	isEmptyDefaultBlock,
 	capturingClientId,
 	__unstablePopoverSlot,
@@ -59,8 +54,6 @@ function BlockPopover( {
 		isNavigationMode,
 		isMultiSelecting,
 		isTyping,
-		isCaretWithinFormattedText,
-		hasMultiSelection,
 		hasFixedToolbar,
 		lastClientId,
 	} = useSelect( selector, [] );
@@ -83,22 +76,20 @@ function BlockPopover( {
 		[ clientId ]
 	);
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const [ isToolbarForced, setIsToolbarForced ] = useState( false );
+	const isToolbarForced = useRef( false );
 	const [ isInserterShown, setIsInserterShown ] = useState( false );
 	const { stopTyping } = useDispatch( blockEditorStore );
 
-	// Controls when the side inserter on empty lines should
-	// be shown, including writing and selection modes.
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock && isValid;
+		! isTyping && ! isNavigationMode && isEmptyDefaultBlock;
 	const shouldShowBreadcrumb = isNavigationMode;
 	const shouldShowContextualToolbar =
 		! isNavigationMode &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
-		! showEmptyBlockSideInserter &&
 		! isMultiSelecting &&
-		( ! isTyping || isCaretWithinFormattedText );
+		! showEmptyBlockSideInserter &&
+		! isTyping;
 	const canFocusHiddenToolbar =
 		! isNavigationMode &&
 		! shouldShowContextualToolbar &&
@@ -108,7 +99,7 @@ function BlockPopover( {
 	useShortcut(
 		'core/block-editor/focus-toolbar',
 		() => {
-			setIsToolbarForced( true );
+			isToolbarForced.current = true;
 			stopTyping( true );
 		},
 		{
@@ -117,55 +108,17 @@ function BlockPopover( {
 	);
 
 	useEffect( () => {
-		if ( ! shouldShowContextualToolbar ) {
-			setIsToolbarForced( false );
-		}
-	}, [ shouldShowContextualToolbar ] );
+		isToolbarForced.current = false;
+	} );
 
 	// Stores the active toolbar item index so the block toolbar can return focus
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
-	const selectedElement = useBlockElement( clientId );
-	const lastSelectedElement = useBlockElement( lastClientId );
-	const capturingElement = useBlockElement( capturingClientId );
-
-	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
-
-	if (
-		! shouldShowBreadcrumb &&
-		! shouldShowContextualToolbar &&
-		! isToolbarForced &&
-		! showEmptyBlockSideInserter
-	) {
+	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
 
-	let node = selectedElement;
-
-	if ( ! node ) {
-		return null;
-	}
-
-	if ( capturingClientId ) {
-		node = capturingElement;
-	}
-
-	let anchorRef = node;
-
-	if ( hasMultiSelection ) {
-		// Wait to render the popover until the bottom reference is available
-		// as well.
-		if ( ! lastSelectedElement ) {
-			return null;
-		}
-
-		anchorRef = {
-			top: node,
-			bottom: lastSelectedElement,
-		};
-	}
-
 	function onFocus() {
 		setIsInserterShown( true );
 	}
@@ -174,48 +127,17 @@ function BlockPopover( {
 		setIsInserterShown( false );
 	}
 
-	// Position above the anchor, pop out towards the right, and position in the
-	// left corner. For the side inserter, pop out towards the left, and
-	// position in the right corner.
-	// To do: refactor `Popover` to make this prop clearer.
-	const popoverPosition = showEmptyBlockSideInserter
-		? 'top left right'
-		: 'top right left';
-	const { ownerDocument } = node;
-	const stickyBoundaryElement = showEmptyBlockSideInserter
-		? undefined
-		: // The sticky boundary element should be the boundary at which the
-		  // the block toolbar becomes sticky when the block scolls out of view.
-		  // In case of an iframe, this should be the iframe boundary, otherwise
-		  // the scroll container.
-		  ownerDocument.defaultView.frameElement ||
-		  getScrollContainer( node ) ||
-		  ownerDocument.body;
-
 	return (
-		<Popover
-			ref={ popoverScrollRef }
-			noArrow
-			animate={ false }
-			position={ popoverPosition }
-			focusOnMount={ false }
-			anchorRef={ anchorRef }
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
 			className={ classnames( 'block-editor-block-list__block-popover', {
 				'is-insertion-point-visible': isInsertionPointVisible,
 			} ) }
-			__unstableStickyBoundaryElement={ stickyBoundaryElement }
-			// Render in the old slot if needed for backward compatibility,
-			// otherwise render in place (not in the the default popover slot).
-			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
-			// Observe movement for block animations (especially horizontal).
-			__unstableObserveElement={ node }
-			shouldAnchorIncludePadding
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
+			__unstablePopoverSlot={ __unstablePopoverSlot }
+			__unstableContentRef={ __unstableContentRef }
 		>
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<div
 					onFocus={ onFocus }
 					onBlur={ onBlur }
@@ -240,11 +162,11 @@ function BlockPopover( {
 					/>
 				</div>
 			) }
-			{ ( shouldShowContextualToolbar || isToolbarForced ) && (
+			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
-					focusOnMount={ isToolbarForced }
+					focusOnMount={ isToolbarForced.current }
 					__experimentalInitialIndex={
 						initialToolbarItemIndexRef.current
 					}
@@ -260,20 +182,9 @@ function BlockPopover( {
 				<BlockSelectionButton
 					clientId={ clientId }
 					rootClientId={ rootClientId }
-					blockElement={ node }
 				/>
 			) }
-			{ showEmptyBlockSideInserter && (
-				<div className="block-editor-block-list__empty-block-inserter">
-					<Inserter
-						position="bottom right"
-						rootClientId={ rootClientId }
-						clientId={ clientId }
-						__experimentalIsQuick
-					/>
-				</div>
-			) }
-		</Popover>
+		</BlockPopover>
 	);
 }
 
@@ -294,7 +205,7 @@ function wrapperSelector( select ) {
 		return;
 	}
 
-	const { name, attributes = {}, isValid } = getBlock( clientId ) || {};
+	const { name, attributes = {} } = getBlock( clientId ) || {};
 	const blockParentsClientIds = getBlockParents( clientId );
 
 	// Get Block List Settings for all ancestors of the current Block clientId.
@@ -314,7 +225,6 @@ function wrapperSelector( select ) {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
-		isValid,
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -335,7 +245,6 @@ export default function WrappedBlockPopover( {
 		clientId,
 		rootClientId,
 		name,
-		isValid,
 		isEmptyDefaultBlock,
 		capturingClientId,
 	} = selected;
@@ -345,10 +254,9 @@ export default function WrappedBlockPopover( {
 	}
 
 	return (
-		<BlockPopover
+		<SelectedBlockPopover
 			clientId={ clientId }
 			rootClientId={ rootClientId }
-			isValid={ isValid }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }

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

@@ -4,6 +4,10 @@
 
 .block-editor-block-list__insertion-point {
 	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 .block-editor-block-list__insertion-point-indicator {
@@ -49,7 +53,6 @@
 }
 
 // Sibling inserter / "inbetweenserter".
-.block-editor-block-list__empty-block-inserter,
 .block-editor-default-block-appender,
 .block-editor-block-list__insertion-point-inserter,
 .block-editor-block-list__block-popover-inserter {
@@ -98,7 +101,7 @@
 		position: sticky;
 		top: 0;
 		width: 100%;
-		z-index: z-index(".block-editor-block-list__block-popover");
+		z-index: z-index(".block-editor-block-popover");
 		// Fill up when empty
 		min-height: $block-toolbar-height;
 		display: block;
@@ -112,42 +115,6 @@
 			border-right-color: $gray-200;
 		}
 	}
-
-	.block-editor-block-mover-button {
-		overflow: hidden;
-	}
-
-	// Extra specificity to override standard toolbar button styles.
-	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
-		min-width: $block-toolbar-height*0.5;
-		width: $block-toolbar-height*0.5;
-
-		svg {
-			min-width: $block-toolbar-height*0.5;
-		}
-	}
-}
-
-// Position mover arrows for both toolbars.
-.block-editor-block-contextual-toolbar .block-editor-block-mover:not(.is-horizontal) {
-	// Position SVGs.
-	.block-editor-block-mover-button {
-		&:focus::before {
-			left: 0 !important;
-			min-width: 0;
-			width: 100%;
-		}
-	}
-
-	@include break-small() {
-		.block-editor-block-mover-button.is-up-button svg {
-			top: 5px;
-		}
-
-		.block-editor-block-mover-button.is-down-button svg {
-			bottom: 5px;
-		}
-	}
 }
 
 /**
@@ -217,37 +184,6 @@
 	}
 }
 
-/**
- * Popovers.
- */
-
-.block-editor-block-list__insertion-point-popover.is-without-arrow {
-	z-index: z-index(".block-editor-block-list__insertion-point-popover");
-	position: absolute;
-	pointer-events: none;
-
-	* {
-		pointer-events: none;
-	}
-
-	.is-with-inserter {
-		pointer-events: all;
-
-		* {
-			pointer-events: all;
-		}
-	}
-
-	.components-popover__content.components-popover__content {
-		// Needs specificity.
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-		margin-left: 0;
-	}
-}
-
 // Hide the popover block editor list while dragging.
 // Using a hacky animation to delay hiding the element.
 // It's needed because if we hide the element immediately upon dragging,
@@ -262,33 +198,12 @@
 }
 
 .components-popover.block-editor-block-list__block-popover {
-	z-index: z-index(".block-editor-block-list__block-popover");
-	position: absolute;
-
-	.components-popover__content {
-		margin: 0 !important;
-		min-width: auto;
-		width: max-content;
-		background: none;
-		border: none;
-		box-shadow: none;
-		overflow-y: visible;
-
-		// Allow clicking through the toolbar holder.
-		pointer-events: none;
-
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar,
-		.block-editor-block-list__empty-block-inserter {
-			pointer-events: all;
-		}
-
-		// Position the block toolbar.
-		.block-editor-block-list__block-selection-button,
-		.block-editor-block-contextual-toolbar {
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
-		}
+	// Position the block toolbar.
+	.block-editor-block-list__block-selection-button,
+	.block-editor-block-contextual-toolbar {
+		pointer-events: all;
+		margin-top: $grid-unit-15;
+		margin-bottom: $grid-unit-15;
 	}
 
 	// Hide the block toolbar if the insertion point is shown.
@@ -307,30 +222,3 @@
 .is-dragging-components-draggable .components-tooltip {
 	display: none;
 }
-
-
-// Size multiple sequential buttons to be optically balanced.
-// Icons are 36px, as set by a 24px icon and 12px padding.
-.block-editor-block-toolbar > .components-toolbar > .block-editor-block-toolbar__slot, // When a plugin adds to a slot, the segment has a `components-toolbar` class.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-toolbar, // The nesting order is sometimes reversed.
-.block-editor-block-toolbar > .block-editor-block-toolbar__slot > .components-dropdown, // Targets unique markup for the "Replace" button.
-.block-editor-block-toolbar .components-toolbar-group {
-	padding-left: $grid-unit-15 * 0.5; // 6px.
-	padding-right: $grid-unit-15 * 0.5;
-
-	.components-button,
-	.components-button.has-icon.has-icon {
-		min-width: $block-toolbar-height - $grid-unit-15;
-		padding-left: $grid-unit-15 * 0.5; // 6px.
-		padding-right: $grid-unit-15 * 0.5;
-
-		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
-		}
-
-		&::before {
-			left: 2px;
-			right: 2px;
-		}
-	}
-}

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

@@ -11,12 +11,14 @@
 		align-items: flex-start;
 
 		> .components-unit-control-wrapper {
-			width: calc(50% - 26px);
+			width: 110px;
 			margin-bottom: 0;
+			margin-right: #{ $grid-unit-10 };
+			flex-shrink: 0;
 		}
 
 		.components-range-control {
-			width: calc(50% - 26px);
+			flex: 1;
 			margin-bottom: 0;
 
 			.components-base-control__field {
@@ -49,6 +51,7 @@
 	.component-border-radius-control__linked-button.has-icon {
 		display: flex;
 		justify-content: center;
+		margin-left: 2px;
 
 		svg {
 			margin-right: 0;

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -231,7 +231,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
             >
               <button
                 aria-describedby={null}
-                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                className="components-button components-circular-option-picker__clear is-tertiary"
                 onClick={[Function]}
                 type="button"
               >

package/src/components/color-style-selector/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import deprecated from '@wordpress/deprecated';
 
 const ColorSelectorSVGIcon = () => (
 	<SVG xmlns="https://www.w3.org/2000/svg" viewBox="0 0 20 20">
@@ -78,14 +79,22 @@ const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
 	);
 };
 
-const BlockColorsStyleSelector = ( { children, ...other } ) => (
-	<Dropdown
-		position="bottom right"
-		className="block-library-colors-selector"
-		contentClassName="block-library-colors-selector__popover"
-		renderToggle={ renderToggleComponent( other ) }
-		renderContent={ () => children }
-	/>
-);
+const BlockColorsStyleSelector = ( { children, ...other } ) => {
+	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {
+		alternative: 'block supports API',
+		since: '6.1',
+		version: '6.3',
+	} );
+
+	return (
+		<Dropdown
+			position="bottom right"
+			className="block-library-colors-selector"
+			contentClassName="block-library-colors-selector__popover"
+			renderToggle={ renderToggleComponent( other ) }
+			renderContent={ () => children }
+		/>
+	);
+};
 
 export default BlockColorsStyleSelector;

package/src/components/default-block-appender/style.scss

@@ -34,8 +34,7 @@
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
 // that exists only on empty documents.
-.block-editor-default-block-appender .block-editor-inserter,
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter { // This needs specificity to override inherited popover styles.
+.block-editor-default-block-appender .block-editor-inserter {
 	position: absolute;
 	top: 0;
 	right: 0;

package/src/components/duotone-control/index.js

@@ -10,6 +10,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { DOWN } from '@wordpress/keycodes';
+import { Icon, filter } from '@wordpress/icons';
 
 function DuotoneControl( {
 	colorPalette,
@@ -41,7 +42,13 @@ function DuotoneControl( {
 						aria-expanded={ isOpen }
 						onKeyDown={ openOnArrowDown }
 						label={ __( 'Apply duotone filter' ) }
-						icon={ <DuotoneSwatch values={ value } /> }
+						icon={
+							value ? (
+								<DuotoneSwatch values={ value } />
+							) : (
+								<Icon icon={ filter } />
+							)
+						}
 					/>
 				);
 			} }

package/src/components/gradients/README.md

@@ -0,0 +1,29 @@
+# Gradients
+
+The `Gradients` component exposes tools for working with gradients
+
+<a name="getGradientSlugByValue" href="#getGradientSlugByValue">#</a> **getGradientSlugByValue**
+
+Retrieves the gradient slug per slug.
+
+_Parameters_
+
+-   _gradients_ `Array`: Gradient Palette
+-   _value_ `string`: Gradient value
+
+_Returns_
+
+-   `string`: Gradient slug.
+
+<a name="getGradientValueBySlug" href="#getGradientValueBySlug">#</a> **getGradientValueBySlug**
+
+Retrieves the gradient value per slug.
+
+_Parameters_
+
+-   _gradients_ `Array`: Gradient Palette
+-   _slug_ `string`: Gradient slug
+
+_Returns_
+
+-   `string`: Gradient value.

package/src/components/image-size-control/README.md

@@ -25,7 +25,7 @@ const MyImageSizeControl = () => {
 			imageHeight={ imageHeight }
 		/>
 	);
-} );
+}
 ```
 
 ## Props

package/src/components/index.js

@@ -33,7 +33,6 @@ export {
 	BlockVerticalAlignmentControl,
 } from './block-vertical-alignment-control';
 export { default as __experimentalBorderRadiusControl } from './border-radius-control';
-export { default as __experimentalBorderStyleControl } from './border-style-control';
 export {
 	// This is a typo, but kept here for back-compat.
 	ButtonBlockerAppender,