@wordpress/block-editor 10.0.4 → 10.0.6

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

@@ -296,7 +296,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => {
 	};
 } );
 
-const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
+const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 	const {
 		updateBlockAttributes,
 		insertBlocks,
@@ -304,6 +304,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		replaceBlocks,
 		toggleSelection,
 		__unstableMarkLastChangeAsPersistent,
+		moveBlocksToPosition,
+		removeBlock,
+		selectBlock,
 	} = dispatch( blockEditorStore );
 
 	// Do not add new properties here, use `useDispatch` instead to avoid
@@ -311,7 +314,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 	return {
 		setAttributes( newAttributes ) {
 			const { getMultiSelectedBlockClientIds } =
-				select( blockEditorStore );
+				registry.select( blockEditorStore );
 			const multiSelectedBlockClientIds =
 				getMultiSelectedBlockClientIds();
 			const { clientId } = ownProps;
@@ -327,26 +330,124 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 		},
 		onInsertBlocksAfter( blocks ) {
 			const { clientId, rootClientId } = ownProps;
-			const { getBlockIndex } = select( blockEditorStore );
+			const { getBlockIndex } = registry.select( blockEditorStore );
 			const index = getBlockIndex( clientId );
 			insertBlocks( blocks, index + 1, rootClientId );
 		},
 		onMerge( forward ) {
 			const { clientId, rootClientId } = ownProps;
-			const { getPreviousBlockClientId, getNextBlockClientId, getBlock } =
-				select( blockEditorStore );
+			const {
+				getPreviousBlockClientId,
+				getNextBlockClientId,
+				getBlock,
+				getBlockAttributes,
+				getBlockName,
+				getBlockOrder,
+			} = registry.select( blockEditorStore );
 
+			// For `Delete` or forward merge, we should do the exact same thing
+			// as `Backspace`, but from the other block.
 			if ( forward ) {
+				if ( rootClientId ) {
+					const nextRootClientId =
+						getNextBlockClientId( rootClientId );
+
+					if ( nextRootClientId ) {
+						// If there is a block that follows with the same parent
+						// block name and the same attributes, merge the inner
+						// blocks.
+						if (
+							getBlockName( rootClientId ) ===
+							getBlockName( nextRootClientId )
+						) {
+							const rootAttributes =
+								getBlockAttributes( rootClientId );
+							const previousRootAttributes =
+								getBlockAttributes( nextRootClientId );
+
+							if (
+								Object.keys( rootAttributes ).every(
+									( key ) =>
+										rootAttributes[ key ] ===
+										previousRootAttributes[ key ]
+								)
+							) {
+								registry.batch( () => {
+									moveBlocksToPosition(
+										getBlockOrder( nextRootClientId ),
+										nextRootClientId,
+										rootClientId
+									);
+									removeBlock( nextRootClientId, false );
+								} );
+								return;
+							}
+						} else {
+							mergeBlocks( rootClientId, nextRootClientId );
+							return;
+						}
+					}
+				}
+
 				const nextBlockClientId = getNextBlockClientId( clientId );
-				if ( nextBlockClientId ) {
+
+				if ( ! nextBlockClientId ) {
+					return;
+				}
+
+				// Check if it's possibile to "unwrap" the following block
+				// before trying to merge.
+				const replacement = switchToBlockType(
+					getBlock( nextBlockClientId ),
+					'*'
+				);
+
+				if ( replacement && replacement.length ) {
+					replaceBlocks( nextBlockClientId, replacement );
+				} else {
 					mergeBlocks( clientId, nextBlockClientId );
 				}
 			} else {
 				const previousBlockClientId =
 					getPreviousBlockClientId( clientId );
+
 				if ( previousBlockClientId ) {
 					mergeBlocks( previousBlockClientId, clientId );
 				} else if ( rootClientId ) {
+					const previousRootClientId =
+						getPreviousBlockClientId( rootClientId );
+
+					// If there is a preceding block with the same parent block
+					// name and the same attributes, merge the inner blocks.
+					if (
+						previousRootClientId &&
+						getBlockName( rootClientId ) ===
+							getBlockName( previousRootClientId )
+					) {
+						const rootAttributes =
+							getBlockAttributes( rootClientId );
+						const previousRootAttributes =
+							getBlockAttributes( previousRootClientId );
+
+						if (
+							Object.keys( rootAttributes ).every(
+								( key ) =>
+									rootAttributes[ key ] ===
+									previousRootAttributes[ key ]
+							)
+						) {
+							registry.batch( () => {
+								moveBlocksToPosition(
+									getBlockOrder( rootClientId ),
+									rootClientId,
+									previousRootClientId
+								);
+								removeBlock( rootClientId, false );
+							} );
+							return;
+						}
+					}
+
 					// Attempt to "unwrap" the block contents when there's no
 					// preceding block to merge with.
 					const replacement = switchToBlockType(
@@ -354,7 +455,10 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, { select } ) => {
 						'*'
 					);
 					if ( replacement && replacement.length ) {
-						replaceBlocks( rootClientId, replacement, 0 );
+						registry.batch( () => {
+							replaceBlocks( rootClientId, replacement );
+							selectBlock( replacement[ 0 ].clientId, 0 );
+						} );
 					}
 				}
 			}

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

@@ -8,8 +8,19 @@
  * Cross-Block Selection
  */
 
+@keyframes selection-overlay__fade-in-animation {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 0.4;
+	}
+}
+
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
+// Also be sure to test partial selections in Safari, as it draws the
+// selection marker with an entirely different model than Blink.
 .block-editor-block-list__layout {
 	position: relative;
 
@@ -19,63 +30,88 @@
 		background: transparent;
 	}
 
-	// The primary indicator of selection in text is the native selection marker.
-	// When selecting multiple blocks, we provide an additional selection indicator.
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
-	.block-editor-block-list__block.is-highlighted,
-	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
+	.has-multi-selection &::selection {
+		background: transparent;
+	}
+
+	// Block multi selection
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+		// Hide the native selection indicator, for the selection, and children.
+		&::selection,
+		& ::selection {
+			background: transparent;
+		}
+
+		// Draw a spot color overlay.
 		&::after {
-			// Show selection borders around every non-nested block's actual footprint.
+			content: "";
 			position: absolute;
 			z-index: 1;
 			pointer-events: none;
-			content: "";
 			top: $border-width;
+			right: $border-width;
 			bottom: $border-width;
 			left: $border-width;
-			right: $border-width;
+			background: var(--wp-admin-theme-color);
+			opacity: 0.4;
 
-			// Everything else.
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			// Animate.
+			animation: selection-overlay__fade-in-animation 0.1s ease-out;
+			animation-fill-mode: forwards;
+			@include reduce-motion("animation");
 
-			// Windows High Contrast mode will show this outline.
+			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
-
-			// Show a lighter color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width $dark-theme-focus;
-			}
-		}
-
-		// Provide exceptions for placeholders.
-		.components-placeholder,
-		.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-			::selection {
-				background: transparent;
-			}
 		}
 	}
 
-	// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
-	.has-multi-selection &::selection {
-		background: transparent;
-	}
+	// 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-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);
 
-	.block-editor-block-list__block.is-highlighted::after {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		outline: $border-width solid transparent;
+		// Show outline in high contrast mode.
+		outline: 2px solid transparent;
 	}
 
-	&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		outline: 2px solid transparent;
+	// Block focus.
+	.block-editor-block-list__block:not([contenteditable]):focus {
+		outline: none;
+
+		// We're using a pseudo element to overflow placeholder borders
+		// and any border inside the block itself.
+		&::after {
+			content: "";
+			position: absolute;
+			z-index: 1;
+			pointer-events: none;
+			top: $border-width;
+			right: $border-width;
+			bottom: $border-width;
+			left: $border-width;
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
+			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+			}
+		}
 	}
 
+	// Moving blocks using keyboard (Ellipsis > Move).
 	& .is-block-moving-mode.block-editor-block-list__block.is-selected {
+		box-shadow: none;
+		outline: none;
 
-		&::before {
+		&::after {
 			content: "";
 			position: absolute;
 			z-index: 0;
@@ -90,14 +126,10 @@
 			border-radius: $radius-block-ui;
 			border-top: 4px solid $gray-400;
 		}
-
-		&::after {
-			content: none;
-		}
 	}
 
 	& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
-		&::before {
+		&::after {
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
@@ -134,29 +166,16 @@
 }
 
 .block-editor-block-list__layout .block-editor-block-list__block {
+	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
+	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
+	// Blink based browsers, but it also does "crop" the marker, which can result in a small line
+	// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
+	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
 	// Re-enable text-selection on editable blocks.
 	user-select: text;
 
-	// Hide the select style pseudo element as otherwise it gets shwon as "selected" in Safari.
-	&.is-partially-selected::after {
-		// By positioning this pseudo element outside the boundaries of the parent block,
-		// when partially selected it hides the pseudo element selection in Safari.
-		top: -0.5px;
-		right: -0.5px;
-		bottom: -0.5px;
-		left: -0.5px;
-	}
-
-	&.is-highlighted::after,
-	&.is-highlighted ~ .is-multi-selected::after {
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-	}
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
@@ -167,7 +186,6 @@
 	/**
 	 * Notices
 	 */
-
 	.components-placeholder .components-with-notices-ui {
 		margin: -10px 0 12px 0;
 	}
@@ -186,56 +204,6 @@
 		}
 	}
 
-
-	/**
-	 * Block Layout
-	 */
-
-	// Navigate mode & Focused wrapper.
-	// We're using a pseudo element to overflow placeholder borders
-	// and any border inside the block itself.
-	&:not([contenteditable]):focus {
-		outline: none;
-
-		&::after {
-			position: absolute;
-			z-index: 1;
-			pointer-events: none;
-			content: "";
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-
-			// 2px outside.
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
-
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
-			}
-		}
-	}
-
-	/**
-	* Block styles and alignments
-	*/
-	&::after {
-		content: "";
-		pointer-events: none;
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		border-radius: $radius-block-ui;
-		box-shadow: 0 0 0 0 transparent;
-		transition: box-shadow 0.1s linear;
-		@include reduce-motion("transition");
-	}
-
 	// Warnings
 	&.has-warning {
 		min-height: $grid-unit-60;
@@ -282,7 +250,7 @@
 		}
 	}
 
-	// Reusable blocks parent borer.
+	// Reusable blocks parent border.
 	&.is-reusable.has-child-selected::after {
 		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
 	}
@@ -296,16 +264,8 @@
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 	&.is-hovered {
 		cursor: default;
-
-		&::after {
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			// Border is outset, so subtract the width to achieve correct radius.
-			border-radius: $radius-block-ui - $border-width;
-		}
+		box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
+		border-radius: $radius-block-ui;
 	}
 
 	&.is-selected {
@@ -315,19 +275,11 @@
 			cursor: unset;
 		}
 
-		&::after {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-		}
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
+		border-radius: $radius-block-ui;
 
 		&:focus {
-			&::after {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			}
+			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 		}
 	}
 }

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

@@ -35,7 +35,9 @@
 // When the appender shows up in empty container blocks, such as Group and Columns, add an extra click state.
 .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-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 > & {
 		pointer-events: none;
 
 		&::after {