@wordpress/block-editor 14.3.2 → 14.3.3

package/build-style/content-rtl.css

@@ -497,6 +497,16 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-right: -1px;
   margin-left: -1px;
   transition: background-color 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  color: #000;
+  font-weight: normal;
+}
+.is-zoomed-out .block-editor-block-list__zoom-out-separator {
+  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;

package/build-style/content.css

@@ -497,6 +497,16 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
   margin-left: -1px;
   margin-right: -1px;
   transition: background-color 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  color: #000;
+  font-weight: normal;
+}
+.is-zoomed-out .block-editor-block-list__zoom-out-separator {
+  font-size: calc(13px * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale) ));
 }
 .block-editor-block-list__zoom-out-separator.is-dragged-over {
   background: #ccc;

package/build-style/style-rtl.css

@@ -3465,6 +3465,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   border: 0;
   border-left: 1px solid #ddd;
 }
+.block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
+  background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+  border-radius: 2px;
+}
 .block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }

package/build-style/style.css

@@ -3466,6 +3466,10 @@ div.block-editor-bindings__panel button:hover .block-editor-bindings__item span
   border: 0;
   border-right: 1px solid #ddd;
 }
+.block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button::before {
+  background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+  border-radius: 2px;
+}
 .block-editor-block-toolbar.is-synced .block-editor-block-switcher .components-button .block-editor-block-icon, .block-editor-block-toolbar.is-connected .block-editor-block-switcher .components-button .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.3.2",
+	"version": "14.3.3",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,31 +36,31 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.8.1",
-		"@wordpress/api-fetch": "^7.8.1",
+		"@wordpress/a11y": "^4.8.2",
+		"@wordpress/api-fetch": "^7.8.2",
 		"@wordpress/blob": "^4.8.1",
 		"@wordpress/block-serialization-default-parser": "^5.8.1",
-		"@wordpress/blocks": "^13.8.2",
-		"@wordpress/commands": "^1.8.2",
-		"@wordpress/components": "^28.8.2",
-		"@wordpress/compose": "^7.8.2",
-		"@wordpress/data": "^10.8.2",
-		"@wordpress/date": "^5.8.1",
-		"@wordpress/deprecated": "^4.8.1",
-		"@wordpress/dom": "^4.8.1",
+		"@wordpress/blocks": "^13.8.3",
+		"@wordpress/commands": "^1.8.3",
+		"@wordpress/components": "^28.8.3",
+		"@wordpress/compose": "^7.8.3",
+		"@wordpress/data": "^10.8.3",
+		"@wordpress/date": "^5.8.2",
+		"@wordpress/deprecated": "^4.8.2",
+		"@wordpress/dom": "^4.8.2",
 		"@wordpress/element": "^6.8.1",
 		"@wordpress/escape-html": "^3.8.1",
-		"@wordpress/hooks": "^4.8.1",
+		"@wordpress/hooks": "^4.8.2",
 		"@wordpress/html-entities": "^4.8.1",
-		"@wordpress/i18n": "^5.8.1",
-		"@wordpress/icons": "^10.8.1",
+		"@wordpress/i18n": "^5.8.2",
+		"@wordpress/icons": "^10.8.2",
 		"@wordpress/is-shallow-equal": "^5.8.1",
-		"@wordpress/keyboard-shortcuts": "^5.8.2",
-		"@wordpress/keycodes": "^4.8.1",
-		"@wordpress/notices": "^5.8.2",
-		"@wordpress/preferences": "^4.8.2",
+		"@wordpress/keyboard-shortcuts": "^5.8.3",
+		"@wordpress/keycodes": "^4.8.2",
+		"@wordpress/notices": "^5.8.3",
+		"@wordpress/preferences": "^4.8.3",
 		"@wordpress/private-apis": "^1.8.1",
-		"@wordpress/rich-text": "^7.8.2",
+		"@wordpress/rich-text": "^7.8.3",
 		"@wordpress/style-engine": "^2.8.1",
 		"@wordpress/token-list": "^3.8.1",
 		"@wordpress/url": "^4.8.1",
@@ -88,5 +88,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51204ac9382d0551d8fdebd3c8d4623dabfa9f3c"
+	"gitHead": "6187079697e13c3292eb098d6338523a6676c6e8"
 }

package/src/components/block-heading-level-dropdown/index.js

@@ -40,12 +40,18 @@ export default function HeadingLevelDropdown( {
 	value,
 	onChange,
 } ) {
+	const validOptions = options
+		.filter(
+			( option ) => option === 0 || HEADING_LEVELS.includes( option )
+		)
+		.sort( ( a, b ) => a - b ); // Sorts numerically in ascending order;
+
 	return (
 		<ToolbarDropdownMenu
 			popoverProps={ POPOVER_PROPS }
 			icon={ <HeadingLevelIcon level={ value } /> }
 			label={ __( 'Change level' ) }
-			controls={ options.map( ( targetLevel ) => {
+			controls={ validOptions.map( ( targetLevel ) => {
 				const isActive = targetLevel === value;
 				return {
 					icon: <HeadingLevelIcon level={ targetLevel } />,

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

@@ -25,6 +25,7 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 	store as blocksStore,
+	privateApis as blocksPrivateApis,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -46,6 +47,8 @@ import { PrivateBlockContext } from './private-block-context';
 
 import { unlock } from '../../lock-unlock';
 
+const { isUnmodifiedBlockContent } = unlock( blocksPrivateApis );
+
 /**
  * Merges wrapper props with special handling for classNames and styles.
  *
@@ -350,12 +353,48 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					removeBlock( _clientId );
 				} else {
 					registry.batch( () => {
+						const firstBlock = getBlock( firstClientId );
+						const isFirstBlockContentUnmodified =
+							isUnmodifiedBlockContent( firstBlock );
+						const defaultBlockName = getDefaultBlockName();
+						const replacement = switchToBlockType(
+							firstBlock,
+							defaultBlockName
+						);
+						const canTransformToDefaultBlock =
+							!! replacement?.length &&
+							replacement.every( ( block ) =>
+								canInsertBlockType( block.name, _clientId )
+							);
+
 						if (
+							isFirstBlockContentUnmodified &&
+							canTransformToDefaultBlock
+						) {
+							// Step 1: If the block is empty and can be transformed to the default block type.
+							replaceBlocks(
+								firstClientId,
+								replacement,
+								changeSelection
+							);
+						} else if (
+							isFirstBlockContentUnmodified &&
+							firstBlock.name === defaultBlockName
+						) {
+							// Step 2: If the block is empty and is already the default block type.
+							removeBlock( firstClientId );
+							const nextBlockClientId =
+								getNextBlockClientId( clientId );
+							if ( nextBlockClientId ) {
+								selectBlock( nextBlockClientId );
+							}
+						} else if (
 							canInsertBlockType(
-								getBlockName( firstClientId ),
+								firstBlock.name,
 								targetRootClientId
 							)
 						) {
+							// Step 3: If the block can be moved up.
 							moveBlocksToPosition(
 								[ firstClientId ],
 								_clientId,
@@ -363,21 +402,17 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								getBlockIndex( _clientId )
 							);
 						} else {
-							const replacement = switchToBlockType(
-								getBlock( firstClientId ),
-								getDefaultBlockName()
-							);
-
-							if (
-								replacement &&
-								replacement.length &&
+							const canLiftAndTransformToDefaultBlock =
+								!! replacement?.length &&
 								replacement.every( ( block ) =>
 									canInsertBlockType(
 										block.name,
 										targetRootClientId
 									)
-								)
-							) {
+								);
+
+							if ( canLiftAndTransformToDefaultBlock ) {
+								// Step 4: If the block can be transformed to the default block type and moved up.
 								insertBlocks(
 									replacement,
 									getBlockIndex( _clientId ),
@@ -386,6 +421,7 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 								);
 								removeBlock( firstClientId, false );
 							} else {
+								// Step 5: Continue the default behavior.
 								switchToDefaultOrRemove();
 							}
 						}

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

@@ -461,6 +461,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	margin-left: -1px;
 	margin-right: -1px;
 	transition: background-color 0.3s ease;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: $default-font-size;
+	font-family: $default-font;
+	color: $black;
+	font-weight: normal;
+
+	.is-zoomed-out & {
+		// Scale the font size based on the zoom level.
+		font-size: calc(#{$default-font-size} * ( 2 - var(--wp-block-editor-iframe-zoom-out-scale)  ));
+	}
 
 	&.is-dragged-over {
 		background: $gray-400;

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -68,7 +68,6 @@ export function useFocusFirstElement( { clientId, initialPosition } ) {
 			textInputs[ isReverse ? textInputs.length - 1 : 0 ] || ref.current;
 
 		if ( ! isInsideRootBlock( ref.current, target ) ) {
-			ownerDocument.defaultView.getSelection().removeAllRanges();
 			ref.current.focus();
 			return;
 		}

package/src/components/block-list/zoom-out-separator.js

@@ -13,6 +13,7 @@ import {
 import { useReducedMotion } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -103,7 +104,19 @@ export function ZoomOutSeparator( {
 					data-is-insertion-point="true"
 					onDragOver={ () => setIsDraggedOver( true ) }
 					onDragLeave={ () => setIsDraggedOver( false ) }
-				></motion.div>
+				>
+					<motion.div
+						initial={ { opacity: 0 } }
+						animate={ { opacity: 1 } }
+						exit={ { opacity: 0 } }
+						transition={ {
+							type: 'tween',
+							duration: 0.1,
+						} }
+					>
+						{ __( 'Drop pattern.' ) }
+					</motion.div>
+				</motion.div>
 			) }
 		</AnimatePresence>
 	);

package/src/components/block-switcher/test/use-transformed.patterns.js

@@ -20,15 +20,15 @@ describe( 'use-transformed-patterns', () => {
 				},
 				content: {
 					type: 'boolean',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				level: {
 					type: 'number',
-					__experimentalRole: 'content',
+					role: 'content',
 				},
 				color: {
 					type: 'string',
-					__experimentalRole: 'other',
+					role: 'other',
 				},
 			},
 			save() {},

package/src/components/block-switcher/test/utils.js

@@ -18,15 +18,15 @@ describe( 'BlockSwitcher - utils', () => {
 					},
 					content: {
 						type: 'boolean',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					level: {
 						type: 'number',
-						__experimentalRole: 'content',
+						role: 'content',
 					},
 					color: {
 						type: 'string',
-						__experimentalRole: 'other',
+						role: 'other',
 					},
 				},
 				save() {},

package/src/components/block-switcher/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalGetBlockAttributesNamesByRole as getBlockAttributesNamesByRole } from '@wordpress/blocks';
+import { getBlockAttributesNamesByRole } from '@wordpress/blocks';
 
 /**
  * Try to find a matching block by a block's name in a provided

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

@@ -37,6 +37,13 @@
 		border-right: $border-width solid $gray-300;
 	}
 
+	&.is-connected {
+		.block-editor-block-switcher .components-button::before {
+			background: color-mix(in srgb, var(--wp-block-synced-color) 10%, transparent);
+			border-radius: $radius-small;
+		}
+	}
+
 	&.is-synced,
 	&.is-connected {
 		.block-editor-block-switcher .components-button .block-editor-block-icon {

package/src/components/block-variation-transforms/index.js

@@ -21,6 +21,7 @@ import { chevronDown } from '@wordpress/icons';
  */
 import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 function VariationsButtons( {
 	className,
@@ -142,18 +143,16 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations, isContentOnly } = useSelect(
 		( select ) => {
-			const {
-				getActiveBlockVariation,
-				getBlockVariations,
-				__experimentalHasContentRoleAttribute,
-			} = select( blocksStore );
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
 			const { getBlockName, getBlockAttributes, getBlockEditingMode } =
 				select( blockEditorStore );
 
 			const name = blockClientId && getBlockName( blockClientId );
 
-			const isContentBlock =
-				__experimentalHasContentRoleAttribute( name );
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
 
 			return {
 				activeBlockVariation: getActiveBlockVariation(

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

@@ -26,15 +26,10 @@ 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 ( ! containsSelection ) {
+		// the target is the element or inside the element.
+		if ( ! element.contains( event.target ) ) {
 			return;
 		}
 

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

@@ -165,7 +165,7 @@ export function RichTextWrapper(
 		isBlockSelected,
 	] );
 
-	const { disableBoundBlock, bindingsPlaceholder } = useSelect(
+	const { disableBoundBlock, bindingsPlaceholder, bindingsLabel } = useSelect(
 		( select ) => {
 			if (
 				! blockBindings?.[ identifier ] ||
@@ -179,18 +179,36 @@ export function RichTextWrapper(
 			const blockBindingsSource = getBlockBindingsSource(
 				relatedBinding.source
 			);
-			const fieldsList = blockBindingsSource?.getFieldsList?.( {
-				registry,
-				context: blockContext,
-			} );
+			const blockBindingsContext = {};
+			if ( blockBindingsSource?.usesContext?.length ) {
+				for ( const key of blockBindingsSource.usesContext ) {
+					blockBindingsContext[ key ] = blockContext[ key ];
+				}
+			}
 
 			const _disableBoundBlock =
 				! blockBindingsSource?.canUserEditValue?.( {
-					select,
-					context: blockContext,
+					registry,
+					context: blockBindingsContext,
 					args: relatedBinding.args,
 				} );
 
+			// Don't modify placeholders if value is not empty.
+			if ( adjustedValue.length > 0 ) {
+				return {
+					disableBoundBlock: _disableBoundBlock,
+					// Null values will make them fall back to the default behavior.
+					bindingsPlaceholder: null,
+					bindingsLabel: null,
+				};
+			}
+
+			const { getBlockAttributes } = select( blockEditorStore );
+			const blockAttributes = getBlockAttributes( clientId );
+			const fieldsList = blockBindingsSource?.getFieldsList?.( {
+				registry,
+				context: blockBindingsContext,
+			} );
 			const bindingKey =
 				fieldsList?.[ relatedBinding?.args?.key ]?.label ??
 				blockBindingsSource?.label;
@@ -202,12 +220,19 @@ export function RichTextWrapper(
 						__( 'Add %s' ),
 						bindingKey
 				  );
+			const _bindingsLabel = _disableBoundBlock
+				? relatedBinding?.args?.key || blockBindingsSource?.label
+				: sprintf(
+						/* translators: %s: source label or key */
+						__( 'Empty %s; start writing to edit its value' ),
+						relatedBinding?.args?.key || blockBindingsSource?.label
+				  );
 
 			return {
 				disableBoundBlock: _disableBoundBlock,
 				bindingsPlaceholder:
-					( ! adjustedValue || adjustedValue.length === 0 ) &&
-					_bindingsPlaceholder,
+					blockAttributes?.placeholder || _bindingsPlaceholder,
+				bindingsLabel: _bindingsLabel,
 			};
 		},
 		[
@@ -372,19 +397,7 @@ export function RichTextWrapper(
 	const inputEvents = useRef( new Set() );
 
 	function onFocus() {
-		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();
+		anchorRef.current?.focus();
 	}
 
 	const TagName = tagName;
@@ -421,7 +434,7 @@ export function RichTextWrapper(
 				aria-readonly={ shouldDisableEditing }
 				{ ...props }
 				aria-label={
-					bindingsPlaceholder || props[ 'aria-label' ] || placeholder
+					bindingsLabel || props[ 'aria-label' ] || placeholder
 				}
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [

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

@@ -23,7 +23,6 @@ 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() {
@@ -66,7 +65,6 @@ export function useWritingFlow() {
 				},
 				[ hasMultiSelection ]
 			),
-			useEventRedirect(),
 		] ),
 		after,
 	];

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

@@ -19,7 +19,6 @@ 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
@@ -191,7 +190,8 @@ export default function useArrowNav() {
 				return;
 			}
 
-			const { keyCode, shiftKey, ctrlKey, altKey, metaKey } = event;
+			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
+				event;
 			const isUp = keyCode === UP;
 			const isDown = keyCode === DOWN;
 			const isLeft = keyCode === LEFT;
@@ -233,11 +233,6 @@ 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 ) ) {
@@ -279,7 +274,6 @@ export default function useArrowNav() {
 				( altKey ? isHorizontalEdge( target, isReverseDir ) : true ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverse,
@@ -303,7 +297,6 @@ export default function useArrowNav() {
 				isHorizontalEdge( target, isReverseDir ) &&
 				! keepCaretInsideBlock
 			) {
-				node.contentEditable = false;
 				const closestTabbable = getClosestTabbable(
 					target,
 					isReverseDir,

package/src/components/writing-flow/use-input.js

@@ -16,7 +16,6 @@ import {
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { getSelectionRoot } from './utils';
 
 /**
  * Handles input for selections across blocks.
@@ -50,24 +49,7 @@ export default function useInput() {
 			// DOM. This will cause React errors (and the DOM should only be
 			// altered in a controlled fashion).
 			if ( node.contentEditable === 'true' ) {
-				const selection = node.ownerDocument.defaultView.getSelection();
-				const range = selection.rangeCount
-					? selection.getRangeAt( 0 )
-					: null;
-				const root = getSelectionRoot( node.ownerDocument );
-
-				// If selection is contained within a nested editable, allow
-				// input. We need to ensure that selection is maintained.
-				if ( root ) {
-					node.contentEditable = false;
-					root.focus();
-					selection.removeAllRanges();
-					if ( range ) {
-						selection.addRange( range );
-					}
-				} else {
-					event.preventDefault();
-				}
+				event.preventDefault();
 			}
 		}
 
@@ -77,23 +59,6 @@ export default function useInput() {
 			}
 
 			if ( ! hasMultiSelection() ) {
-				const { ownerDocument } = node;
-				if ( node === ownerDocument.activeElement ) {
-					if ( event.key === 'End' || event.key === 'Home' ) {
-						const selectionRoot = getSelectionRoot( ownerDocument );
-						const selection =
-							ownerDocument.defaultView.getSelection();
-						selection.selectAllChildren( selectionRoot );
-						const method =
-							event.key === 'End'
-								? 'collapseToEnd'
-								: 'collapseToStart';
-						selection[ method ]();
-						event.preventDefault();
-						return;
-					}
-				}
-
 				if ( event.keyCode === ENTER ) {
 					if ( event.shiftKey || __unstableIsFullySelected() ) {
 						return;