@wordpress/block-editor 12.24.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

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/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 );
+	};
+};

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

@@ -0,0 +1,104 @@
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+import { insert, remove } from '@wordpress/rich-text';
+import { getBlockTransforms, findTransform } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+import { splitValue } from '../split-value';
+
+export default ( props ) => ( element ) => {
+	function onKeyDown( event ) {
+		if ( event.target.contentEditable !== 'true' ) {
+			return;
+		}
+
+		if ( event.defaultPrevented ) {
+			return;
+		}
+
+		if ( event.keyCode !== ENTER ) {
+			return;
+		}
+
+		const {
+			removeEditorOnlyFormats,
+			value,
+			onReplace,
+			onSplit,
+			onChange,
+			disableLineBreaks,
+			onSplitAtEnd,
+			onSplitAtDoubleLineEnd,
+			registry,
+		} = props.current;
+
+		event.preventDefault();
+
+		const _value = { ...value };
+		_value.formats = removeEditorOnlyFormats( value );
+		const canSplit = onReplace && onSplit;
+
+		if ( onReplace ) {
+			const transforms = getBlockTransforms( 'from' ).filter(
+				( { type } ) => type === 'enter'
+			);
+			const transformation = findTransform( transforms, ( item ) => {
+				return item.regExp.test( _value.text );
+			} );
+
+			if ( transformation ) {
+				onReplace( [
+					transformation.transform( {
+						content: _value.text,
+					} ),
+				] );
+				registry
+					.dispatch( blockEditorStore )
+					.__unstableMarkAutomaticChange();
+				return;
+			}
+		}
+
+		const { text, start, end } = _value;
+
+		if ( event.shiftKey ) {
+			if ( ! disableLineBreaks ) {
+				onChange( insert( _value, '\n' ) );
+			}
+		} else if ( canSplit ) {
+			splitValue( {
+				value: _value,
+				onReplace,
+				onSplit,
+			} );
+		} else if ( onSplitAtEnd && start === end && end === text.length ) {
+			onSplitAtEnd();
+		} else if (
+			// For some blocks it's desirable to split at the end of the
+			// block when there are two line breaks at the end of the
+			// block, so triple Enter exits the block.
+			onSplitAtDoubleLineEnd &&
+			start === end &&
+			end === text.length &&
+			text.slice( -2 ) === '\n\n'
+		) {
+			registry.batch( () => {
+				_value.start = _value.end - 2;
+				onChange( remove( _value ) );
+				onSplitAtDoubleLineEnd();
+			} );
+		} else if ( ! disableLineBreaks ) {
+			onChange( insert( _value, '\n' ) );
+		}
+	}
+
+	element.addEventListener( 'keydown', onKeyDown );
+	return () => {
+		element.removeEventListener( 'keydown', onKeyDown );
+	};
+};

package/src/components/rich-text/event-listeners/firefox-compat.js

@@ -0,0 +1,31 @@
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export default ( props ) => ( element ) => {
+	function onFocus() {
+		const { registry } = props.current;
+		if ( ! registry.select( blockEditorStore ).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 );
+	};
+};