@wordpress/block-editor 12.23.0 → 12.25.0

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

@@ -156,13 +156,13 @@
 
 	&.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(-36px);
+		transform: translateY(-32px);
 		@include reduce-motion("transition");
 	}
 
 	&.is-displacement-down {
 		transition: transform 0.2s;
-		transform: translateY(36px);
+		transform: translateY(32px);
 		@include reduce-motion("transition");
 	}
 
@@ -172,20 +172,20 @@
 	// worth of space for the visual indicator of where a block will be placed when dropped.
 	&.is-after-dragged-blocks {
 		transition: transform 0.2s;
-		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-up {
 		transition: transform 0.2s;
-		transform: translateY(calc(-36px + var(--wp-admin--list-view-dragged-items-height, 36px) * -1));
+		transform: translateY(calc(-32px + var(--wp-admin--list-view-dragged-items-height, 32px) * -1));
 		@include reduce-motion("transition");
 	}
 
 	&.is-after-dragged-blocks.is-displacement-down {
 		transition: transform 0.2s;
 		transform:
-			translateY(calc(36px + var(--wp-admin--list-view-dragged-items-height, 36px) *
+			translateY(calc(32px + var(--wp-admin--list-view-dragged-items-height, 32px) *
 			-1));
 		@include reduce-motion("transition");
 	}
@@ -204,15 +204,15 @@
 		z-index: -9999;
 	}
 
-	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
+	// List View renders a fixed number of items and relies on each item having a fixed height of 32px.
 	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
 	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
 	.block-editor-list-view-block-contents {
 		display: flex;
 		align-items: center;
 		width: 100%;
-		height: auto;
-		padding: ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) ($grid-unit-15 * 0.5) 0;
+		height: $grid-unit-40;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		border-radius: $radius-block-ui;
 		position: relative;
@@ -277,15 +277,14 @@
 	}
 
 	.block-editor-block-icon {
-		margin-right: $grid-unit-10;
+		margin-right: $grid-unit-10 * 0.5; // 6px.
 		flex: 0 0 $icon-size;
 	}
 
 	.block-editor-list-view-block__menu-cell,
 	.block-editor-list-view-block__mover-cell,
 	.block-editor-list-view-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
+		padding: 0;
 	}
 
 	.block-editor-list-view-block__menu-cell,
@@ -316,7 +315,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -379,8 +378,10 @@
 		}
 	}
 
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
+	// Style lock and position icons in line with image previews.
+	.block-editor-list-view-block-select-button__label-wrapper svg {
+		left: $grid-unit-05 * 0.5; // 2px.
+		position: relative;
 	}
 
 	.block-editor-list-view-block-select-button__title {
@@ -464,21 +465,12 @@ $block-navigation-max-indent: 8;
 // Chevron container metrics.
 .block-editor-list-view__expander {
 	height: $icon-size;
-	margin-left: $grid-unit-05;
 	width: $icon-size;
 	cursor: pointer;
 }
 
 .block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left:
-		($icon-size) * $block-navigation-max-indent + 4 *
-		($block-navigation-max-indent - 1);
-}
-
-.block-editor-list-view-leaf:not([aria-level="1"]) {
-	.block-editor-list-view__expander {
-		margin-right: 4px;
-	}
+	margin-left: ($grid-unit-30 * $block-navigation-max-indent);
 }
 
 // When updating the margin for each indentation level, the corresponding
@@ -488,9 +480,9 @@ $block-navigation-max-indent: 8;
 	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"]
 	.block-editor-list-view__expander {
 		@if $i - 1 >= 0 {
-			margin-left: ($icon-size * $i) + 4 * ($i - 1);
+			margin-left: ($grid-unit-30 * $i); // Effectivly centers the expander below the parent's icon.
 		} @else {
-			margin-left: ($icon-size * $i);
+			margin-left: 0;
 		}
 	}
 }
@@ -540,7 +532,7 @@ svg {
 
 	.block-editor-list-view-drop-indicator__line {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
-		height: 36px;
+		height: 32px;
 		border-radius: 4px;
 		overflow: hidden;
 	}
@@ -553,7 +545,7 @@ svg {
 .block-editor-list-view-placeholder {
 	padding: 0;
 	margin: 0;
-	height: 36px;
+	height: 32px;
 }
 
 .list-view-appender .block-editor-inserter__toggle {

package/src/components/list-view/use-list-view-drop-zone.js

@@ -62,7 +62,7 @@ import { store as blockEditorStore } from '../../store';
 
 // When the indentation level, the corresponding left margin in `style.scss`
 // must be updated as well to ensure the drop zone is aligned with the indentation.
-export const NESTING_LEVEL_INDENTATION = 28;
+export const NESTING_LEVEL_INDENTATION = 24;
 
 /**
  * Determines whether the user is positioning the dragged block to be
@@ -556,9 +556,14 @@ export default function useListViewDropZone( {
 	const ref = useDropZone( {
 		dropZoneElement,
 		onDrop( event ) {
+			throttled.cancel();
 			if ( target ) {
 				onBlockDrop( event );
 			}
+			// Use `undefined` value to indicate that the drag has concluded.
+			// This allows styling rules that are active only when a user is
+			// dragging to be removed.
+			setTarget( undefined );
 		},
 		onDragLeave() {
 			throttled.cancel();

package/src/components/list-view/utils.js

@@ -74,7 +74,9 @@ export function focusListItem( focusClientId, treeGridElement ) {
 		const row = treeGridElement?.querySelector(
 			`[role=row][data-block="${ focusClientId }"]`
 		);
-		if ( ! row ) return null;
+		if ( ! row ) {
+			return null;
+		}
 		// Focus the first focusable in the row, which is the ListViewBlockSelectButton.
 		return focus.focusable.find( row )[ 0 ];
 	};

package/src/components/media-placeholder/content.scss

@@ -1,10 +1,3 @@
-.block-editor-media-placeholder__url-input-container {
-	// Reset the margin to ensure the url popover is adjacent to the button.
-	.block-editor-media-placeholder__button {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-media-placeholder__url-input-form {
 	display: flex;
 
@@ -29,10 +22,6 @@
 	flex-shrink: 1;
 }
 
-.block-editor-media-placeholder__button {
-	margin-bottom: 0.5rem;
-}
-
 .block-editor-media-placeholder__cancel-button.is-link {
 	margin: 1em;
 	display: block;

package/src/components/media-placeholder/index.js

@@ -81,7 +81,7 @@ const URLSelectionUI = ( {
 				className="block-editor-media-placeholder__button"
 				onClick={ openURLInput }
 				isPressed={ isURLInputVisible }
-				variant="tertiary"
+				variant="secondary"
 			>
 				{ __( 'Insert from URL' ) }
 			</Button>
@@ -422,7 +422,7 @@ export function MediaPlaceholder( {
 					<Button
 						className="block-editor-media-placeholder__button"
 						onClick={ onToggleFeaturedImage }
-						variant="tertiary"
+						variant="secondary"
 					>
 						{ __( 'Use featured image' ) }
 					</Button>
@@ -435,7 +435,7 @@ export function MediaPlaceholder( {
 		const defaultButton = ( { open } ) => {
 			return (
 				<Button
-					variant="tertiary"
+					variant="secondary"
 					onClick={ () => {
 						open();
 					} }

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

@@ -165,7 +165,9 @@ function useToolbarFocus( {
 		}
 		return () => {
 			window.cancelAnimationFrame( raf );
-			if ( ! onIndexChange || ! navigableToolbarRef ) return;
+			if ( ! onIndexChange || ! navigableToolbarRef ) {
+				return;
+			}
 			// When the toolbar element is unmounted and onIndexChange is passed, we
 			// pass the focused toolbar item index so it can be hydrated later.
 			const items = getAllFocusableToolbarItemsIn( navigableToolbarRef );

package/src/components/provider/block-refs-provider.js

@@ -2,17 +2,12 @@
  * WordPress dependencies
  */
 import { createContext, useMemo } from '@wordpress/element';
+import { observableMap } from '@wordpress/compose';
 
-export const BlockRefs = createContext( {
-	refs: new Map(),
-	callbacks: new Map(),
-} );
+export const BlockRefs = createContext( { refsMap: observableMap() } );
 
 export function BlockRefsProvider( { children } ) {
-	const value = useMemo(
-		() => ( { refs: new Map(), callbacks: new Map() } ),
-		[]
-	);
+	const value = useMemo( () => ( { refsMap: observableMap() } ), [] );
 	return (
 		<BlockRefs.Provider value={ value }>{ children }</BlockRefs.Provider>
 	);

package/src/components/provider/test/use-block-sync.js

@@ -71,6 +71,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( fakeBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{ clientId: 'a', innerBlocks: [], attributes: { foo: 1 } },
@@ -88,6 +89,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( testBlocks );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 2 );
 
 		unmount();
 
@@ -95,6 +97,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).not.toHaveBeenCalled();
 		expect( resetBlocks ).toHaveBeenCalledWith( [] );
+		expect( resetBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'replaces the inner blocks of a block when the controlled value changes if a clientId is passed', async () => {
@@ -123,6 +126,7 @@ describe( 'useBlockSync hook', () => {
 			'test', // It should use the given client ID.
 			fakeBlocks // It should use the controlled blocks value.
 		);
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 
 		const testBlocks = [
 			{
@@ -148,6 +152,7 @@ describe( 'useBlockSync hook', () => {
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [
 			expect.objectContaining( { name: 'test/test-block' } ),
 		] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 2 );
 
 		unmount();
 
@@ -155,6 +160,7 @@ describe( 'useBlockSync hook', () => {
 		expect( onInput ).not.toHaveBeenCalled();
 		expect( resetBlocks ).not.toHaveBeenCalled();
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 3 );
 	} );
 
 	it( 'does not add the controlled blocks to the block-editor store if the store already contains them', async () => {
@@ -354,6 +360,7 @@ describe( 'useBlockSync hook', () => {
 		);
 
 		expect( replaceInnerBlocks ).toHaveBeenCalledWith( 'test', [] );
+		expect( replaceInnerBlocks ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).not.toHaveBeenCalled();
 		expect( onInput ).not.toHaveBeenCalled();
 	} );

package/src/components/provider/use-block-sync.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
-import { useRegistry, useSelect } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 
 /**
@@ -82,15 +82,6 @@ export default function useBlockSync( {
 	} = registry.dispatch( blockEditorStore );
 	const { getBlockName, getBlocks, getSelectionStart, getSelectionEnd } =
 		registry.select( blockEditorStore );
-	const isControlled = useSelect(
-		( select ) => {
-			return (
-				! clientId ||
-				select( blockEditorStore ).areInnerBlocksControlled( clientId )
-			);
-		},
-		[ clientId ]
-	);
 
 	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
 	const subscribed = useRef( false );
@@ -186,15 +177,6 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
-	useEffect( () => {
-		// When the block becomes uncontrolled, it means its inner state has been reset
-		// we need to take the blocks again from the external value property.
-		if ( ! isControlled ) {
-			pendingChanges.current.outgoing = [];
-			setControlledBlocks();
-		}
-	}, [ isControlled ] );
-
 	useEffect( () => {
 		const {
 			getSelectedBlocksInitialCaretPosition,
@@ -216,8 +198,9 @@ export default function useBlockSync( {
 			// the subscription is triggering for a block (`clientId !== null`)
 			// and its block name can't be found because it's not on the list.
 			// (`getBlockName( clientId ) === null`).
-			if ( clientId !== null && getBlockName( clientId ) === null )
+			if ( clientId !== null && getBlockName( clientId ) === null ) {
 				return;
+			}
 
 			// When RESET_BLOCKS on parent blocks get called, the controlled blocks
 			// can reset to uncontrolled, in these situations, it means we need to populate

package/src/components/recursion-provider/index.js

@@ -92,10 +92,10 @@ export const DeprecatedExperimentalRecursionProvider = ( props ) => {
 	return <RecursionProvider { ...props } />;
 };
 
-export const DeprecatedExperimentalUseHasRecursion = ( props ) => {
+export const DeprecatedExperimentalUseHasRecursion = ( ...args ) => {
 	deprecated( 'wp.blockEditor.__experimentalUseHasRecursion', {
 		since: '6.5',
 		alternative: 'wp.blockEditor.useHasRecursion',
 	} );
-	return useHasRecursion( ...props );
+	return useHasRecursion( ...args );
 };

package/src/components/rich-text/README.md

@@ -25,6 +25,10 @@ _Default: `div`._ The [tag name](https://www.w3.org/TR/html51/syntax.html#tag-na
 _Optional._ Placeholder text to show when the field is empty, similar to the
 [`input` and `textarea` attribute of the same name](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML5_updates#The_placeholder_attribute).
 
+### `disableLineBreaks: Boolean`
+
+_Optional._  Disables inserting line breaks on `Enter` when it is set to `true`
+
 ### `multiline: Boolean | String`
 
 _Optional._ By default, a line break will be inserted on <kbd>Enter</kbd>. If the editable field can contain multiple paragraphs, this property can be set to create new paragraphs on <kbd>Enter</kbd>.

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

@@ -15,33 +15,40 @@ import RichText from './';
  */
 import { getMultilineTag } from './utils';
 
-export function Content( {
-	value,
-	tagName: Tag,
-	multiline,
-	format,
-	...props
-} ) {
+export function valueToHTMLString( value, multiline ) {
 	if ( RichText.isEmpty( value ) ) {
-		const MultilineTag = getMultilineTag( multiline );
-		value = MultilineTag ? <MultilineTag /> : null;
-	} else if ( Array.isArray( value ) ) {
+		const multilineTag = getMultilineTag( multiline );
+		return multilineTag ? `<${ multilineTag }></${ multilineTag }>` : '';
+	}
+
+	if ( Array.isArray( value ) ) {
 		deprecated( 'wp.blockEditor.RichText value prop as children type', {
 			since: '6.1',
 			version: '6.3',
 			alternative: 'value prop as string',
 			link: 'https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/',
 		} );
-		value = <RawHTML>{ childrenSource.toHTML( value ) }</RawHTML>;
-	} else if ( typeof value === 'string' ) {
-		// To do: deprecate.
-		value = <RawHTML>{ value }</RawHTML>;
-	} else {
-		// To do: create a toReactComponent method on RichTextData, which we
-		// might in the future also use for the editable tree. See
-		// https://github.com/WordPress/gutenberg/pull/41655.
-		value = <RawHTML>{ value.toHTMLString() }</RawHTML>;
+		return childrenSource.toHTML( value );
+	}
+
+	// To do: deprecate string type.
+	if ( typeof value === 'string' ) {
+		return value;
 	}
 
+	// To do: create a toReactComponent method on RichTextData, which we
+	// might in the future also use for the editable tree. See
+	// https://github.com/WordPress/gutenberg/pull/41655.
+	return value.toHTMLString();
+}
+
+export function Content( {
+	value,
+	tagName: Tag,
+	multiline,
+	format,
+	...props
+} ) {
+	value = <RawHTML>{ valueToHTMLString( value, multiline ) }</RawHTML>;
 	return Tag ? <Tag { ...props }>{ value }</Tag> : value;
 }

package/src/components/rich-text/event-listeners/before-input-rules.js

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { insert, isCollapsed } from '@wordpress/rich-text';
+import { applyFilters } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+/**
+ * When typing over a selection, the selection will we wrapped by a matching
+ * character pair. The second character is optional, it defaults to the first
+ * character.
+ *
+ * @type {string[]} Array of character pairs.
+ */
+const wrapSelectionSettings = [ '`', '"', "'", '“”', '‘’' ];
+
+export default ( props ) => ( element ) => {
+	function onInput( event ) {
+		const { inputType, data } = event;
+		const { value, onChange, registry } = props.current;
+
+		// Only run the rules when inserting text.
+		if ( inputType !== 'insertText' ) {
+			return;
+		}
+
+		if ( isCollapsed( value ) ) {
+			return;
+		}
+
+		const pair = applyFilters(
+			'blockEditor.wrapSelectionSettings',
+			wrapSelectionSettings
+		).find(
+			( [ startChar, endChar ] ) => startChar === data || endChar === data
+		);
+
+		if ( ! pair ) {
+			return;
+		}
+
+		const [ startChar, endChar = startChar ] = pair;
+		const start = value.start;
+		const end = value.end + startChar.length;
+
+		let newValue = insert( value, startChar, start, start );
+		newValue = insert( newValue, endChar, end, end );
+
+		const {
+			__unstableMarkLastChangeAsPersistent,
+			__unstableMarkAutomaticChange,
+		} = registry.dispatch( blockEditorStore );
+
+		__unstableMarkLastChangeAsPersistent();
+		onChange( newValue );
+		__unstableMarkAutomaticChange();
+
+		const init = {};
+
+		for ( const key in event ) {
+			init[ key ] = event[ key ];
+		}
+
+		init.data = endChar;
+
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		const newEvent = new defaultView.InputEvent( 'input', init );
+
+		// Dispatch an `input` event with the new data. This will trigger the
+		// input rules.
+		// Postpone the `input` to the next event loop tick so that the dispatch
+		// doesn't happen synchronously in the middle of `beforeinput` dispatch.
+		// This is closer to how native `input` event would be timed, and also
+		// makes sure that the `input` event is dispatched only after the `onChange`
+		// call few lines above has fully updated the data store state and rerendered
+		// all affected components.
+		window.queueMicrotask( () => {
+			event.target.dispatchEvent( newEvent );
+		} );
+		event.preventDefault();
+	}
+
+	element.addEventListener( 'beforeinput', onInput );
+	return () => {
+		element.removeEventListener( 'beforeinput', onInput );
+	};
+};

package/src/components/rich-text/event-listeners/delete.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { isCollapsed, isEmpty } from '@wordpress/rich-text';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		const { keyCode } = event;
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		const { value, onMerge, onRemove } = props.current;
+
+		if ( keyCode === DELETE || keyCode === BACKSPACE ) {
+			const { start, end, text } = value;
+			const isReverse = keyCode === BACKSPACE;
+			const hasActiveFormats =
+				value.activeFormats && !! value.activeFormats.length;
+
+			// Only process delete if the key press occurs at an uncollapsed edge.
+			if (
+				! isCollapsed( value ) ||
+				hasActiveFormats ||
+				( isReverse && start !== 0 ) ||
+				( ! isReverse && end !== text.length )
+			) {
+				return;
+			}
+
+			if ( onMerge ) {
+				onMerge( ! isReverse );
+			}
+
+			// Only handle remove on Backspace. This serves dual-purpose of being
+			// an intentional user interaction distinguishing between Backspace and
+			// Delete to remove the empty field, but also to avoid merge & remove
+			// causing destruction of two fields (merge, then removed merged).
+			else if ( onRemove && isEmpty( value ) && isReverse ) {
+				onRemove( ! isReverse );
+			}
+
+			event.preventDefault();
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};