@wordpress/block-editor 8.4.0 → 8.5.0

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

@@ -15,7 +15,8 @@
 	// Use position relative for row animation.
 	position: relative;
 
-	&.is-selected {
+	// The background has to be applied to the td, not tr, or border-radius won't work.
+	&.is-selected td {
 		background: var(--wp-admin-theme-color);
 	}
 	&.is-selected .block-editor-list-view-block-contents,
@@ -40,27 +41,53 @@
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
 	}
 
+	&.is-dragging {
+		display: none;
+	}
+
+	// Border radius for corners of the selected item.
+	&.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:first-child {
+		border-bottom-left-radius: $radius-block-ui;
+	}
+	&.is-last-selected td:last-child {
+		border-bottom-right-radius: $radius-block-ui;
+	}
 	&.is-branch-selected:not(.is-selected) {
 		// Lighten a CSS variable without introducing a new SASS variable
 		background:
 			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
 			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
 	}
-	&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
-		border-radius: 2px 2px 0 0;
+	&.is-branch-selected.is-first-selected td:first-child {
+		border-top-left-radius: $radius-block-ui;
+	}
+	&.is-branch-selected.is-first-selected td:last-child {
+		border-top-right-radius: $radius-block-ui;
 	}
 	&[aria-expanded="false"] {
-		&.is-branch-selected.is-selected .block-editor-list-view-block-contents {
-			border-radius: 2px;
+		&.is-branch-selected.is-first-selected td:first-child {
+			border-top-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-first-selected td:last-child {
+			border-top-right-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:first-child {
+			border-bottom-left-radius: $radius-block-ui;
+		}
+		&.is-branch-selected.is-last-selected td:last-child {
+			border-bottom-right-radius: $radius-block-ui;
 		}
 	}
-	&.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
+	&.is-branch-selected:not(.is-selected) td {
 		border-radius: 0;
 	}
 
-	&.is-dragging {
-		display: none;
-	}
 
 	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
@@ -73,7 +100,7 @@
 		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
-		border-radius: 2px;
+		border-radius: $radius-block-ui;
 		position: relative;
 		white-space: nowrap;
 
@@ -106,7 +133,7 @@
 			left: 0;
 			border-radius: inherit;
 			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			z-index: 1;
+			z-index: 2;
 			pointer-events: none;
 
 			// Hide focus styles while a user is dragging blocks/files etc.
@@ -152,17 +179,23 @@
 	.block-editor-list-view-block__mover-cell {
 		line-height: 0;
 		width: $button-size;
-		opacity: 0;
 		vertical-align: middle;
 		@include reduce-motion("transition");
 
+		> * {
+			opacity: 0;
+		}
+
 		// Show on hover, visible, and show above to keep the hit area size.
 		&:hover,
 		&.is-visible {
 			position: relative;
 			z-index: 1;
-			opacity: 1;
-			@include edit-post__fade-in-animation;
+
+			> * {
+				opacity: 1;
+				@include edit-post__fade-in-animation;
+			}
 		}
 
 		&,
@@ -278,6 +311,15 @@
 	&.is-selected .block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.3);
 	}
+
+	.block-editor-list-view-block-select-button__lock {
+		line-height: 0;
+		width: 24px;
+		min-width: 24px;
+		margin-left: auto;
+		padding: 0;
+		vertical-align: middle;
+	}
 }
 
 .block-editor-list-view-block-select-button__description,

package/src/components/media-placeholder/README.md

@@ -140,6 +140,14 @@ Whether to allow multiple selection of files or not.
 -   Default: `false`
 -   Platform: Web
 
+### mediaPreview
+
+The component is rendered as a preview in the placeholder.
+
+-   Type: `Component`
+-   Required: No
+-   Platform: Web
+
 ### onError
 
 Callback called when an upload error happens.

package/src/components/media-replace-flow/index.js

@@ -212,6 +212,9 @@ const MediaReplaceFlow = ( {
 	);
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-replace-flow/README.md
+ */
 export default compose( [
 	withDispatch( ( dispatch ) => {
 		const { createNotice, removeNotice } = dispatch( noticesStore );

package/src/components/multi-selection-inspector/index.js

@@ -5,7 +5,7 @@ import { sprintf, _n } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 import { serialize } from '@wordpress/blocks';
 import { count as wordCount } from '@wordpress/wordcount';
-import { stack } from '@wordpress/icons';
+import { copy } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,7 +18,7 @@ function MultiSelectionInspector( { blocks } ) {
 
 	return (
 		<div className="block-editor-multi-selection-inspector__card">
-			<BlockIcon icon={ stack } showColors />
+			<BlockIcon icon={ copy } showColors />
 			<div className="block-editor-multi-selection-inspector__card-content">
 				<div className="block-editor-multi-selection-inspector__card-title">
 					{ sprintf(

package/src/components/rich-text/index.js

@@ -45,6 +45,7 @@ import { useFormatTypes } from './use-format-types';
 import { useRemoveBrowserShortcuts } from './use-remove-browser-shortcuts';
 import { useShortcuts } from './use-shortcuts';
 import { useInputEvents } from './use-input-events';
+import { useFirefoxCompat } from './use-firefox-compat';
 import FormatEdit from './format-edit';
 import { getMultilineTag, getAllowedFormats } from './utils';
 
@@ -131,6 +132,7 @@ function RichTextWrapper(
 		if ( originalIsSelected === undefined ) {
 			isSelected =
 				selectionStart.clientId === clientId &&
+				selectionEnd.clientId === clientId &&
 				selectionStart.attributeKey === identifier;
 		} else if ( originalIsSelected ) {
 			isSelected = selectionStart.clientId === clientId;
@@ -171,7 +173,26 @@ function RichTextWrapper(
 
 	const onSelectionChange = useCallback(
 		( start, end ) => {
-			selectionChange( clientId, identifier, start, end );
+			const selection = {};
+			const unset = start === undefined && end === undefined;
+
+			if ( typeof start === 'number' || unset ) {
+				selection.start = {
+					clientId,
+					attributeKey: identifier,
+					offset: start,
+				};
+			}
+
+			if ( typeof end === 'number' || unset ) {
+				selection.end = {
+					clientId,
+					attributeKey: identifier,
+					offset: end,
+				};
+			}
+
+			selectionChange( selection );
 		},
 		[ clientId, identifier ]
 	);
@@ -340,6 +361,7 @@ function RichTextWrapper(
 						__unstableAllowPrefixTransformations,
 						formatTypes,
 						onReplace,
+						selectionChange,
 					} ),
 					useRemoveBrowserShortcuts(),
 					useShortcuts( keyboardShortcuts ),
@@ -371,6 +393,7 @@ function RichTextWrapper(
 						disableLineBreaks,
 						onSplitAtEnd,
 					} ),
+					useFirefoxCompat(),
 					anchorRef,
 				] ) }
 				contentEditable={ true }

package/src/components/rich-text/split-value.js

@@ -20,8 +20,12 @@ export function splitValue( {
 		return;
 	}
 
+	// Ensure the value has a selection. This might happen when trying to split
+	// an empty value before there was a `selectionchange` event.
+	const { start = 0, end = 0 } = value;
+	const valueWithEnsuredSelection = { ...value, start, end };
 	const blocks = [];
-	const [ before, after ] = split( value );
+	const [ before, after ] = split( valueWithEnsuredSelection );
 	const hasPastedBlocks = pastedBlocks.length > 0;
 	let lastPastedBlockIndex = -1;
 

package/src/components/rich-text/use-firefox-compat.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export function useFirefoxCompat() {
+	const { isMultiSelecting } = useSelect( blockEditorStore );
+	return useRefEffect( ( element ) => {
+		function onFocus() {
+			if ( ! isMultiSelecting() ) {
+				return;
+			}
+
+			// This is a little hack to work around focus issues with nested
+			// editable elements in Firefox. For some reason the editable child
+			// element sometimes regains focus, while it should not be focusable
+			// and focus should remain on the editable parent element.
+			// To do: try to find the cause of the shifting focus.
+			const parentEditable = element.parentElement.closest(
+				'[contenteditable="true"]'
+			);
+
+			if ( parentEditable ) {
+				parentEditable.focus();
+			}
+		}
+
+		element.addEventListener( 'focus', onFocus );
+		return () => {
+			element.removeEventListener( 'focus', onFocus );
+		};
+	}, [] );
+}

package/src/components/rich-text/use-input-rules.js

@@ -1,9 +1,14 @@
+/**
+ * External dependencies
+ */
+import { findKey } from 'lodash';
+
 /**
  * WordPress dependencies
  */
 import { useRef } from '@wordpress/element';
 import { useRefEffect } from '@wordpress/compose';
-import { slice, toHTMLString } from '@wordpress/rich-text';
+import { insert, toHTMLString } from '@wordpress/rich-text';
 import { getBlockTransforms, findTransform } from '@wordpress/blocks';
 import { useDispatch } from '@wordpress/data';
 
@@ -13,6 +18,37 @@ import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { preventEventDiscovery } from './prevent-event-discovery';
 
+// A robust way to retain selection position through various
+// transforms is to insert a special character at the position and
+// then recover it.
+const START_OF_SELECTED_AREA = '\u0086';
+
+function findSelection( blocks ) {
+	let i = blocks.length;
+
+	while ( i-- ) {
+		const attributeKey = findKey(
+			blocks[ i ].attributes,
+			( v ) =>
+				typeof v === 'string' &&
+				v.indexOf( START_OF_SELECTED_AREA ) !== -1
+		);
+
+		if ( attributeKey ) {
+			blocks[ i ].attributes[ attributeKey ] = blocks[ i ].attributes[
+				attributeKey
+			].replace( START_OF_SELECTED_AREA, '' );
+			return blocks[ i ].clientId;
+		}
+
+		const nestedSelection = findSelection( blocks[ i ].innerBlocks );
+
+		if ( nestedSelection ) {
+			return nestedSelection;
+		}
+	}
+}
+
 export function useInputRules( props ) {
 	const {
 		__unstableMarkLastChangeAsPersistent,
@@ -22,7 +58,7 @@ export function useInputRules( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function inputRule() {
-			const { value, onReplace } = propsRef.current;
+			const { value, onReplace, selectionChange } = propsRef.current;
 
 			if ( ! onReplace ) {
 				return;
@@ -52,10 +88,11 @@ export function useInputRules( props ) {
 			}
 
 			const content = toHTMLString( {
-				value: slice( value, start, text.length ),
+				value: insert( value, START_OF_SELECTED_AREA, 0, start ),
 			} );
 			const block = transformation.transform( content );
 
+			selectionChange( findSelection( [ block ] ) );
 			onReplace( [ block ] );
 			__unstableMarkAutomaticChange();
 		}

package/src/components/skip-to-selected-block/index.js

@@ -28,6 +28,9 @@ const SkipToSelectedBlock = ( { selectedBlockClientId } ) => {
 	) : null;
 };
 
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/skip-to-selected-block/README.md
+ */
 export default withSelect( ( select ) => {
 	return {
 		selectedBlockClientId: select(

package/src/components/url-input/style.scss

@@ -71,12 +71,13 @@ $input-size: 300px;
 .block-editor-url-input .components-spinner {
 	display: none;
 	@include break-small() {
-		display: inherit;
+		display: grid;
 	}
 }
 
 .block-editor-url-input__suggestion {
-	padding: 4px $input-padding;
+	min-height: $button-size;
+	height: auto;
 	color: $gray-700;
 	display: block;
 	font-size: $default-font-size;

package/src/components/writing-flow/index.js

@@ -18,6 +18,10 @@ import useMultiSelection from './use-multi-selection';
 import useTabNav from './use-tab-nav';
 import useArrowNav from './use-arrow-nav';
 import useSelectAll from './use-select-all';
+import useDragSelection from './use-drag-selection';
+import useSelectionObserver from './use-selection-observer';
+import useClickSelection from './use-click-selection';
+import useInput from './use-input';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -31,6 +35,10 @@ export function useWritingFlow() {
 		before,
 		useMergeRefs( [
 			ref,
+			useInput(),
+			useDragSelection(),
+			useSelectionObserver(),
+			useClickSelection(),
 			useMultiSelection(),
 			useSelectAll(),
 			useArrowNav(),

package/src/components/writing-flow/readme.md

@@ -0,0 +1,28 @@
+# Writing Flow
+
+This hook handles selection across blocks.
+
+## Partial multi-block selection
+
+Selecting across blocks is possible by temporarily setting the `contentEditable`
+attribute to `true`. This sounds scary, but we prevent all default behaviours
+except for selection, so don't worry. :)
+
+* For selection by mouse, we make everything editable when the mouse leaves an
+  editable field.
+* For Shift+Click selection, we do it on `mousedown`.
+* For keyboard selection we do it when the selection reaches the edge of an
+  editable field.
+
+In the future, we should consider using the `contentEditable` attribute for
+arrow key navigation as well.
+
+Now that it's possible to select across blocks, we need to sync this state to
+the block editor store. We can do this by listening to the `selectionchange`
+event. In writing flow, we can sync the selected block client ID, but when the
+selection starts or ends in a rich text field, it will be rich text that sync a
+more precise position (the block attribute key and offset in addition to the
+client ID).
+
+With the selection state in the block editor store, we can now handle things
+like Backspace, Delete, and Enter.

package/src/components/writing-flow/use-arrow-nav.js

@@ -16,7 +16,7 @@ import {
 	isRTL,
 } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -120,16 +120,12 @@ export function getClosestTabbable(
 export default function useArrowNav() {
 	const {
 		getSelectedBlockClientId,
-		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
-		getFirstMultiSelectedBlockClientId,
-		getLastMultiSelectedBlockClientId,
 		getSettings,
 		hasMultiSelection,
 	} = useSelect( blockEditorStore );
-	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -140,44 +136,6 @@ export default function useArrowNav() {
 			verticalRect = null;
 		}
 
-		function expandSelection( isReverse ) {
-			const selectedBlockClientId = getSelectedBlockClientId();
-			const selectionStartClientId = getMultiSelectedBlocksStartClientId();
-			const selectionEndClientId = getMultiSelectedBlocksEndClientId();
-			const selectionBeforeEndClientId = getPreviousBlockClientId(
-				selectionEndClientId || selectedBlockClientId
-			);
-			const selectionAfterEndClientId = getNextBlockClientId(
-				selectionEndClientId || selectedBlockClientId
-			);
-			const nextSelectionEndClientId = isReverse
-				? selectionBeforeEndClientId
-				: selectionAfterEndClientId;
-
-			if ( nextSelectionEndClientId ) {
-				if ( selectionStartClientId === nextSelectionEndClientId ) {
-					selectBlock( nextSelectionEndClientId );
-				} else {
-					multiSelect(
-						selectionStartClientId || selectedBlockClientId,
-						nextSelectionEndClientId
-					);
-				}
-			}
-		}
-
-		function moveSelection( isReverse ) {
-			const selectedFirstClientId = getFirstMultiSelectedBlockClientId();
-			const selectedLastClientId = getLastMultiSelectedBlockClientId();
-			const focusedBlockClientId = isReverse
-				? selectedFirstClientId
-				: selectedLastClientId;
-
-			if ( focusedBlockClientId ) {
-				selectBlock( focusedBlockClientId );
-			}
-		}
-
 		/**
 		 * Returns true if the given target field is the last in its block which
 		 * can be considered for tab transition. For example, in a block with
@@ -218,12 +176,6 @@ export default function useArrowNav() {
 			const { defaultView } = ownerDocument;
 
 			if ( hasMultiSelection() ) {
-				if ( isNav ) {
-					const action = isShift ? expandSelection : moveSelection;
-					action( isReverse );
-					event.preventDefault();
-				}
-
 				return;
 			}
 
@@ -278,10 +230,9 @@ export default function useArrowNav() {
 					isTabbableEdge( target, isReverse ) &&
 					isNavEdge( target, isReverse )
 				) {
-					// Shift key is down, and there is multi selection or we're
-					// at the end of the current block.
-					expandSelection( isReverse );
-					event.preventDefault();
+					node.contentEditable = true;
+					// Firefox doesn't automatically move focus.
+					node.focus();
 				}
 			} else if (
 				isVertical &&

package/src/components/writing-flow/use-click-selection.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { getBlockClientId } from '../../utils/dom';
+
+export default function useClickSelection() {
+	const { multiSelect, selectBlock } = useDispatch( blockEditorStore );
+	const {
+		isSelectionEnabled,
+		getBlockParents,
+		getBlockSelectionStart,
+		hasMultiSelection,
+	} = useSelect( blockEditorStore );
+	return useRefEffect(
+		( node ) => {
+			function onMouseDown( event ) {
+				// The main button.
+				// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+				if ( ! isSelectionEnabled() || event.button !== 0 ) {
+					return;
+				}
+
+				const startClientId = getBlockSelectionStart();
+				const clickedClientId = getBlockClientId( event.target );
+
+				if ( event.shiftKey ) {
+					if ( startClientId !== clickedClientId ) {
+						node.contentEditable = true;
+						// Firefox doesn't automatically move focus.
+						node.focus();
+					}
+				} else if ( hasMultiSelection() ) {
+					// Allow user to escape out of a multi-selection to a
+					// singular selection of a block via click. This is handled
+					// here since focus handling excludes blocks when there is
+					// multiselection, as focus can be incurred by starting a
+					// multiselection (focus moved to first block's multi-
+					// controls).
+					selectBlock( clickedClientId );
+				}
+			}
+
+			node.addEventListener( 'mousedown', onMouseDown );
+
+			return () => {
+				node.removeEventListener( 'mousedown', onMouseDown );
+			};
+		},
+		[
+			multiSelect,
+			selectBlock,
+			isSelectionEnabled,
+			getBlockParents,
+			getBlockSelectionStart,
+			hasMultiSelection,
+		]
+	);
+}