@wordpress/block-editor 14.9.0 → 14.10.1

package/src/components/block-card/index.js

@@ -6,22 +6,55 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import {
 	Button,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
+import { __, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { __, _x, isRTL, sprintf } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockIcon from '../block-icon';
+import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
 
+const { Badge } = unlock( componentsPrivateApis );
+
+/**
+ * A card component that displays block information including title, icon, and description.
+ * Can be used to show block metadata and navigation controls for parent blocks.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-card/README.md
+ *
+ * @example
+ * ```jsx
+ * function Example() {
+ *   return (
+ *     <BlockCard
+ *       title="My Block"
+ *       icon="smiley"
+ *       description="A simple block example"
+ *       name="Custom Block"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}        props             Component props.
+ * @param {string}        props.title       The title of the block.
+ * @param {string|Object} props.icon        The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.
+ * @param {string}        props.description The description of the block.
+ * @param {Object}        [props.blockType] Deprecated: Object containing block type data.
+ * @param {string}        [props.className] Additional classes to apply to the card.
+ * @param {string}        [props.name]      Custom block name to display before the title.
+ * @return {Element}                        Block card component.
+ */
 function BlockCard( { title, icon, description, blockType, className, name } ) {
 	if ( blockType ) {
 		deprecated( '`blockType` property in `BlockCard component`', {
@@ -66,14 +99,10 @@ function BlockCard( { title, icon, description, blockType, className, name } ) {
 			<BlockIcon icon={ icon } showColors />
 			<VStack spacing={ 1 }>
 				<h2 className="block-editor-block-card__title">
-					{ name?.length
-						? sprintf(
-								// translators:  1: Custom block name. 2: Block title.
-								_x( '%1$s (%2$s)', 'block label' ),
-								name,
-								title
-						  )
-						: title }
+					<span className="block-editor-block-card__name">
+						{ !! name?.length ? name : title }
+					</span>
+					{ !! name?.length && <Badge>{ title }</Badge> }
 				</h2>
 				{ description && (
 					<Text className="block-editor-block-card__description">

package/src/components/block-card/stories/index.story.js

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { box, button, cog, paragraph } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockCard from '../';
+
+const meta = {
+	title: 'BlockEditor/BlockCard',
+	component: BlockCard,
+	parameters: {
+		docs: {
+			description: {
+				component:
+					'The `BlockCard` component allows to display a "card" which contains the title of a block, its icon and its description.',
+			},
+			canvas: { sourceState: 'shown' },
+		},
+	},
+	argTypes: {
+		title: {
+			control: 'text',
+			description: 'The title of the block.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		description: {
+			control: 'text',
+			description: 'A description of the block functionality.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		icon: {
+			control: 'select',
+			options: [ 'paragraph', 'cog', 'box', 'button' ],
+			mapping: {
+				paragraph,
+				cog,
+				box,
+				button,
+			},
+			description:
+				'The icon of the block. This can be any of [WordPress Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.',
+			table: {
+				type: { summary: 'string | object' },
+			},
+		},
+		name: {
+			control: 'text',
+			description: 'Optional custom name for the block.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+		className: {
+			control: 'text',
+			description: 'Additional CSS class names.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	args: {
+		title: 'Paragraph',
+		icon: paragraph,
+		description: 'This is a paragraph block description.',
+		name: 'Paragraph Block',
+	},
+};

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

@@ -7,15 +7,22 @@
 
 .block-editor-block-card__title {
 	font-weight: 500;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: calc($grid-unit-10 / 2) $grid-unit-10;
 
 	&.block-editor-block-card__title {
 		font-size: $default-font-size;
 		line-height: $default-line-height;
 		margin: 0;
-		padding: 3px 0; // This makes the title as high as the icon.
 	}
 }
 
+.block-editor-block-card__name {
+	padding: 3px 0; // This makes the title as high as the icon.
+}
+
 .block-editor-block-card .block-editor-block-icon {
 	flex: 0 0 $button-size-small;
 	margin-left: 0;
@@ -27,3 +34,4 @@
 .block-editor-block-card.is-synced .block-editor-block-icon {
 	color: var(--wp-block-synced-color);
 }
+

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

@@ -6,18 +6,27 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { withFilters } from '@wordpress/components';
 import {
 	getBlockDefaultClassName,
-	hasBlockSupport,
 	getBlockType,
+	hasBlockSupport,
+	store as blocksStore,
 } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
+import { withFilters } from '@wordpress/components';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { useCallback, useContext, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockContext from '../block-context';
+import isURLLike from '../link-control/is-url-like';
+import {
+	canBindAttribute,
+	hasPatternOverridesDefaultBinding,
+	replacePatternOverridesDefaultBinding,
+} from '../../utils/block-bindings';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -48,27 +57,223 @@ const Edit = ( props ) => {
 const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit );
 
 const EditWithGeneratedProps = ( props ) => {
-	const { attributes = {}, name } = props;
+	const { name, clientId, attributes, setAttributes } = props;
+	const registry = useRegistry();
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
+	const registeredSources = useSelect(
+		( select ) =>
+			unlock( select( blocksStore ) ).getAllBlockBindingsSources(),
+		[]
+	);
 
-	// Assign context values using the block type's declared context needs.
-	const context = useMemo( () => {
-		return blockType && blockType.usesContext
+	const { blockBindings, context, hasPatternOverrides } = useMemo( () => {
+		// Assign context values using the block type's declared context needs.
+		const computedContext = blockType?.usesContext
 			? Object.fromEntries(
 					Object.entries( blockContext ).filter( ( [ key ] ) =>
 						blockType.usesContext.includes( key )
 					)
 			  )
 			: DEFAULT_BLOCK_CONTEXT;
-	}, [ blockType, blockContext ] );
+		// Add context requested by Block Bindings sources.
+		if ( attributes?.metadata?.bindings ) {
+			Object.values( attributes?.metadata?.bindings || {} ).forEach(
+				( binding ) => {
+					registeredSources[ binding?.source ]?.usesContext?.forEach(
+						( key ) => {
+							computedContext[ key ] = blockContext[ key ];
+						}
+					);
+				}
+			);
+		}
+		return {
+			blockBindings: replacePatternOverridesDefaultBinding(
+				name,
+				attributes?.metadata?.bindings
+			),
+			context: computedContext,
+			hasPatternOverrides: hasPatternOverridesDefaultBinding(
+				attributes?.metadata?.bindings
+			),
+		};
+	}, [
+		name,
+		blockType?.usesContext,
+		blockContext,
+		attributes?.metadata?.bindings,
+		registeredSources,
+	] );
+
+	const computedAttributes = useSelect(
+		( select ) => {
+			if ( ! blockBindings ) {
+				return attributes;
+			}
+
+			const attributesFromSources = {};
+			const blockBindingsBySource = new Map();
+
+			for ( const [ attributeName, binding ] of Object.entries(
+				blockBindings
+			) ) {
+				const { source: sourceName, args: sourceArgs } = binding;
+				const source = registeredSources[ sourceName ];
+				if ( ! source || ! canBindAttribute( name, attributeName ) ) {
+					continue;
+				}
+
+				blockBindingsBySource.set( source, {
+					...blockBindingsBySource.get( source ),
+					[ attributeName ]: {
+						args: sourceArgs,
+					},
+				} );
+			}
+
+			if ( blockBindingsBySource.size ) {
+				for ( const [ source, bindings ] of blockBindingsBySource ) {
+					// Get values in batch if the source supports it.
+					let values = {};
+					if ( ! source.getValues ) {
+						Object.keys( bindings ).forEach( ( attr ) => {
+							// Default to the the source label when `getValues` doesn't exist.
+							values[ attr ] = source.label;
+						} );
+					} else {
+						values = source.getValues( {
+							select,
+							context,
+							clientId,
+							bindings,
+						} );
+					}
+					for ( const [ attributeName, value ] of Object.entries(
+						values
+					) ) {
+						if (
+							attributeName === 'url' &&
+							( ! value || ! isURLLike( value ) )
+						) {
+							// Return null if value is not a valid URL.
+							attributesFromSources[ attributeName ] = null;
+						} else {
+							attributesFromSources[ attributeName ] = value;
+						}
+					}
+				}
+			}
+
+			return {
+				...attributes,
+				...attributesFromSources,
+			};
+		},
+		[
+			attributes,
+			blockBindings,
+			clientId,
+			context,
+			name,
+			registeredSources,
+		]
+	);
+
+	const setBoundAttributes = useCallback(
+		( nextAttributes ) => {
+			if ( ! blockBindings ) {
+				setAttributes( nextAttributes );
+				return;
+			}
+
+			registry.batch( () => {
+				const keptAttributes = { ...nextAttributes };
+				const blockBindingsBySource = new Map();
+
+				// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
+				for ( const [ attributeName, newValue ] of Object.entries(
+					keptAttributes
+				) ) {
+					if (
+						! blockBindings[ attributeName ] ||
+						! canBindAttribute( name, attributeName )
+					) {
+						continue;
+					}
+
+					const binding = blockBindings[ attributeName ];
+					const source = registeredSources[ binding?.source ];
+					if ( ! source?.setValues ) {
+						continue;
+					}
+					blockBindingsBySource.set( source, {
+						...blockBindingsBySource.get( source ),
+						[ attributeName ]: {
+							args: binding.args,
+							newValue,
+						},
+					} );
+					delete keptAttributes[ attributeName ];
+				}
+
+				if ( blockBindingsBySource.size ) {
+					for ( const [
+						source,
+						bindings,
+					] of blockBindingsBySource ) {
+						source.setValues( {
+							select: registry.select,
+							dispatch: registry.dispatch,
+							context,
+							clientId,
+							bindings,
+						} );
+					}
+				}
+
+				const hasParentPattern = !! context[ 'pattern/overrides' ];
+
+				if (
+					// Don't update non-connected attributes if the block is using pattern overrides
+					// and the editing is happening while overriding the pattern (not editing the original).
+					! ( hasPatternOverrides && hasParentPattern ) &&
+					Object.keys( keptAttributes ).length
+				) {
+					// Don't update caption and href until they are supported.
+					if ( hasPatternOverrides ) {
+						delete keptAttributes.caption;
+						delete keptAttributes.href;
+					}
+					setAttributes( keptAttributes );
+				}
+			} );
+		},
+		[
+			blockBindings,
+			clientId,
+			context,
+			hasPatternOverrides,
+			setAttributes,
+			registeredSources,
+			name,
+			registry,
+		]
+	);
 
 	if ( ! blockType ) {
 		return null;
 	}
 
 	if ( blockType.apiVersion > 1 ) {
-		return <EditWithFilters { ...props } context={ context } />;
+		return (
+			<EditWithFilters
+				{ ...props }
+				attributes={ computedAttributes }
+				context={ context }
+				setAttributes={ setBoundAttributes }
+			/>
+		);
 	}
 
 	// Generate a class name for the block's editable form.
@@ -77,15 +282,17 @@ const EditWithGeneratedProps = ( props ) => {
 		: null;
 	const className = clsx(
 		generatedClassName,
-		attributes.className,
+		attributes?.className,
 		props.className
 	);
 
 	return (
 		<EditWithFilters
 			{ ...props }
-			context={ context }
+			attributes={ computedAttributes }
 			className={ className }
+			context={ context }
+			setAttributes={ setBoundAttributes }
 		/>
 	);
 };

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

@@ -12,11 +12,7 @@ import {
 	useDispatch,
 	useRegistry,
 } from '@wordpress/data';
-import {
-	useViewportMatch,
-	useMergeRefs,
-	useDebounce,
-} from '@wordpress/compose';
+import { useMergeRefs, useDebounce } from '@wordpress/compose';
 import {
 	createContext,
 	useMemo,
@@ -46,7 +42,6 @@ export const IntersectionObserver = createContext();
 const pendingBlockVisibilityUpdatesPerRegistry = new WeakMap();
 
 function Root( { className, ...settings } ) {
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const { isOutlineMode, isFocusMode, temporarilyEditingAsBlocks } =
 		useSelect( ( select ) => {
 			const { getSettings, getTemporarilyEditingAsBlocks, isTyping } =
@@ -105,7 +100,7 @@ function Root( { className, ...settings } ) {
 			] ),
 			className: clsx( 'is-root-container', className, {
 				'is-outline-mode': isOutlineMode,
-				'is-focus-mode': isFocusMode && isLargeViewport,
+				'is-focus-mode': isFocusMode,
 			} ),
 		},
 		settings

package/src/components/block-list/use-block-props/index.js

@@ -29,7 +29,7 @@ import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
-import { canBindBlock } from '../../../hooks/use-bindings-attributes';
+import { canBindBlock } from '../../../utils/block-bindings';
 import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**

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

@@ -33,6 +33,7 @@ export function ZoomOutSeparator( {
 		insertionPoint,
 		blockInsertionPointVisible,
 		blockInsertionPoint,
+		blocksBeingDragged,
 	} = useSelect( ( select ) => {
 		const {
 			getInsertionPoint,
@@ -40,6 +41,7 @@ export function ZoomOutSeparator( {
 			getSectionRootClientId,
 			isBlockInsertionPointVisible,
 			getBlockInsertionPoint,
+			getDraggedBlockClientIds,
 		} = unlock( select( blockEditorStore ) );
 
 		const root = getSectionRootClientId();
@@ -51,6 +53,7 @@ export function ZoomOutSeparator( {
 			insertionPoint: getInsertionPoint(),
 			blockInsertionPoint: getBlockInsertionPoint(),
 			blockInsertionPointVisible: isBlockInsertionPointVisible(),
+			blocksBeingDragged: getDraggedBlockClientIds(),
 		};
 	}, [] );
 
@@ -78,6 +81,7 @@ export function ZoomOutSeparator( {
 		insertionPoint &&
 		insertionPoint.hasOwnProperty( 'index' ) &&
 		clientId === sectionClientIds[ insertionPoint.index - 1 ];
+
 	// We want to show the zoom out separator in either of these conditions:
 	// 1. If the inserter has an insertion index set
 	// 2. We are dragging a pattern over an insertion point
@@ -97,6 +101,32 @@ export function ZoomOutSeparator( {
 					sectionClientIds[ blockInsertionPoint.index - 1 ] );
 	}
 
+	const blockBeingDraggedClientId = blocksBeingDragged[ 0 ];
+
+	const isCurrentBlockBeingDragged = blocksBeingDragged.includes( clientId );
+
+	const blockBeingDraggedIndex = sectionClientIds.indexOf(
+		blockBeingDraggedClientId
+	);
+	const blockBeingDraggedPreviousSiblingClientId =
+		blockBeingDraggedIndex > 0
+			? sectionClientIds[ blockBeingDraggedIndex - 1 ]
+			: null;
+
+	const isCurrentBlockPreviousSiblingOfBlockBeingDragged =
+		blockBeingDraggedPreviousSiblingClientId === clientId;
+
+	// The separators are visually top/bottom of the block, but in actual fact
+	// the "top" separator is the "bottom" separator of the previous block.
+	// Therefore, this logic hides the separator if the current block is being dragged
+	// or if the current block is the previous sibling of the block being dragged.
+	if (
+		isCurrentBlockBeingDragged ||
+		isCurrentBlockPreviousSiblingOfBlockBeingDragged
+	) {
+		isVisible = false;
+	}
+
 	return (
 		<AnimatePresence>
 			{ isVisible && (

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -65,7 +65,6 @@ export function BlockSettingsDropdown( {
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
 		isContentOnly,
-		isZoomOut,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -76,7 +75,6 @@ export function BlockSettingsDropdown( {
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
 				getBlockEditingMode,
-				isZoomOut: _isZoomOut,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -101,7 +99,6 @@ export function BlockSettingsDropdown( {
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 				isContentOnly:
 					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
-				isZoomOut: _isZoomOut(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -253,15 +250,13 @@ export function BlockSettingsDropdown( {
 											clientId={ firstBlockClientId }
 										/>
 									) }
-									{ ( ! isContentOnly || isZoomOut ) && (
-										<CopyMenuItem
-											clientIds={ clientIds }
-											onCopy={ onCopy }
-											shortcut={ displayShortcut.primary(
-												'c'
-											) }
-										/>
-									) }
+									<CopyMenuItem
+										clientIds={ clientIds }
+										onCopy={ onCopy }
+										shortcut={ displayShortcut.primary(
+											'c'
+										) }
+									/>
 									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(
@@ -316,14 +311,16 @@ export function BlockSettingsDropdown( {
 										</MenuItem>
 									</MenuGroup>
 								) }
-								<BlockSettingsMenuControls.Slot
-									fillProps={ {
-										onClose,
-										count,
-										firstBlockClientId,
-									} }
-									clientIds={ clientIds }
-								/>
+								{ ! isContentOnly && (
+									<BlockSettingsMenuControls.Slot
+										fillProps={ {
+											onClose,
+											count,
+											firstBlockClientId,
+										} }
+										clientIds={ clientIds }
+									/>
+								) }
 								{ typeof children === 'function'
 									? children( { onClose } )
 									: Children.map( ( child ) =>

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

@@ -10,7 +10,7 @@ import { _x } from '@wordpress/i18n';
  * @param {Array}  styles    Block styles.
  * @param {string} className Class name
  *
- * @return {Object?} The active style.
+ * @return {?Object} The active style.
  */
 export function getActiveStyle( styles, className ) {
 	for ( const style of new TokenList( className ).values() ) {
@@ -34,7 +34,7 @@ export function getActiveStyle( styles, className ) {
  * Replaces the active style in the block's className.
  *
  * @param {string}  className   Class name.
- * @param {Object?} activeStyle The replaced style.
+ * @param {?Object} activeStyle The replaced style.
  * @param {Object}  newStyle    The replacing style.
  *
  * @return {string} The updated className.
@@ -83,7 +83,7 @@ export function getRenderedStyles( styles ) {
  *
  * @param {Array} styles Block styles.
  *
- * @return {Object?}        The default style object, if found.
+ * @return {?Object}        The default style object, if found.
  */
 export function getDefaultStyle( styles ) {
 	return styles?.find( ( style ) => style.isDefault );