@wordpress/block-editor 9.4.0 → 9.5.0

package/src/components/list-view/block-select-button.js

@@ -6,7 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
+} from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 import { Icon, lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
@@ -16,7 +20,7 @@ import { SPACE, ENTER } from '@wordpress/keycodes';
  */
 import BlockIcon from '../block-icon';
 import useBlockDisplayInformation from '../use-block-display-information';
-import BlockTitle from '../block-title';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import ListViewExpander from './expander';
 import { useBlockLock } from '../block-lock';
 
@@ -35,6 +39,10 @@ function ListViewBlockSelectButton(
 	ref
 ) {
 	const blockInformation = useBlockDisplayInformation( clientId );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 	const { isLocked } = useBlockLock( clientId );
 
 	// The `href` attribute triggers the browser's native HTML drag operations.
@@ -72,19 +80,26 @@ function ListViewBlockSelectButton(
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon icon={ blockInformation?.icon } showColors />
-				<span className="block-editor-list-view-block-select-button__title">
-					<BlockTitle clientId={ clientId } maximumLength={ 35 } />
-				</span>
-				{ blockInformation?.anchor && (
-					<span className="block-editor-list-view-block-select-button__anchor">
-						{ blockInformation.anchor }
+				<HStack
+					alignment="center"
+					className="block-editor-list-view-block-select-button__label-wrapper"
+					justify="flex-start"
+					spacing={ 1 }
+				>
+					<span className="block-editor-list-view-block-select-button__title">
+						<Truncate ellipsizeMode="auto">{ blockTitle }</Truncate>
 					</span>
-				) }
-				{ isLocked && (
-					<span className="block-editor-list-view-block-select-button__lock">
-						<Icon icon={ lock } />
-					</span>
-				) }
+					{ blockInformation?.anchor && (
+						<span className="block-editor-list-view-block-select-button__anchor">
+							{ blockInformation.anchor }
+						</span>
+					) }
+					{ isLocked && (
+						<span className="block-editor-list-view-block-select-button__lock">
+							<Icon icon={ lock } />
+						</span>
+					) }
+				</HStack>
 			</Button>
 		</>
 	);

package/src/components/list-view/drop-indicator.js

@@ -81,7 +81,7 @@ export default function ListViewDropIndicator( {
 			left: rect.left + indent,
 			right: rect.right,
 			width: 0,
-			height: rect.height,
+			height: 0,
 			ownerDocument,
 		};
 

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

@@ -97,7 +97,7 @@
 		align-items: center;
 		width: 100%;
 		height: auto;
-		padding: ($grid-unit-15 * 0.5) $grid-unit-15 ($grid-unit-15 * 0.5) 0;
+		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
 		text-align: left;
 		color: $gray-900;
 		border-radius: $radius-block-ui;
@@ -207,7 +207,7 @@
 	}
 
 	.block-editor-list-view-block__menu-cell {
-		padding-right: 5px;
+		padding-right: $grid-unit-05;
 
 		.components-button.has-icon {
 			height: 24px;
@@ -297,13 +297,27 @@
 		}
 	}
 
+	.block-editor-list-view-block-select-button__label-wrapper {
+		min-width: 120px;
+	}
+
+	.block-editor-list-view-block-select-button__title {
+		flex: 1;
+		position: relative;
+
+		.components-truncate {
+			position: absolute;
+			width: 100%;
+			transform: translateY(-50%);
+		}
+	}
+
 	.block-editor-list-view-block-select-button__anchor {
 		background: rgba($black, 0.1);
 		border-radius: $radius-block-ui;
 		display: inline-block;
 		padding: 2px 6px;
-		margin: 0 $grid-unit-10;
-		max-width: 120px;
+		max-width: min(100px, 40%);
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}

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

@@ -71,6 +71,7 @@ export function MediaPlaceholder( {
 	onSelect,
 	onCancel,
 	onSelectURL,
+	onToggleFeaturedImage,
 	onDoubleClick,
 	onFilesPreUpload = noop,
 	onHTMLDrop = noop,
@@ -307,6 +308,22 @@ export function MediaPlaceholder( {
 		);
 	};
 
+	const renderFeaturedImageToggle = () => {
+		return (
+			onToggleFeaturedImage && (
+				<div className="block-editor-media-placeholder__url-input-container">
+					<Button
+						className="block-editor-media-placeholder__button"
+						onClick={ onToggleFeaturedImage }
+						variant="tertiary"
+					>
+						{ __( 'Use featured image' ) }
+					</Button>
+				</div>
+			)
+		);
+	};
+
 	const renderMediaUploadChecked = () => {
 		const defaultButton = ( { open } ) => {
 			return (
@@ -361,6 +378,7 @@ export function MediaPlaceholder( {
 									</Button>
 									{ uploadMediaLibraryButton }
 									{ renderUrlSelectionUI() }
+									{ renderFeaturedImageToggle() }
 									{ renderCancelLink() }
 								</>
 							);
@@ -389,6 +407,7 @@ export function MediaPlaceholder( {
 					</FormFileUpload>
 					{ uploadMediaLibraryButton }
 					{ renderUrlSelectionUI() }
+					{ renderFeaturedImageToggle() }
 					{ renderCancelLink() }
 				</>
 			);

package/src/components/media-replace-flow/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import {
@@ -55,7 +55,6 @@ const MediaReplaceFlow = ( {
 	addToGallery,
 	handleUpload = true,
 } ) => {
-	const [ mediaURLValue, setMediaURLValue ] = useState( mediaURL );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
@@ -88,7 +87,6 @@ const MediaReplaceFlow = ( {
 			onToggleFeaturedImage();
 		}
 		closeMenu();
-		setMediaURLValue( media?.url );
 		// Calling `onSelect` after the state update since it might unmount the component.
 		onSelect( media );
 		speak( __( 'The media file has been replaced' ) );
@@ -213,14 +211,13 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURLValue } position="bottom">
+							<Tooltip text={ mediaURL } position="bottom">
 								<div>
 									<LinkControl
-										value={ { url: mediaURLValue } }
+										value={ { url: mediaURL } }
 										settings={ [] }
 										showSuggestions={ false }
 										onChange={ ( { url } ) => {
-											setMediaURLValue( url );
 											onSelectURL( url );
 											editMediaButtonRef.current.focus();
 										} }

package/src/components/media-replace-flow/test/index.js

@@ -3,6 +3,11 @@
  */
 import { render, fireEvent } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -10,19 +15,24 @@ import MediaReplaceFlow from '../';
 
 const noop = () => {};
 
-function setUpMediaReplaceFlow() {
-	const { container } = render(
+function TestWrapper() {
+	const [ mediaURL, setMediaURL ] = useState( 'https://example.media' );
+	return (
 		<MediaReplaceFlow
 			mediaId={ 1 }
-			mediaURL={ 'https://example.media' }
+			mediaURL={ mediaURL }
 			allowedTypes={ [ 'png' ] }
 			accept="image/*"
 			onSelect={ noop }
-			onSelectURL={ noop }
+			onSelectURL={ setMediaURL }
 			onError={ noop }
 			onCloseModal={ noop }
 		/>
 	);
+}
+
+function setUpMediaReplaceFlow() {
+	const { container } = render( <TestWrapper /> );
 	return container;
 }
 

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

@@ -33,6 +33,7 @@ function URLPopover( {
 			className="block-editor-url-popover"
 			focusOnMount={ focusOnMount }
 			position={ position }
+			__unstableShift
 			{ ...popoverProps }
 		>
 			<div className="block-editor-url-popover__input-container">

package/src/components/url-popover/test/__snapshots__/index.js.snap

@@ -2,6 +2,7 @@
 
 exports[`URLPopover matches the snapshot in its default state 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -38,6 +39,7 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
 
 exports[`URLPopover matches the snapshot when the settings are toggled open 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"
@@ -81,6 +83,7 @@ exports[`URLPopover matches the snapshot when the settings are toggled open 1`]
 
 exports[`URLPopover matches the snapshot when there are no settings 1`] = `
 <ForwardRef(Popover)
+  __unstableShift={true}
   className="block-editor-url-popover"
   focusOnMount="firstElement"
   position="bottom center"

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

@@ -11,7 +11,7 @@ import {
 	isRTL,
 } from '@wordpress/dom';
 import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
 /**
@@ -131,12 +131,15 @@ export function getClosestTabbable(
 export default function useArrowNav() {
 	const {
 		getSelectedBlockClientId,
+		getMultiSelectedBlocksStartClientId,
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
 		getSettings,
 		hasMultiSelection,
+		__unstableIsFullySelected,
 	} = useSelect( blockEditorStore );
+	const { selectBlock } = useDispatch( blockEditorStore );
 	return useRefEffect( ( node ) => {
 		// Here a DOMRect is stored while moving the caret vertically so
 		// vertical position of the start position can be restored. This is to
@@ -186,7 +189,35 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			// If there is a multi-selection, the arrow keys should collapse the
+			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
+					return;
+				}
+
+				if ( event.defaultPrevented ) {
+					return;
+				}
+
+				if ( ! isNav ) {
+					return;
+				}
+
+				if ( isShift ) {
+					return;
+				}
+
+				event.preventDefault();
+
+				if ( isReverse ) {
+					selectBlock( getMultiSelectedBlocksStartClientId() );
+				} else {
+					selectBlock( getMultiSelectedBlocksEndClientId(), -1 );
+				}
+
 				return;
 			}
 

package/src/components/writing-flow/use-multi-selection.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,6 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
 function selector( select ) {
 	const {
@@ -44,10 +38,6 @@ export default function useMultiSelection() {
 		selectedBlockClientId,
 		isFullSelection,
 	} = useSelect( selector, [] );
-	const selectedRef = useBlockRef( selectedBlockClientId );
-	// These must be in the right DOM order.
-	const startRef = useBlockRef( first( multiSelectedBlockClientIds ) );
-	const endRef = useBlockRef( last( multiSelectedBlockClientIds ) );
 
 	/**
 	 * When the component updates, and there is multi selection, we need to
@@ -66,26 +56,6 @@ export default function useMultiSelection() {
 			}
 
 			if ( ! hasMultiSelection || isMultiSelecting ) {
-				if ( ! selectedBlockClientId || isMultiSelecting ) {
-					return;
-				}
-
-				const selection = defaultView.getSelection();
-
-				if ( selection.rangeCount && ! selection.isCollapsed ) {
-					const blockNode = selectedRef.current;
-					const { startContainer, endContainer } =
-						selection.getRangeAt( 0 );
-
-					if (
-						!! blockNode &&
-						( ! blockNode.contains( startContainer ) ||
-							! blockNode.contains( endContainer ) )
-					) {
-						selection.removeAllRanges();
-					}
-				}
-
 				return;
 			}
 
@@ -105,25 +75,8 @@ export default function useMultiSelection() {
 			// able to select across instances immediately.
 			node.contentEditable = true;
 
-			// For some browsers, like Safari, it is important that focus happens
-			// BEFORE selection.
+			defaultView.getSelection().removeAllRanges();
 			node.focus();
-
-			// The block refs might not be immediately available
-			// when dragging blocks into another block.
-			if ( ! startRef.current || ! endRef.current ) {
-				return;
-			}
-
-			const selection = defaultView.getSelection();
-			const range = ownerDocument.createRange();
-
-			// These must be in the right DOM order.
-			range.setStartBefore( startRef.current );
-			range.setEndAfter( endRef.current );
-
-			selection.removeAllRanges();
-			selection.addRange( range );
 		},
 		[
 			hasMultiSelection,

package/src/components/writing-flow/use-selection-observer.js

@@ -84,12 +84,11 @@ export default function useSelectionObserver() {
 
 			function onSelectionChange( event ) {
 				const selection = defaultView.getSelection();
-				// If no selection is found, end multi selection and disable the
-				// contentEditable wrapper.
+
 				if ( ! selection.rangeCount ) {
-					setContentEditableWrapper( node, false );
 					return;
 				}
+
 				// If selection is collapsed and we haven't used `shift+click`,
 				// end multi selection and disable the contentEditable wrapper.
 				// We have to check about `shift+click` case because elements

package/src/hooks/color.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isObject } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,13 +54,21 @@ const hasLinkColorSupport = ( blockType ) => {
 
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.link;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.link
+	);
 };
 
 const hasGradientSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 
-	return isObject( colorSupport ) && !! colorSupport.gradients;
+	return (
+		colorSupport !== null &&
+		typeof colorSupport === 'object' &&
+		!! colorSupport.gradients
+	);
 };
 
 const hasBackgroundColorSupport = ( blockType ) => {

package/src/hooks/index.js

@@ -20,4 +20,5 @@ export { useCustomSides } from './dimensions';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
+export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/layout.js

@@ -9,7 +9,11 @@ import { has, kebabCase } from 'lodash';
  */
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import {
+	getBlockDefaultClassName,
+	getBlockSupport,
+	hasBlockSupport,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 import {
 	Button,
@@ -40,35 +44,31 @@ const layoutBlockSupportKey = '__experimentalLayout';
  * have the style engine generate a more extensive list of utility classnames which
  * will then replace this method.
  *
- * @param { Array } attributes Array of block attributes.
+ * @param { Object } layout            Layout object.
+ * @param { Object } layoutDefinitions An object containing layout definitions, stored in theme.json.
  *
  * @return { Array } Array of CSS classname strings.
  */
-function getLayoutClasses( attributes ) {
+function getLayoutClasses( layout, layoutDefinitions ) {
 	const layoutClassnames = [];
 
-	if ( ! attributes.layout ) {
-		return layoutClassnames;
-	}
-
-	if ( attributes?.layout?.orientation ) {
+	if ( layoutDefinitions?.[ layout?.type || 'default' ]?.className ) {
 		layoutClassnames.push(
-			`is-${ kebabCase( attributes.layout.orientation ) }`
+			layoutDefinitions?.[ layout?.type || 'default' ]?.className
 		);
 	}
 
-	if ( attributes?.layout?.justifyContent ) {
+	if ( layout?.orientation ) {
+		layoutClassnames.push( `is-${ kebabCase( layout.orientation ) }` );
+	}
+
+	if ( layout?.justifyContent ) {
 		layoutClassnames.push(
-			`is-content-justification-${ kebabCase(
-				attributes.layout.justifyContent
-			) }`
+			`is-content-justification-${ kebabCase( layout.justifyContent ) }`
 		);
 	}
 
-	if (
-		attributes?.layout?.flexWrap &&
-		attributes.layout.flexWrap === 'nowrap'
-	) {
+	if ( layout?.flexWrap && layout.flexWrap === 'nowrap' ) {
 		layoutClassnames.push( 'is-nowrap' );
 	}
 
@@ -267,12 +267,36 @@ export const withLayoutStyles = createHigherOrderComponent(
 			? defaultThemeLayout
 			: layout || defaultBlockLayout || {};
 		const layoutClasses = shouldRenderLayoutStyles
-			? getLayoutClasses( attributes )
+			? getLayoutClasses( usedLayout, defaultThemeLayout?.definitions )
 			: null;
+		const selector = `.${ getBlockDefaultClassName(
+			name
+		) }.wp-container-${ id }`;
+		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const hasBlockGapSupport = blockGapSupport !== null;
+
+		// Get CSS string for the current layout type.
+		// The CSS and `style` element is only output if it is not empty.
+		let css;
+		if ( shouldRenderLayoutStyles ) {
+			const fullLayoutType = getLayoutType(
+				usedLayout?.type || 'default'
+			);
+			css = fullLayoutType?.getLayoutStyle?.( {
+				blockName: name,
+				selector,
+				layout: usedLayout,
+				layoutDefinitions: defaultThemeLayout?.definitions,
+				style: attributes?.style,
+				hasBlockGapSupport,
+			} );
+		}
+
+		// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
 		const className = classnames(
 			props?.className,
 			{
-				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles,
+				[ `wp-container-${ id }` ]: shouldRenderLayoutStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
 			},
 			layoutClasses
 		);
@@ -281,10 +305,12 @@ export const withLayoutStyles = createHigherOrderComponent(
 			<>
 				{ shouldRenderLayoutStyles &&
 					element &&
+					!! css &&
 					createPortal(
 						<LayoutStyle
 							blockName={ name }
-							selector={ `.wp-container-${ id }` }
+							selector={ selector }
+							css={ css }
 							layout={ usedLayout }
 							style={ attributes?.style }
 						/>,

package/src/hooks/utils.js

@@ -4,8 +4,6 @@
 import {
 	pickBy,
 	isEmpty,
-	isObject,
-	identity,
 	mapValues,
 	forEach,
 	get,
@@ -19,6 +17,8 @@ import {
  */
 import { getBlockSupport } from '@wordpress/blocks';
 
+const identity = ( x ) => x;
+
 /**
  * Removed falsy values from nested object.
  *
@@ -26,7 +26,11 @@ import { getBlockSupport } from '@wordpress/blocks';
  * @return {*} Object cleaned from falsy values
  */
 export const cleanEmptyObject = ( object ) => {
-	if ( ! isObject( object ) || Array.isArray( object ) ) {
+	if (
+		object === null ||
+		typeof object !== 'object' ||
+		Array.isArray( object )
+	) {
 		return object;
 	}
 	const cleanedNestedObjects = pickBy(

package/src/index.js

@@ -9,6 +9,7 @@ export {
 	useColorProps as __experimentalUseColorProps,
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
+	getGapCSSValue as __experimentalGetGapCSSValue,
 	useCachedTruthy,
 } from './hooks';
 export * from './components';