@wordpress/block-editor 8.5.2 → 8.6.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/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/inserter/index.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { AccessibilityInfo, Platform } from 'react-native';
+import { AccessibilityInfo, Platform, Text } from 'react-native';
 import { delay } from 'lodash';
 
 /**
@@ -15,6 +15,7 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import {
 	Icon,
+	plus,
 	plusCircle,
 	plusCircleFilled,
 	insertAfter,
@@ -32,27 +33,51 @@ import { store as blockEditorStore } from '../../store';
 
 const VOICE_OVER_ANNOUNCEMENT_DELAY = 1000;
 
-const defaultRenderToggle = ( { onToggle, disabled, style, onLongPress } ) => (
-	<ToolbarButton
-		title={ _x( 'Add block', 'Generic label for block inserter button' ) }
-		icon={
-			<Icon
-				icon={ plusCircleFilled }
-				style={ style }
-				color={ style.color }
-			/>
-		}
-		onClick={ onToggle }
-		extraProps={ {
-			hint: __( 'Double tap to add a block' ),
-			// testID is present to disambiguate this element for native UI tests. It's not
-			// usually required for components. See: https://git.io/JeQ7G.
-			testID: 'add-block-button',
-			onLongPress,
-		} }
-		isDisabled={ disabled }
-	/>
-);
+const defaultRenderToggle = ( {
+	onToggle,
+	disabled,
+	style,
+	containerStyle,
+	onLongPress,
+	useExpandedMode,
+} ) => {
+	// The "expanded mode" refers to the editor's appearance when no blocks
+	// are currently selected. The "add block" button has a separate style
+	// for the "expanded mode", which are added via the below "expandedModeViewProps"
+	// and "expandedModeViewText" variables.
+	const expandedModeViewProps = useExpandedMode && {
+		icon: <Icon icon={ plus } style={ style } />,
+		customContainerStyles: containerStyle,
+		fixedRatio: false,
+	};
+	const expandedModeViewText = (
+		<Text style={ styles[ 'inserter-menu__add-block-button-text' ] }>
+			{ __( 'Add Blocks' ) }
+		</Text>
+	);
+
+	return (
+		<ToolbarButton
+			title={ _x(
+				'Add block',
+				'Generic label for block inserter button'
+			) }
+			icon={ <Icon icon={ plusCircleFilled } style={ style } /> }
+			onClick={ onToggle }
+			extraProps={ {
+				hint: __( 'Double tap to add a block' ),
+				// testID is present to disambiguate this element for native UI tests. It's not
+				// usually required for components. See: https://git.io/JeQ7G.
+				testID: 'add-block-button',
+				onLongPress,
+			} }
+			isDisabled={ disabled }
+			{ ...expandedModeViewProps }
+		>
+			{ useExpandedMode && expandedModeViewText }
+		</ToolbarButton>
+	);
+};
 
 export class Inserter extends Component {
 	constructor() {
@@ -219,13 +244,21 @@ export class Inserter extends Component {
 			renderToggle = defaultRenderToggle,
 			getStylesFromColorScheme,
 			showSeparator,
+			useExpandedMode,
 		} = this.props;
 		if ( showSeparator && isOpen ) {
 			return <BlockInsertionPoint />;
 		}
-		const style = getStylesFromColorScheme(
-			styles.addBlockButton,
-			styles.addBlockButtonDark
+		const style = useExpandedMode
+			? styles[ 'inserter-menu__add-block-button-icon--expanded' ]
+			: getStylesFromColorScheme(
+					styles[ 'inserter-menu__add-block-button-icon' ],
+					styles[ 'inserter-menu__add-block-button-icon--dark' ]
+			  );
+
+		const containerStyle = getStylesFromColorScheme(
+			styles[ 'inserter-menu__add-block-button' ],
+			styles[ 'inserter-menu__add-block-button--dark' ]
 		);
 
 		const onPress = () => {
@@ -265,7 +298,9 @@ export class Inserter extends Component {
 					isOpen,
 					disabled,
 					style,
+					containerStyle,
 					onLongPress,
+					useExpandedMode,
 				} ) }
 				<Picker
 					ref={ ( instance ) => ( this.picker = instance ) }