@wordpress/block-editor 11.7.0 → 12.0.0

package/src/components/block-list/content.scss

@@ -35,11 +35,14 @@
 	}
 
 	// Block multi selection
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-		// Apply a rounded radius to the entire block.
+	// Apply a rounded radius to the entire block when multi selected, but with low specificity
+	// so explicit radii set by tools are preserved.
+	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
 		border-radius: $radius-block-ui;
 		overflow: hidden;
+	}
 
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
 		& ::selection {
@@ -68,24 +71,22 @@
 			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
 		}
+
+		// Don't show the highlight focus style when multi selected.
+		&.is-highlighted::after {
+			box-shadow: none;
+		}
 	}
 
-	// Block highlight, and navigation mode, not focus.
-	// By not using a pseudo element, we can limit ourselves to only
-	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
-	// would require the opacity-changing overlay to be on ::before.
+	// Block highlight, and navigation mode, and focus.
+	// This piece of code has gone back and forth between using a pseudo element
+	// vs. styling the block directly. Ultimately we likely need a pseudo element
+	// (unless styles like focus and selection overlay can be rendered as separate elements),
+	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Show outline in high contrast mode.
-		outline: 2px solid transparent;
-	}
-
-	// Block focus.
+	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;
 

package/src/components/block-list/index.native.js

@@ -6,7 +6,7 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component, createContext } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
@@ -33,7 +33,6 @@ import {
 import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
-export const OnCaretVerticalPositionChange = createContext();
 const identity = ( x ) => x;
 
 const stylesMemo = {};
@@ -70,8 +69,6 @@ export class BlockList extends Component {
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange =
-			this.onCaretVerticalPositionChange.bind( this );
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
 		this.shouldFlatListPreventAutomaticScroll =
@@ -94,15 +91,6 @@ export class BlockList extends Component {
 		this.props.insertBlock( newBlock, this.props.blockCount );
 	}
 
-	onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
-		KeyboardAwareFlatList.handleCaretVerticalPositionChange(
-			this.scrollViewRef,
-			targetId,
-			caretY,
-			previousCaretY
-		);
-	}
-
 	scrollViewInnerRef( ref ) {
 		this.scrollViewRef = ref;
 	}
@@ -209,13 +197,7 @@ export class BlockList extends Component {
 			</BlockListConsumer>
 		);
 
-		return (
-			<OnCaretVerticalPositionChange.Provider
-				value={ this.onCaretVerticalPositionChange }
-			>
-				{ blockList }
-			</OnCaretVerticalPositionChange.Provider>
-		);
+		return blockList;
 	}
 
 	renderList( extraProps = {} ) {
@@ -237,8 +219,7 @@ export class BlockList extends Component {
 		} = this.props;
 		const { parentScrollRef, onScroll } = extraProps;
 
-		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
-			styles;
+		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -250,6 +231,15 @@ export class BlockList extends Component {
 		const isContentStretch = contentResizeMode === 'stretch';
 		const isMultiBlocks = blockClientIds.length > 1;
 		const { isWider } = alignmentHelpers;
+		const extraScrollHeight =
+			headerToolbar.height +
+			blockToolbar.height +
+			( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
+
+		const scrollViewStyle = [
+			{ flex: isRootList ? 1 : 0 },
+			! isRootList && styles.overflowVisible,
+		];
 
 		return (
 			<View
@@ -263,24 +253,12 @@ export class BlockList extends Component {
 						? { removeClippedSubviews: false }
 						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
 					accessibilityLabel="block-list"
-					autoScroll={ this.props.autoScroll }
 					innerRef={ ( ref ) => {
 						this.scrollViewInnerRef( parentScrollRef || ref );
 					} }
-					extraScrollHeight={
-						blockToolbar.height + blockBorder.width
-					}
-					inputAccessoryViewHeight={
-						headerToolbar.height +
-						( isFloatingToolbarVisible
-							? floatingToolbar.height
-							: 0 )
-					}
+					extraScrollHeight={ extraScrollHeight }
 					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ [
-						{ flex: isRootList ? 1 : 0 },
-						! isRootList && styles.overflowVisible,
-					] }
+					scrollViewStyle={ scrollViewStyle }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
 					contentContainerStyle={ [
@@ -407,6 +385,7 @@ export default compose( [
 		( select, { rootClientId, orientation, filterInnerBlocks } ) => {
 			const {
 				getBlockCount,
+				getBlockHierarchyRootClientId,
 				getBlockOrder,
 				getSelectedBlockClientId,
 				isBlockInsertionPointVisible,
@@ -427,10 +406,12 @@ export default compose( [
 			const isReadOnly = getSettings().readOnly;
 
 			const blockCount = getBlockCount();
-			const hasRootInnerBlocks = !! blockCount;
+			const rootBlockId = getBlockHierarchyRootClientId(
+				selectedBlockClientId
+			);
 
 			const isFloatingToolbarVisible =
-				!! selectedBlockClientId && hasRootInnerBlocks;
+				!! selectedBlockClientId && !! getBlockCount( rootBlockId );
 			const isRTL = getSettings().isRTL;
 
 			return {

package/src/components/block-list/use-in-between-inserter.js

@@ -4,6 +4,7 @@
 import { useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -93,7 +94,9 @@ export function useInBetweenInserter() {
 							blockElRect.top > offsetTop ) ||
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'horizontal' &&
-							blockElRect.left > offsetLeft )
+							( isRTL()
+								? blockElRect.right < offsetLeft
+								: blockElRect.left > offsetLeft ) )
 					);
 				} );
 

package/src/components/block-mobile-toolbar/test/block-actions-menu.native.js

@@ -8,7 +8,7 @@ import {
 	getBlock,
 	within,
 	getEditorHtml,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -71,7 +71,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -132,7 +132,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -179,7 +179,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -228,7 +228,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -275,7 +275,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -322,7 +322,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -368,7 +368,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -405,7 +405,7 @@ describe( 'Block Actions Menu', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

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

@@ -35,11 +35,14 @@
 			> * {
 				width: $block-toolbar-height * 0.5;
 				min-width: 0 !important; // overrides default button width.
-				padding-left: 0 !important;
-				padding-right: 0 !important;
 				overflow: hidden;
 			}
 
+			.block-editor-block-mover-button {
+				padding-left: 0;
+				padding-right: 0;
+			}
+
 			.block-editor-block-mover-button.is-up-button svg {
 				left: 5px;
 			}
@@ -55,9 +58,12 @@
 	@include break-small() {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		padding-left: 0 !important;
-		padding-right: 0 !important;
 		overflow: hidden;
+
+		.block-editor-block-mover &.has-icon.has-icon {
+			padding-left: 0;
+			padding-right: 0;
+		}
 	}
 }
 

package/src/components/block-mover/test/index.native.js

@@ -9,7 +9,7 @@ import {
 	within,
 	getEditorHtml,
 	render,
-	changeTextOfRichText,
+	typeInRichText,
 } from 'test/helpers';
 
 /**
@@ -89,7 +89,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -138,7 +138,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );
@@ -176,7 +176,7 @@ describe( 'Block Mover Picker', () => {
 				within( paragraphBlock ).getByPlaceholderText(
 					'Start writing…'
 				);
-			changeTextOfRichText( paragraphField, 'Hello!' );
+			typeInRichText( paragraphField, 'Hello!' );
 
 			// Add Spacer block
 			await addBlock( screen, 'Spacer' );

package/src/components/block-popover/inbetween.js

@@ -106,16 +106,7 @@ function BlockPopoverInbetween( {
 						nextRect && previousRect
 							? nextRect.top - previousRect.bottom
 							: 0;
-
-					if ( isRTL() ) {
-						// vertical, rtl
-						left = previousRect
-							? previousRect.right
-							: nextRect.right;
-					} else {
-						// vertical, ltr
-						left = previousRect ? previousRect.left : nextRect.left;
-					}
+					left = previousRect ? previousRect.left : nextRect.left;
 				} else {
 					top = previousRect ? previousRect.top : nextRect.top;
 					height = previousRect
@@ -124,9 +115,7 @@ function BlockPopoverInbetween( {
 
 					if ( isRTL() ) {
 						// non vertical, rtl
-						left = previousRect
-							? previousRect.left
-							: nextRect.right;
+						left = nextRect ? nextRect.right : previousRect.left;
 						width =
 							previousRect && nextRect
 								? previousRect.left - nextRect.right

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -29,7 +29,6 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const noop = () => {};
@@ -138,11 +137,6 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: firstBlockClientId,
-		maximumLength: 25,
-	} );
-
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock
 			? () => {
@@ -173,12 +167,8 @@ export function BlockSettingsDropdown( {
 		]
 	);
 
-	const label = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		blockTitle
-	);
-	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
+	const removeBlockLabel =
+		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.

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

@@ -99,6 +99,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 	// header area and not contextually to the block.
 	const displayHeaderToolbar =
 		useViewportMatch( 'medium', '<' ) || hasFixedToolbar;
+	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
 	if ( blockType ) {
 		if ( ! hasBlockSupport( blockType, '__experimentalToolbar', true ) ) {
@@ -124,9 +125,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar &&
-				! displayHeaderToolbar &&
-				! isContentLocked && <BlockParentSelector /> }
+			{ ! isMultiToolbar && isLargeViewport && ! isContentLocked && (
+				<BlockParentSelector />
+			) }
 			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					! isContentLocked && (

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

@@ -56,26 +56,46 @@
 	}
 }
 
-.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
-	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
+// on desktop browsers the fixed toolbar has tweaked borders
+@include break-medium() {
+	.block-editor-block-contextual-toolbar.is-fixed {
+		.block-editor-block-toolbar {
+			.components-toolbar-group,
+			.components-toolbar {
+				border-right: none;
+
+				&::after {
+					content: "";
+					width: $border-width;
+					margin-top: $grid-unit + $grid-unit-05;
+					margin-bottom: $grid-unit + $grid-unit-05;
+					background-color: $gray-300;
+					margin-left: $grid-unit;
+				}
+
+				& .components-toolbar-group.components-toolbar-group {
+					&::after {
+						display: none;
+					}
+				}
+			}
 
-	.show-icon-labels & {
-		margin-left: 0;
+			> :last-child,
+			> :last-child .components-toolbar-group,
+			> :last-child .components-toolbar {
+				&::after {
+					display: none;
+				}
+			}
+		}
 	}
 }
 
-.block-editor-block-parent-selector {
-	position: absolute;
-	top: -$border-width;
-	left: calc(-#{$grid-unit-60} - #{$grid-unit-10} - #{$border-width});
+.block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
+	margin-left: calc(#{$grid-unit-60} + #{$grid-unit-10});
 
 	.show-icon-labels & {
-		position: relative;
-		left: auto;
-		top: auto;
-		margin-top: -$border-width;
-		margin-left: -$border-width;
-		margin-bottom: -$border-width;
+		margin-left: 0;
 	}
 }
 
@@ -152,21 +172,38 @@
 		.block-editor-block-icon {
 			width: 0 !important;
 			height: 0 !important;
+			min-width: 0 !important;
 		}
 	}
 
 	// Parent selector overrides
 
 	.block-editor-block-parent-selector__button {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+
 		.block-editor-block-icon {
 			width: 0;
 		}
 	}
 
-	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+	.block-editor-block-mover .block-editor-block-mover__move-button-container {
 		width: auto;
 	}
 
+	.block-editor-block-mover.is-horizontal {
+		.block-editor-block-mover__move-button-container,
+		.block-editor-block-mover-button {
+			padding-left: 6px;
+			padding-right: 6px;
+		}
+	}
+
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
 		border-left: 1px solid $gray-900;
@@ -179,15 +216,9 @@
 		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;
-		padding-right: $grid-unit !important;
-	}
-
-	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 12px !important;
-		padding-right: 12px !important;
+	.block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
+		padding-left: $grid-unit-15;
+		padding-right: $grid-unit-15;
 	}
 
 	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
@@ -204,18 +235,10 @@
 
 		.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;
+			order: 2;
 		}
 
 		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {