@wordpress/block-editor 12.18.2 → 12.19.0

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

@@ -46,6 +46,7 @@ import { getAllowedFormats } from './utils';
 import { Content } from './content';
 import { withDeprecations } from './with-deprecations';
 import { unlock } from '../../lock-unlock';
+import { BLOCK_BINDINGS_ALLOWED_BLOCKS } from '../../hooks/use-bindings-attributes';
 
 export const keyboardShortcutContext = createContext();
 export const inputEventContext = createContext();
@@ -147,7 +148,7 @@ export function RichTextWrapper(
 
 		// Disable Rich Text editing if block bindings specify that.
 		let shouldDisableEditing = false;
-		if ( blockBindings ) {
+		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
 			const blockTypeAttributes = getBlockType( blockName ).attributes;
 			const { getBlockBindingsSource } = unlock(
 				select( blockEditorStore )
@@ -355,6 +356,7 @@ export function RichTextWrapper(
 				role="textbox"
 				aria-multiline={ ! disableLineBreaks }
 				aria-label={ placeholder }
+				aria-readonly={ shouldDisableEditing }
 				{ ...props }
 				{ ...autocompleteProps }
 				ref={ useMergeRefs( [

package/src/components/spacing-sizes-control/index.js

@@ -4,6 +4,7 @@
 import {
 	BaseControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
@@ -114,7 +115,7 @@ export default function SpacingSizesControl( {
 					/>
 				) }
 			</HStack>
-			{ renderControls() }
+			<VStack spacing={ 0.5 }>{ renderControls() }</VStack>
 		</fieldset>
 	);
 }

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

@@ -15,11 +15,13 @@ $input-size: 300px;
 			width: $input-size;
 		}
 		padding: $input-padding;
-		border: none;
-		border-radius: 0;
 		margin-left: 0;
 		margin-right: 0;
 
+		&:not(:focus) {
+			border-color: transparent;
+		}
+
 		/* Fonts smaller than 16px causes mobile safari to zoom. */
 		font-size: $mobile-text-min-font-size;
 		@include break-small {

package/src/components/url-popover/image-url-input-ui.js

@@ -2,17 +2,19 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef, useState } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { focus } from '@wordpress/dom';
 import {
 	ToolbarButton,
+	NavigableMenu,
 	Button,
 	MenuItem,
 	ToggleControl,
 	TextControl,
-	MenuGroup,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import {
+	Icon,
 	link as linkIcon,
 	image,
 	page,
@@ -57,6 +59,17 @@ const ImageURLInputUI = ( {
 	const [ urlInput, setUrlInput ] = useState( null );
 
 	const autocompleteRef = useRef( null );
+	const wrapperRef = useRef();
+
+	useEffect( () => {
+		if ( ! wrapperRef.current ) {
+			return;
+		}
+		const nextFocusTarget =
+			focus.focusable.find( wrapperRef.current )[ 0 ] ||
+			wrapperRef.current;
+		nextFocusTarget.focus();
+	}, [ isEditingLink, url, lightboxEnabled ] );
 
 	const startEditLink = () => {
 		if (
@@ -241,14 +254,15 @@ const ImageURLInputUI = ( {
 			<ToolbarButton
 				icon={ linkIcon }
 				className="components-toolbar__control"
-				label={ url ? __( 'Edit link' ) : __( 'Add link' ) }
+				label={ __( 'Link' ) }
 				aria-expanded={ isOpen }
 				onClick={ openLinkUI }
 				ref={ setPopoverAnchor }
-				isActive={ !! url }
+				isActive={ !! url || lightboxEnabled }
 			/>
 			{ isOpen && (
 				<URLPopover
+					ref={ wrapperRef }
 					anchor={ popoverAnchor }
 					onFocusOutside={ onFocusOutside() }
 					onClose={ closeLinkUI }
@@ -257,7 +271,7 @@ const ImageURLInputUI = ( {
 					}
 					additionalControls={
 						showLinkEditor && (
-							<MenuGroup>
+							<NavigableMenu>
 								{ getLinkDestinations().map( ( link ) => (
 									<MenuItem
 										key={ link.linkDestination }
@@ -295,9 +309,10 @@ const ImageURLInputUI = ( {
 										{ __( 'Expand on click' ) }
 									</MenuItem>
 								) }
-							</MenuGroup>
+							</NavigableMenu>
 						)
 					}
+					offset={ 13 }
 				>
 					{ ( ! url || isEditingLink ) && ! lightboxEnabled && (
 						<>
@@ -328,9 +343,7 @@ const ImageURLInputUI = ( {
 					) }
 					{ ! url && ! isEditingLink && lightboxEnabled && (
 						<div className="block-editor-url-popover__expand-on-click">
-							<div className="fullscreen-icon">
-								{ fullscreen }
-							</div>
+							<Icon icon={ fullscreen } />
 							<div className="text">
 								<p>{ __( 'Expand on click' ) }</p>
 								<p className="description">
@@ -341,7 +354,6 @@ const ImageURLInputUI = ( {
 							</div>
 							<Button
 								icon={ linkOff }
-								className="remove-link"
 								label={ __( 'Disable expand on click' ) }
 								onClick={ () => {
 									onSetLightbox( false );

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { forwardRef, useState } from '@wordpress/element';
 import {
 	Button,
 	Popover,
@@ -24,83 +24,89 @@ const { __experimentalPopoverLegacyPositionToPlacement } = unlock(
 
 const DEFAULT_PLACEMENT = 'bottom';
 
-function URLPopover( {
-	additionalControls,
-	children,
-	renderSettings,
-	// The DEFAULT_PLACEMENT value is assigned inside the function's body
-	placement,
-	focusOnMount = 'firstElement',
-	// Deprecated
-	position,
-	// Rest
-	...popoverProps
-} ) {
-	if ( position !== undefined ) {
-		deprecated( '`position` prop in wp.blockEditor.URLPopover', {
-			since: '6.2',
-			alternative: '`placement` prop',
-		} );
-	}
+const URLPopover = forwardRef(
+	(
+		{
+			additionalControls,
+			children,
+			renderSettings,
+			// The DEFAULT_PLACEMENT value is assigned inside the function's body
+			placement,
+			focusOnMount = 'firstElement',
+			// Deprecated
+			position,
+			// Rest
+			...popoverProps
+		},
+		ref
+	) => {
+		if ( position !== undefined ) {
+			deprecated( '`position` prop in wp.blockEditor.URLPopover', {
+				since: '6.2',
+				alternative: '`placement` prop',
+			} );
+		}
 
-	// Compute popover's placement:
-	// - give priority to `placement` prop, if defined
-	// - otherwise, compute it from the legacy `position` prop (if defined)
-	// - finally, fallback to the DEFAULT_PLACEMENT.
-	let computedPlacement;
-	if ( placement !== undefined ) {
-		computedPlacement = placement;
-	} else if ( position !== undefined ) {
-		computedPlacement =
-			__experimentalPopoverLegacyPositionToPlacement( position );
-	}
-	computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
+		// Compute popover's placement:
+		// - give priority to `placement` prop, if defined
+		// - otherwise, compute it from the legacy `position` prop (if defined)
+		// - finally, fallback to the DEFAULT_PLACEMENT.
+		let computedPlacement;
+		if ( placement !== undefined ) {
+			computedPlacement = placement;
+		} else if ( position !== undefined ) {
+			computedPlacement =
+				__experimentalPopoverLegacyPositionToPlacement( position );
+		}
+		computedPlacement = computedPlacement || DEFAULT_PLACEMENT;
 
-	const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
+		const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );
 
-	const showSettings = !! renderSettings && isSettingsExpanded;
+		const showSettings = !! renderSettings && isSettingsExpanded;
 
-	const toggleSettingsVisibility = () => {
-		setIsSettingsExpanded( ! isSettingsExpanded );
-	};
+		const toggleSettingsVisibility = () => {
+			setIsSettingsExpanded( ! isSettingsExpanded );
+		};
 
-	return (
-		<Popover
-			className="block-editor-url-popover"
-			focusOnMount={ focusOnMount }
-			placement={ computedPlacement }
-			shift
-			variant="toolbar"
-			{ ...popoverProps }
-		>
-			<div className="block-editor-url-popover__input-container">
-				<div className="block-editor-url-popover__row">
-					{ children }
-					{ !! renderSettings && (
-						<Button
-							className="block-editor-url-popover__settings-toggle"
-							icon={ chevronDown }
-							label={ __( 'Link settings' ) }
-							onClick={ toggleSettingsVisibility }
-							aria-expanded={ isSettingsExpanded }
-							size="compact"
-						/>
+		return (
+			<Popover
+				ref={ ref }
+				className="block-editor-url-popover"
+				focusOnMount={ focusOnMount }
+				placement={ computedPlacement }
+				shift
+				variant="toolbar"
+				{ ...popoverProps }
+			>
+				<div className="block-editor-url-popover__input-container">
+					<div className="block-editor-url-popover__row">
+						{ children }
+						{ !! renderSettings && (
+							<Button
+								className="block-editor-url-popover__settings-toggle"
+								icon={ chevronDown }
+								label={ __( 'Link settings' ) }
+								onClick={ toggleSettingsVisibility }
+								aria-expanded={ isSettingsExpanded }
+								size="compact"
+							/>
+						) }
+					</div>
+					{ showSettings && (
+						<div className="block-editor-url-popover__row block-editor-url-popover__settings">
+							{ renderSettings() }
+						</div>
 					) }
 				</div>
-				{ showSettings && (
-					<div className="block-editor-url-popover__row block-editor-url-popover__settings">
-						{ renderSettings() }
+				{ additionalControls && ! showSettings && (
+					<div className="block-editor-url-popover__additional-controls">
+						{ additionalControls }
 					</div>
 				) }
-			</div>
-			{ additionalControls && ! showSettings && (
-				<div className="block-editor-url-popover__additional-controls">
-					{ additionalControls }
-				</div>
-			) }
-		</Popover>
-	);
-}
+			</Popover>
+		);
+	}
+);
 
 URLPopover.LinkEditor = LinkEditor;
 

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

@@ -5,7 +5,6 @@
 
 .block-editor-url-popover__input-container {
 	padding: $grid-unit-10;
-	padding-left: $grid-unit-20;
 }
 
 .block-editor-url-popover__row {
@@ -17,7 +16,7 @@
 // should take up as much space as possible.
 .block-editor-url-popover__row > :not(.block-editor-url-popover__settings-toggle) {
 	flex-grow: 1;
-	gap: $grid-unit-05;
+	gap: $grid-unit-10;
 }
 
 .block-editor-url-popover__additional-controls .components-button.has-icon {
@@ -59,6 +58,9 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-right: $grid-unit-10;
+	// Avoids the popover from growing too wide when the URL is long.
+	// See https://github.com/WordPress/gutenberg/issues/58599
+	max-width: $modal-min-width;
 
 	&.has-invalid-link {
 		color: $alert-red;
@@ -69,32 +71,21 @@
 	display: flex;
 	align-items: center;
 	min-width: $modal-min-width;
-	overflow: hidden;
 	white-space: nowrap;
 
-	.fullscreen-icon {
-		padding-right: $grid-unit-05;
-
-		> svg {
-			width: $icon-size;
-			height: $icon-size;
-		}
-	}
-
 	.text {
 		flex-grow: 1;
 
 		p {
 			margin: 0;
+			// This ensures the text and help text is 32px, which with
+			// padding makes the popover same height as the block toolbar.
+			line-height: $grid-unit-20;
+
+			&.description {
+				color: $gray-700;
+				font-size: $helptext-font-size;
+			}
 		}
 	}
-
-	.description {
-		color: $gray-600;
-	}
-
-	.remove-link {
-		margin-right: $grid-unit-10;
-	}
-
 }

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

@@ -23,6 +23,7 @@ import {
 	isPointWithinTopAndBottomBoundariesOfRect,
 } from '../../utils/math';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const THRESHOLD_DISTANCE = 30;
 const MINIMUM_HEIGHT_FOR_THRESHOLD = 120;
@@ -308,9 +309,14 @@ export default function useBlockDropZone( {
 		getDraggedBlockClientIds,
 		getBlockNamesByClientId,
 		getAllowedBlocks,
-	} = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } =
-		useDispatch( blockEditorStore );
+		isDragging,
+	} = unlock( useSelect( blockEditorStore ) );
+	const {
+		showInsertionPoint,
+		hideInsertionPoint,
+		startDragging,
+		stopDragging,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	const onBlockDrop = useOnBlockDrop(
 		dropTarget.operation === 'before' || dropTarget.operation === 'after'
@@ -325,6 +331,11 @@ export default function useBlockDropZone( {
 	const throttled = useThrottle(
 		useCallback(
 			( event, ownerDocument ) => {
+				if ( ! isDragging() ) {
+					// When dragging from the desktop, no drag start event is fired.
+					// So, ensure that the drag state is set when the user drags over a drop zone.
+					startDragging();
+				}
 				const allowedBlocks = getAllowedBlocks( targetRootClientId );
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
@@ -423,6 +434,8 @@ export default function useBlockDropZone( {
 				getBlockIndex,
 				registry,
 				showInsertionPoint,
+				isDragging,
+				startDragging,
 			]
 		),
 		200
@@ -444,6 +457,7 @@ export default function useBlockDropZone( {
 		},
 		onDragEnd() {
 			throttled.cancel();
+			stopDragging();
 			hideInsertionPoint();
 		},
 	} );

package/src/components/use-flash-editable-blocks/index.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+export function useFlashEditableBlocks( {
+	clientId = '',
+	isEnabled = true,
+} = {} ) {
+	const { getEnabledClientIdsTree } = unlock( useSelect( blockEditorStore ) );
+
+	return useRefEffect(
+		( element ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
+			const flashEditableBlocks = () => {
+				getEnabledClientIdsTree( clientId ).forEach(
+					( { clientId: id } ) => {
+						const block = element.querySelector(
+							`[data-block="${ id }"]`
+						);
+						if ( ! block ) {
+							return;
+						}
+						block.classList.remove( 'has-editable-outline' );
+						// Force reflow to trigger the animation.
+						// eslint-disable-next-line no-unused-expressions
+						block.offsetWidth;
+						block.classList.add( 'has-editable-outline' );
+					}
+				);
+			};
+
+			const handleClick = ( event ) => {
+				const shouldFlash =
+					event.target === element ||
+					event.target.classList.contains( 'is-root-container' );
+				if ( ! shouldFlash ) {
+					return;
+				}
+				if ( event.defaultPrevented ) {
+					return;
+				}
+				event.preventDefault();
+				flashEditableBlocks();
+			};
+
+			element.addEventListener( 'click', handleClick );
+			return () => element.removeEventListener( 'click', handleClick );
+		},
+		[ isEnabled ]
+	);
+}

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

@@ -234,7 +234,7 @@ export default function useOnBlockDrop(
 		getBlock,
 		isGroupable,
 	} = useSelect( blockEditorStore );
-	const { getBlockType, getGroupingBlockName } = useSelect( blocksStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		insertBlocks,
 		moveBlocksToPosition,
@@ -252,6 +252,8 @@ export default function useOnBlockDrop(
 			initialPosition = 0,
 			clientIdsToReplace = []
 		) => {
+			if ( ! Array.isArray( blocks ) ) blocks = [ blocks ];
+
 			const clientIds = getBlockOrder( targetRootClientId );
 			const clientId = clientIds[ targetBlockIndex ];
 			const blocksClientIds = blocks.map( ( block ) => block.clientId );
@@ -281,7 +283,10 @@ export default function useOnBlockDrop(
 					return block.name === 'core/image';
 				} );
 
-				const galleryBlock = !! getBlockType( 'core/gallery' );
+				const galleryBlock = canInsertBlockType(
+					'core/gallery',
+					targetRootClientId
+				);
 
 				const wrappedBlocks = createBlock(
 					areAllImages && galleryBlock
@@ -290,7 +295,8 @@ export default function useOnBlockDrop(
 					{
 						layout: {
 							type: 'flex',
-							flexWrap: areAllImages ? null : 'nowrap',
+							flexWrap:
+								areAllImages && galleryBlock ? null : 'nowrap',
 						},
 					},
 					groupInnerBlocks
@@ -317,11 +323,12 @@ export default function useOnBlockDrop(
 			getBlockOrder,
 			targetRootClientId,
 			targetBlockIndex,
+			isGroupable,
 			operation,
 			replaceBlocks,
 			getBlock,
 			nearestSide,
-			getBlockType,
+			canInsertBlockType,
 			getGroupingBlockName,
 			insertBlocks,
 		]