@wordpress/block-editor 10.2.0 → 10.4.0

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

@@ -34,7 +34,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		blockClientId,
 		blockType,
 		hasFixedToolbar,
-		hasReducedUI,
+		isDistractionFree,
 		isValid,
 		isVisual,
 		isContentLocked,
@@ -60,7 +60,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
 			hasFixedToolbar: settings.hasFixedToolbar,
-			hasReducedUI: settings.hasReducedUI,
+			isDistractionFree: settings.isDistractionFree,
 			rootClientId: blockRootClientId,
 			isValid: selectedBlockClientIds.every( ( id ) =>
 				isBlockValid( id )
@@ -82,7 +82,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		{
 			ref: nodeRef,
 			onChange( isFocused ) {
-				if ( isFocused && hasReducedUI ) {
+				if ( isFocused && isDistractionFree ) {
 					return;
 				}
 				toggleBlockHighlight( blockClientId, isFocused );
@@ -132,9 +132,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 							) }
 							<BlockMover
 								clientIds={ blockClientIds }
-								hideDragHandle={
-									hideDragHandle || hasReducedUI
-								}
+								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
 					) }

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

@@ -137,15 +137,6 @@
 		padding-right: 6px;
 	}
 
-	// Switcher overrides.
-	.block-editor-block-switcher {
-		border-right: 1px solid $gray-900;
-
-		.components-dropdown-menu__toggle {
-			margin-left: 0;
-		}
-	}
-
 	.block-editor-block-switcher .components-dropdown-menu__toggle,
 	.block-editor-block-switcher__no-switcher-icon {
 		.block-editor-block-icon {
@@ -162,12 +153,22 @@
 		}
 	}
 
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+		width: auto;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		margin-left: 0;
+		border-left: 1px solid $gray-900;
+		margin-left: 6px;
+		margin-right: -6px;
 		white-space: nowrap;
 	}
 
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		border-left-color: $gray-200;
+	}
+
 	.block-editor-block-mover-button {
 		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
 		padding-left: $grid-unit !important;
@@ -175,17 +176,40 @@
 	}
 
 	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 6px !important;
-		padding-right: 6px !important;
-		border-right: 1px solid $gray-900;
+		padding-left: 12px !important;
+		padding-right: 12px !important;
+	}
+
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
+		border-width: 0;
 	}
 
 	@include break-small() {
 		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
 		.is-up-button.is-up-button.is-up-button {
-			border-bottom: 1px solid $gray-900;
 			margin-right: 0;
 			border-radius: 0;
+			order: 1;
+		}
+
+		.block-editor-block-mover__move-button-container {
+			border-left: 1px solid $gray-900;
+
+			&::before {
+				content: "";
+				display: block;
+				height: 1px;
+				background: $gray-900;
+				order: 2;
+			}
+		}
+
+		.is-down-button.is-down-button.is-down-button {
+			order: 3;
+		}
+
+		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
+			background: $gray-300;
 		}
 	}
 

package/src/components/block-tools/back-compat.js

@@ -23,6 +23,7 @@ export default function BlockToolsBackCompat( { children } ) {
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
 		since: '5.8',
+		version: '6.3',
 	} );
 
 	return (

package/src/components/block-tools/insertion-point.js

@@ -17,10 +17,11 @@ import { useReducedMotion } from '@wordpress/compose';
 import Inserter from '../inserter';
 import { store as blockEditorStore } from '../../store';
 import BlockPopoverInbetween from '../block-popover/inbetween';
+import BlockDropZonePopover from '../block-popover/drop-zone';
 
 export const InsertionPointOpenRef = createContext();
 
-function InsertionPointPopover( {
+function InbetweenInsertionPointPopover( {
 	__unstablePopoverSlot,
 	__unstableContentRef,
 } ) {
@@ -33,6 +34,8 @@ function InsertionPointPopover( {
 		nextClientId,
 		rootClientId,
 		isInserterShown,
+		isDistractionFree,
+		isNavigationMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockOrder,
@@ -41,6 +44,8 @@ function InsertionPointPopover( {
 			isBlockBeingDragged,
 			getPreviousBlockClientId,
 			getNextBlockClientId,
+			getSettings,
+			isNavigationMode: _isNavigationMode,
 		} = select( blockEditorStore );
 		const insertionPoint = getBlockInsertionPoint();
 		const order = getBlockOrder( insertionPoint.rootClientId );
@@ -60,6 +65,8 @@ function InsertionPointPopover( {
 			_nextClientId = getNextBlockClientId( _nextClientId );
 		}
 
+		const settings = getSettings();
+
 		return {
 			previousClientId: _previousClientId,
 			nextClientId: _nextClientId,
@@ -67,6 +74,8 @@ function InsertionPointPopover( {
 				getBlockListSettings( insertionPoint.rootClientId )
 					?.orientation || 'vertical',
 			rootClientId: insertionPoint.rootClientId,
+			isNavigationMode: _isNavigationMode(),
+			isDistractionFree: settings.isDistractionFree,
 			isInserterShown: insertionPoint?.__unstableWithInserter,
 		};
 	}, [] );
@@ -80,14 +89,6 @@ function InsertionPointPopover( {
 		}
 	}
 
-	function onFocus( event ) {
-		// Only handle click on the wrapper specifically, and not an event
-		// bubbled from the inserter itself.
-		if ( event.target !== ref.current ) {
-			openRef.current = true;
-		}
-	}
-
 	function maybeHideInserterPoint( event ) {
 		// Only hide the inserter if it's triggered on the wrapper,
 		// and the inserter is not open.
@@ -96,6 +97,14 @@ function InsertionPointPopover( {
 		}
 	}
 
+	function onFocus( event ) {
+		// Only handle click on the wrapper specifically, and not an event
+		// bubbled from the inserter itself.
+		if ( event.target !== ref.current ) {
+			openRef.current = true;
+		}
+	}
+
 	// Define animation variants for the line element.
 	const horizontalLine = {
 		start: {
@@ -149,13 +158,13 @@ function InsertionPointPopover( {
 			...( ! isVertical ? horizontalLine.rest : verticalLine.rest ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: isInserterShown ? 0.1 : 0, type: 'tween' },
+			transition: { delay: isInserterShown ? 0.5 : 0, type: 'tween' },
 		},
 		hover: {
 			...( ! isVertical ? horizontalLine.hover : verticalLine.hover ),
 			opacity: 1,
 			borderRadius: '2px',
-			transition: { delay: 0.1, type: 'tween' },
+			transition: { delay: 0.5, type: 'tween' },
 		},
 	};
 
@@ -165,10 +174,14 @@ function InsertionPointPopover( {
 		},
 		rest: {
 			scale: 1,
-			transition: { type: 'tween' },
+			transition: { delay: 0.4, type: 'tween' },
 		},
 	};
 
+	if ( isDistractionFree && ! isNavigationMode ) {
+		return null;
+	}
+
 	const className = classnames(
 		'block-editor-block-list__insertion-point',
 		'is-' + orientation
@@ -229,9 +242,30 @@ function InsertionPointPopover( {
 }
 
 export default function InsertionPoint( props ) {
-	const isVisible = useSelect( ( select ) => {
-		return select( blockEditorStore ).isBlockInsertionPointVisible();
+	const { insertionPoint, isVisible } = useSelect( ( select ) => {
+		const { getBlockInsertionPoint, isBlockInsertionPointVisible } =
+			select( blockEditorStore );
+		return {
+			insertionPoint: getBlockInsertionPoint(),
+			isVisible: isBlockInsertionPointVisible(),
+		};
 	}, [] );
 
-	return isVisible && <InsertionPointPopover { ...props } />;
+	if ( ! isVisible ) {
+		return null;
+	}
+
+	/**
+	 * Render a popover that overlays the block when the desired operation is to replace it.
+	 * Otherwise, render a popover in between blocks for the indication of inserting between them.
+	 */
+	return insertionPoint.operation === 'replace' ? (
+		<BlockDropZonePopover
+			// Force remount to trigger the animation.
+			key={ `${ insertionPoint.rootClientId }-${ insertionPoint.index }` }
+			{ ...props }
+		/>
+	) : (
+		<InbetweenInsertionPointPopover { ...props } />
+	);
 }

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

@@ -36,6 +36,7 @@ function selector( select ) {
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
+		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
 			? getLastMultiSelectedBlockClientId()
 			: null,
@@ -46,6 +47,7 @@ function SelectedBlockPopover( {
 	clientId,
 	rootClientId,
 	isEmptyDefaultBlock,
+	showContents, // we may need to mount an empty popover because we reuse
 	capturingClientId,
 	__unstablePopoverSlot,
 	__unstableContentRef,
@@ -55,6 +57,7 @@ function SelectedBlockPopover( {
 		isMultiSelecting,
 		isTyping,
 		hasFixedToolbar,
+		isDistractionFree,
 		lastClientId,
 	} = useSelect( selector, [] );
 	const isInsertionPointVisible = useSelect(
@@ -94,6 +97,7 @@ function SelectedBlockPopover( {
 		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
+		! isDistractionFree &&
 		! isEmptyDefaultBlock;
 
 	useShortcut(
@@ -136,7 +140,7 @@ function SelectedBlockPopover( {
 			resize={ false }
 			{ ...popoverProps }
 		>
-			{ shouldShowContextualToolbar && (
+			{ shouldShowContextualToolbar && showContents && (
 				<BlockContextualToolbar
 					// If the toolbar is being shown because of being forced
 					// it should focus the toolbar right after the mount.
@@ -169,6 +173,8 @@ function wrapperSelector( select ) {
 		getBlockRootClientId,
 		getBlock,
 		getBlockParents,
+		getSettings,
+		isNavigationMode: _isNavigationMode,
 		__experimentalGetBlockListSettingsForBlocks,
 	} = select( blockEditorStore );
 
@@ -195,10 +201,14 @@ function wrapperSelector( select ) {
 				?.__experimentalCaptureToolbars
 	);
 
+	const settings = getSettings();
+
 	return {
 		clientId,
 		rootClientId: getBlockRootClientId( clientId ),
 		name,
+		isDistractionFree: settings.isDistractionFree,
+		isNavigationMode: _isNavigationMode(),
 		isEmptyDefaultBlock:
 			name && isUnmodifiedDefaultBlock( { name, attributes } ),
 		capturingClientId,
@@ -221,6 +231,8 @@ export default function WrappedBlockPopover( {
 		name,
 		isEmptyDefaultBlock,
 		capturingClientId,
+		isDistractionFree,
+		isNavigationMode,
 	} = selected;
 
 	if ( ! name ) {
@@ -232,6 +244,7 @@ export default function WrappedBlockPopover( {
 			clientId={ clientId }
 			rootClientId={ rootClientId }
 			isEmptyDefaultBlock={ isEmptyDefaultBlock }
+			showContents={ ! isDistractionFree || isNavigationMode }
 			capturingClientId={ capturingClientId }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }

package/src/components/block-variation-picker/README.md

@@ -68,7 +68,7 @@ The different variations of the block.
 
 -   Type: `Function`
 
-Callback called when a block variation is selected. It recieves the selected variation as a parameter.
+Callback called when a block variation is selected. It receives the selected variation as a parameter.
 
 #### `icon`
 

package/src/components/block-vertical-alignment-control/ui.js

@@ -28,7 +28,7 @@ const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
 const POPOVER_PROPS = {
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function BlockVerticalAlignmentUI( {

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

@@ -61,6 +61,7 @@ export default function AllInputControl( {
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			placeholder={ allPlaceholder }
+			size={ '__unstable-large' }
 		/>
 	);
 }

package/src/components/border-radius-control/index.js

@@ -113,6 +113,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							withInputField={ false }
 							onChange={ handleSliderChange }
 							step={ step }
+							__nextHasNoMarginBottom
 						/>
 					</>
 				) : (

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

@@ -80,6 +80,7 @@ export default function BoxInputControls( {
 								onUnitChange={ createHandleOnUnitChange(
 									corner
 								) }
+								size={ '__unstable-large' }
 							/>
 						</div>
 					</Tooltip>

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

@@ -10,24 +10,21 @@
 		justify-content: space-between;
 		align-items: flex-start;
 
-		> .components-unit-control-wrapper {
-			width: 110px;
+		.components-border-radius-control__unit-control {
+			width: calc((100% - #{$grid-unit-20}) / 2);
 			margin-bottom: 0;
-			margin-right: #{ $grid-unit-15 };
+			margin-right: $grid-unit-20;
 			flex-shrink: 0;
 		}
 
-		.components-range-control {
+		.components-border-radius-control__range-control {
 			flex: 1;
-			margin-bottom: 0;
-
-			.components-base-control__field {
-				margin-bottom: 0;
-				height: 30px;
-			}
+			margin-right: $grid-unit-15;
 
-			.components-range-control__wrapper {
-				margin-right: 10px;
+			> div {
+				height: 40px;
+				display: flex;
+				align-items: center;
 			}
 		}
 
@@ -37,22 +34,16 @@
 	}
 
 	.components-border-radius-control__input-controls-wrapper {
-		display: flex;
-		width: 70%;
-		flex-wrap: wrap;
-
-		.components-border-radius-control__tooltip-wrapper {
-			width: calc(50% - #{ $grid-unit-10 });
-			margin-bottom: $grid-unit-10;
-			margin-right: $grid-unit-10;
-		}
+		display: grid;
+		gap: $grid-unit-20;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		margin-right: $grid-unit-15;
 	}
 
-	.component-border-radius-control__linked-button.has-icon {
+	.component-border-radius-control__linked-button {
 		display: flex;
 		justify-content: center;
-		margin-left: 2px;
-		margin-top: 3px;
+		margin-top: $grid-unit-10;
 
 		svg {
 			margin-right: 0;

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

@@ -36,8 +36,9 @@
 .block-list-appender:only-child {
 	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > &,
 	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > &,
-	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > &,
-	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > & {
+	// Legacy groups have an inner container so need to be targeted separately
+	.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > &,
+	.is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > & {
 		pointer-events: none;
 
 		&::after {
@@ -48,6 +49,7 @@
 			bottom: 0;
 			left: 0;
 			pointer-events: none;
+			border: $border-width dashed currentColor;
 			@include placeholder-style();
 		}