@wordpress/block-editor 14.1.0 → 14.2.0

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

@@ -91,8 +91,8 @@ export default function useBlockSync( {
 		[ clientId ]
 	);
 
-	const pendingChanges = useRef( { incoming: null, outgoing: [] } );
-	const subscribed = useRef( false );
+	const pendingChangesRef = useRef( { incoming: null, outgoing: [] } );
+	const subscribedRef = useRef( false );
 
 	const setControlledBlocks = () => {
 		if ( ! controlledBlocks ) {
@@ -113,15 +113,15 @@ export default function useBlockSync( {
 				const storeBlocks = controlledBlocks.map( ( block ) =>
 					cloneBlock( block )
 				);
-				if ( subscribed.current ) {
-					pendingChanges.current.incoming = storeBlocks;
+				if ( subscribedRef.current ) {
+					pendingChangesRef.current.incoming = storeBlocks;
 				}
 				__unstableMarkNextChangeAsNotPersistent();
 				replaceInnerBlocks( clientId, storeBlocks );
 			} );
 		} else {
-			if ( subscribed.current ) {
-				pendingChanges.current.incoming = controlledBlocks;
+			if ( subscribedRef.current ) {
+				pendingChangesRef.current.incoming = controlledBlocks;
 			}
 			resetBlocks( controlledBlocks );
 		}
@@ -153,7 +153,7 @@ export default function useBlockSync( {
 
 	// Determine if blocks need to be reset when they change.
 	useEffect( () => {
-		if ( pendingChanges.current.outgoing.includes( controlledBlocks ) ) {
+		if ( pendingChangesRef.current.outgoing.includes( controlledBlocks ) ) {
 			// Skip block reset if the value matches expected outbound sync
 			// triggered by this component by a preceding change detection.
 			// Only skip if the value matches expectation, since a reset should
@@ -161,18 +161,18 @@ export default function useBlockSync( {
 			// to allow that the consumer may apply modifications to reflect
 			// back on the editor.
 			if (
-				pendingChanges.current.outgoing[
-					pendingChanges.current.outgoing.length - 1
+				pendingChangesRef.current.outgoing[
+					pendingChangesRef.current.outgoing.length - 1
 				] === controlledBlocks
 			) {
-				pendingChanges.current.outgoing = [];
+				pendingChangesRef.current.outgoing = [];
 			}
 		} else if ( getBlocks( clientId ) !== controlledBlocks ) {
 			// Reset changing value in all other cases than the sync described
 			// above. Since this can be reached in an update following an out-
 			// bound sync, unset the outbound value to avoid considering it in
 			// subsequent renders.
-			pendingChanges.current.outgoing = [];
+			pendingChangesRef.current.outgoing = [];
 			setControlledBlocks();
 
 			if ( controlledSelection ) {
@@ -185,19 +185,19 @@ export default function useBlockSync( {
 		}
 	}, [ controlledBlocks, clientId ] );
 
-	const isMounted = useRef( false );
+	const isMountedRef = useRef( false );
 
 	useEffect( () => {
 		// On mount, controlled blocks are already set in the effect above.
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
+		if ( ! isMountedRef.current ) {
+			isMountedRef.current = true;
 			return;
 		}
 
 		// 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 = [];
+			pendingChangesRef.current.outgoing = [];
 			setControlledBlocks();
 		}
 	}, [ isControlled ] );
@@ -214,7 +214,7 @@ export default function useBlockSync( {
 		let isPersistent = isLastBlockChangePersistent();
 		let previousAreBlocksDifferent = false;
 
-		subscribed.current = true;
+		subscribedRef.current = true;
 		const unsubscribe = registry.subscribe( () => {
 			// Sometimes, when changing block lists, lingering subscriptions
 			// might trigger before they are cleaned up. If the block for which
@@ -243,10 +243,10 @@ export default function useBlockSync( {
 			blocks = newBlocks;
 			if (
 				areBlocksDifferent &&
-				( pendingChanges.current.incoming ||
+				( pendingChangesRef.current.incoming ||
 					__unstableIsLastBlockChangeIgnored() )
 			) {
-				pendingChanges.current.incoming = null;
+				pendingChangesRef.current.incoming = null;
 				isPersistent = newIsPersistent;
 				return;
 			}
@@ -266,7 +266,7 @@ export default function useBlockSync( {
 				// We need to be aware that it was caused by an outgoing change
 				// so that we do not treat it as an incoming change later on,
 				// which would cause a block reset.
-				pendingChanges.current.outgoing.push( blocks );
+				pendingChangesRef.current.outgoing.push( blocks );
 
 				// Inform the controlling entity that changes have been made to
 				// the block-editor store they should be aware about.
@@ -286,7 +286,7 @@ export default function useBlockSync( {
 		}, blockEditorStore );
 
 		return () => {
-			subscribed.current = false;
+			subscribedRef.current = false;
 			unsubscribe();
 		};
 	}, [ registry, clientId ] );

package/src/components/responsive-block-control/README.md

@@ -27,9 +27,6 @@ import {
 	InspectorControls,
 	__experimentalResponsiveBlockControl as ResponsiveBlockControl,
 } from '@wordpress/block-editor';
-import {
-	DimensionControl,
-} from '@wordpress/components';
 
 registerBlockType( 'my-plugin/my-block', {
 	// ...
@@ -37,34 +34,13 @@ registerBlockType( 'my-plugin/my-block', {
 	edit( { attributes, setAttributes } ) {
 
 		const [ isResponsive, setIsResponsive ] = useState( false );
-
-		// Used for example purposes only
-		const sizeOptions = [
-			{
-				label: 'Small',
-				value: 'small',
-			},
-			{
-				label: 'Medium',
-				value: 'medium',
-			},
-			{
-				label: 'Large',
-				value: 'large',
-			},
-		];
-
 		const { paddingSize } = attributes;
 
-
 		// Your custom control can be anything you'd like to use.
-		// You are not restricted to `DimensionControl`s, but this
-		// makes life easier if dealing with standard CSS values.
-		// see `packages/components/src/dimension-control/README.md`
 		const paddingControl = ( labelComponent, viewport ) => {
 			return (
-				<DimensionControl
-					__nextHasNoMarginBottom
+				<input
+					type="number"
 					label={ viewport.label }
 					onChange={ // handle update to padding value here  }
 					value={ paddingSize }
@@ -155,7 +131,7 @@ const renderDefaultControl = ( labelComponent, viewport ) => {
 	// 	id: 'small',
 	// 	label: 'All'
 	// }
-	return <DimensionControl label={ labelComponent } />;
+	return <SelectControl label={ labelComponent } />;
 };
 ```
 

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

@@ -15,7 +15,7 @@
 		outline: none;
 
 		[data-rich-text-format-boundary] {
-			border-radius: 2px;
+			border-radius: $radius-small;
 		}
 	}
 }

package/src/components/rich-text/event-listeners/paste-handler.js

@@ -26,10 +26,15 @@ export default ( props ) => ( element ) => {
 			preserveWhiteSpace,
 			pastePlainText,
 		} = props.current;
+		const { ownerDocument } = element;
+		const { defaultView } = ownerDocument;
+		const { anchorNode, focusNode } = defaultView.getSelection();
+		const containsSelection =
+			element.contains( anchorNode ) && element.contains( focusNode );
 
 		// The event listener is attached to the window, so we need to check if
 		// the target is the element.
-		if ( event.target !== element ) {
+		if ( ! containsSelection ) {
 			return;
 		}
 

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

@@ -20,8 +20,9 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -163,49 +164,47 @@ export function RichTextWrapper(
 		isBlockSelected,
 	] );
 
-	const disableBoundBlocks = useSelect(
+	const { disableBoundBlock, bindingsPlaceholder } = useSelect(
 		( select ) => {
-			// Disable Rich Text editing if block bindings specify that.
-			let _disableBoundBlocks = false;
-			if ( blockBindings && canBindBlock( blockName ) ) {
-				const blockTypeAttributes =
-					getBlockType( blockName ).attributes;
-				const { getBlockBindingsSource } = unlock(
-					select( blocksStore )
-				);
-				for ( const [ attribute, binding ] of Object.entries(
-					blockBindings
-				) ) {
-					if (
-						blockTypeAttributes?.[ attribute ]?.source !==
-						'rich-text'
-					) {
-						break;
-					}
-
-					// If the source is not defined, or if its value of `canUserEditValue` is `false`, disable it.
-					const blockBindingsSource = getBlockBindingsSource(
-						binding.source
-					);
-					if (
-						! blockBindingsSource?.canUserEditValue?.( {
-							select,
-							context: blockContext,
-							args: binding.args,
-						} )
-					) {
-						_disableBoundBlocks = true;
-						break;
-					}
-				}
+			if (
+				! blockBindings?.[ identifier ] ||
+				! canBindBlock( blockName )
+			) {
+				return {};
 			}
 
-			return _disableBoundBlocks;
+			const relatedBinding = blockBindings[ identifier ];
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+			const blockBindingsSource = getBlockBindingsSource(
+				relatedBinding.source
+			);
+
+			const _disableBoundBlock =
+				! blockBindingsSource?.canUserEditValue?.( {
+					select,
+					context: blockContext,
+					args: relatedBinding.args,
+				} );
+
+			const _bindingsPlaceholder = _disableBoundBlock
+				? relatedBinding?.args?.key || blockBindingsSource?.label
+				: sprintf(
+						/* translators: %s: source label or key */
+						__( 'Add %s' ),
+						relatedBinding?.args?.key || blockBindingsSource?.label
+				  );
+
+			return {
+				disableBoundBlock: _disableBoundBlock,
+				bindingsPlaceholder:
+					( ! adjustedValue || adjustedValue.length === 0 ) &&
+					_bindingsPlaceholder,
+			};
 		},
-		[ blockBindings, blockName ]
+		[ blockBindings, identifier, blockName, blockContext, adjustedValue ]
 	);
 
-	const shouldDisableEditing = readOnly || disableBoundBlocks;
+	const shouldDisableEditing = readOnly || disableBoundBlock;
 
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -335,7 +334,7 @@ export function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		onSelectionChange,
-		placeholder,
+		placeholder: bindingsPlaceholder || placeholder,
 		__unstableIsSelected: isSelected,
 		__unstableDisableFormats: disableFormats,
 		preserveWhiteSpace,
@@ -357,7 +356,19 @@ export function RichTextWrapper(
 	const inputEvents = useRef( new Set() );
 
 	function onFocus() {
-		anchorRef.current?.focus();
+		let element = anchorRef.current;
+
+		if ( ! element ) {
+			return;
+		}
+
+		// Writing flow might be editable, so we should make sure focus goes to
+		// the root editable element.
+		while ( element.parentElement?.isContentEditable ) {
+			element = element.parentElement;
+		}
+
+		element.focus();
 	}
 
 	const registry = useRegistry();
@@ -392,9 +403,11 @@ export function RichTextWrapper(
 				// Overridable props.
 				role="textbox"
 				aria-multiline={ ! disableLineBreaks }
-				aria-label={ placeholder }
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
+				aria-label={
+					bindingsPlaceholder || props[ 'aria-label' ] || placeholder
+				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [
 					// Rich text ref must be first because its focus listener

package/src/components/rich-text/style.scss

@@ -12,7 +12,7 @@
 	}
 
 	.components-toolbar {
-		border-radius: $radius-block-ui;
+		border-radius: $radius-small;
 	}
 
 	.components-toolbar__control,

package/src/components/rich-text/use-mark-persistent.js

@@ -10,7 +10,7 @@ import { useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 export function useMarkPersistent( { html, value } ) {
-	const previousText = useRef();
+	const previousTextRef = useRef();
 	const hasActiveFormats = !! value.activeFormats?.length;
 	const { __unstableMarkLastChangeAsPersistent } =
 		useDispatch( blockEditorStore );
@@ -18,18 +18,18 @@ export function useMarkPersistent( { html, value } ) {
 	// Must be set synchronously to make sure it applies to the last change.
 	useLayoutEffect( () => {
 		// Ignore mount.
-		if ( ! previousText.current ) {
-			previousText.current = value.text;
+		if ( ! previousTextRef.current ) {
+			previousTextRef.current = value.text;
 			return;
 		}
 
 		// Text input, so don't create an undo level for every character.
 		// Create an undo level after 1 second of no input.
-		if ( previousText.current !== value.text ) {
+		if ( previousTextRef.current !== value.text ) {
 			const timeout = window.setTimeout( () => {
 				__unstableMarkLastChangeAsPersistent();
 			}, 1000 );
-			previousText.current = value.text;
+			previousTextRef.current = value.text;
 			return () => {
 				window.clearTimeout( timeout );
 			};

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

@@ -28,6 +28,8 @@ export default function SkipToSelectedBlock() {
 
 	return selectedBlockClientId ? (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			variant="secondary"
 			className="block-editor-skip-to-selected-block"
 			onClick={ onClick }

package/src/components/spacing-sizes-control/style.scss

@@ -19,6 +19,7 @@
 	.spacing-sizes-control__range-control,
 	.spacing-sizes-control__custom-value-range {
 		flex: 1;
+		margin-bottom: 0; // Needed for some instances of the range control, such as the Spacer block.
 	}
 
 	.components-range-control__mark {

package/src/components/tool-selector/index.js

@@ -41,6 +41,8 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }

package/src/components/url-input/button.js

@@ -38,6 +38,8 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -51,6 +53,8 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -61,6 +65,8 @@ class URLInputButton extends Component {
 								onChange={ onChange }
 							/>
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								icon={ keyboardReturn }
 								label={ __( 'Submit' ) }
 								type="submit"

package/src/components/url-input/index.js

@@ -539,6 +539,8 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(

package/src/components/url-popover/stories/index.story.js

@@ -22,7 +22,12 @@ const TestURLPopover = () => {
 
 	return (
 		<>
-			<Button onClick={ () => setVisiblility( true ) }>Edit URL</Button>
+			<Button
+				__next40pxDefaultSize
+				onClick={ () => setVisiblility( true ) }
+			>
+				Edit URL
+			</Button>
 			{ isVisible && (
 				<URLPopover
 					onClose={ close }
@@ -37,6 +42,7 @@ const TestURLPopover = () => {
 					<form onSubmit={ close }>
 						<input type="url" value={ url } onChange={ setUrl } />
 						<Button
+							__next40pxDefaultSize
 							icon={ keyboardReturn }
 							label={ __( 'Apply' ) }
 							type="submit"

package/src/components/use-block-drop-zone/index.js

@@ -313,8 +313,8 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
-		getSettings,
 		isZoomOutMode,
+		getSectionRootClientId,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -360,7 +360,7 @@ export default function useBlockDropZone( {
 					return;
 				}
 
-				const { sectionRootClientId } = unlock( getSettings() );
+				const sectionRootClientId = getSectionRootClientId();
 
 				// In Zoom Out mode, if the target is not the section root provided by settings then
 				// do not allow dropping as the drop target is not within the root (that which is
@@ -492,6 +492,8 @@ export default function useBlockDropZone( {
 				getBlockNamesByClientId,
 				getDraggedBlockClientIds,
 				getBlockType,
+				getSectionRootClientId,
+				isZoomOutMode,
 				getBlocks,
 				getBlockListSettings,
 				dropZoneElement,
@@ -504,8 +506,6 @@ export default function useBlockDropZone( {
 				isGroupable,
 				getBlockVariations,
 				getGroupingBlockName,
-				getSettings,
-				isZoomOutMode,
 			]
 		),
 		200

package/src/components/warning/content.scss

@@ -7,7 +7,7 @@
 
 	// Block UI appearance.
 	border: $border-width solid $gray-900;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	background-color: $white;
 
 	.block-editor-warning__message {
@@ -30,21 +30,14 @@
 		flex-wrap: wrap;
 		align-items: baseline;
 		width: 100%;
+		gap: $grid-unit-15;
 	}
 
 	.block-editor-warning__actions {
 		align-items: center;
 		display: flex;
-		margin-top: 1em;
+		gap: $grid-unit-10;
 	}
-
-	.block-editor-warning__action {
-		margin: 0 $grid-unit-10 0 0;
-	}
-}
-
-.block-editor-warning__secondary {
-	margin: auto 0 auto $grid-unit-10;
 }
 
 .components-popover.block-editor-warning__dropdown {

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

@@ -23,6 +23,7 @@ import useSelectionObserver from './use-selection-observer';
 import useClickSelection from './use-click-selection';
 import useInput from './use-input';
 import useClipboardHandler from './use-clipboard-handler';
+import useEventRedirect from './use-event-redirect';
 import { store as blockEditorStore } from '../../store';
 
 export function useWritingFlow() {
@@ -65,6 +66,7 @@ export function useWritingFlow() {
 				},
 				[ hasMultiSelection ]
 			),
+			useEventRedirect(),
 		] ),
 		after,
 	];

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

@@ -19,6 +19,7 @@ import { useRefEffect } from '@wordpress/compose';
  */
 import { getBlockClientId, isInSameBlock } from '../../utils/dom';
 import { store as blockEditorStore } from '../../store';
+import { getSelectionRoot } from './utils';
 
 /**
  * Returns true if the element should consider edge navigation upon a keyboard
@@ -190,8 +191,7 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
-				event;
+			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,6 +233,11 @@ export default function useArrowNav() {
 				return;
 			}
 
+			const target =
+				ownerDocument.activeElement === node
+					? getSelectionRoot( ownerDocument )
+					: event.target;
+
 			// Abort if our current target is not a candidate for navigation
 			// (e.g. preserve native input behaviors).
 			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
@@ -274,6 +279,7 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
+				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -297,6 +303,7 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
+				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,

package/src/components/writing-flow/use-event-redirect.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { getSelectionRoot } from './utils';
+
+/**
+ * Whenever content editable is enabled on writing flow, it will have focus, so
+ * we need to dispatch some events to the root of the selection to ensure
+ * compatibility with rich text. In the future, perhaps the rich text event
+ * handlers should be attached to the window instead.
+ *
+ * Alternatively, we could try to find a way to always maintain rich text focus.
+ */
+export default function useEventRedirect() {
+	return useRefEffect( ( node ) => {
+		function onInput( event ) {
+			if ( event.target !== node ) {
+				return;
+			}
+
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
+			const prototype = Object.getPrototypeOf( event );
+			const constructorName = prototype.constructor.name;
+			const Constructor = defaultView[ constructorName ];
+			const root = getSelectionRoot( ownerDocument );
+
+			if ( ! root || root === node ) {
+				return;
+			}
+
+			const init = {};
+
+			for ( const key in event ) {
+				init[ key ] = event[ key ];
+			}
+
+			init.bubbles = false;
+
+			const newEvent = new Constructor( event.type, init );
+			const cancelled = ! root.dispatchEvent( newEvent );
+
+			if ( cancelled ) {
+				event.preventDefault();
+			}
+		}
+
+		const events = [
+			'beforeinput',
+			'input',
+			'compositionstart',
+			'compositionend',
+			'compositionupdate',
+			'keydown',
+		];
+
+		events.forEach( ( eventType ) => {
+			node.addEventListener( eventType, onInput );
+		} );
+
+		return () => {
+			events.forEach( ( eventType ) => {
+				node.removeEventListener( eventType, onInput );
+			} );
+		};
+	}, [] );
+}