@wordpress/block-editor 14.8.1-next.cd6172eb0.0 → 14.10.0

package/src/components/block-alignment-matrix-control/index.js

@@ -11,6 +11,37 @@ import {
 
 const noop = () => {};
 
+/**
+ * The alignment matrix control allows users to quickly adjust inner block alignment.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-alignment-matrix-control/README.md
+ *
+ * @example
+ * ```jsx
+ * function Example() {
+ *   return (
+ *     <BlockControls>
+ *       <BlockAlignmentMatrixControl
+ *         label={ __( 'Change content position' ) }
+ *         value="center"
+ *         onChange={ ( nextPosition ) =>
+ *           setAttributes( { contentPosition: nextPosition } )
+ *         }
+ *       />
+ *     </BlockControls>
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props            Component props.
+ * @param {string}   props.label      Label for the control. Defaults to 'Change matrix alignment'.
+ * @param {Function} props.onChange   Function to execute upon change of matrix state.
+ * @param {string}   props.value      Content alignment location. One of: 'center', 'center center',
+ *                                    'center left', 'center right', 'top center', 'top left',
+ *                                    'top right', 'bottom center', 'bottom left', 'bottom right'.
+ * @param {boolean}  props.isDisabled Whether the control should be disabled.
+ * @return {Element} The BlockAlignmentMatrixControl component.
+ */
 function BlockAlignmentMatrixControl( props ) {
 	const {
 		label = __( 'Change matrix alignment' ),

package/src/components/block-alignment-matrix-control/stories/index.story.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockAlignmentMatrixControl from '../';
+
+const meta = {
+	title: 'BlockEditor/BlockAlignmentMatrixControl',
+	component: BlockAlignmentMatrixControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Renders a control for selecting block alignment using a matrix of alignment options.',
+			},
+		},
+	},
+	argTypes: {
+		label: {
+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: "'Change matrix alignment'" },
+			},
+			description: 'Label for the control.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			table: {
+				type: { summary: 'function' },
+				defaultValue: { summary: '() => {}' },
+			},
+			description:
+				"Function to execute upon a user's change of the matrix state.",
+		},
+		isDisabled: {
+			control: 'boolean',
+			table: {
+				type: { summary: 'boolean' },
+				defaultValue: { summary: 'false' },
+			},
+			description: 'Whether the control should be disabled.',
+		},
+		value: {
+			control: { type: null },
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: "'center'" },
+			},
+			description: 'Content alignment location.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+
+		return (
+			<BlockAlignmentMatrixControl
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+			/>
+		);
+	},
+};

package/src/components/block-card/README.md

@@ -21,6 +21,7 @@ const MyBlockCard = () => (
 		icon={ paragraph }
 		title="Paragraph"
 		description="Start with the basic building block of all narrative."
+		name="Custom Block"
 	/>
 );
 ```
@@ -45,6 +46,12 @@ The title of the block.
 
 The description of the block.
 
+#### name
+
+-   **Type:** `String`
+
+The custom name of the block.
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

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-heading-level-dropdown/stories/index.story.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../';
+
+const meta = {
+	title: 'BlockEditor/HeadingLevelDropdown',
+	component: HeadingLevelDropdown,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component:
+					'Dropdown for selecting a heading level (1 through 6) or paragraph (0).',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: null },
+			description: 'The chosen heading level.',
+		},
+		options: {
+			control: 'check',
+			options: [ 1, 2, 3, 4, 5, 6 ],
+			description: 'An array of supported heading levels.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Function called with the selected value changes.',
+		},
+	},
+};
+
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState( args.value );
+
+		return (
+			<HeadingLevelDropdown
+				{ ...args }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					setValue( ...changeArgs );
+					onChange( ...changeArgs );
+				} }
+			/>
+		);
+	},
+	args: {
+		value: 2,
+	},
+};

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