@wordpress/block-editor 13.3.0 → 13.4.0

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

@@ -416,7 +416,8 @@
 		background: rgba($black, 0.3);
 	}
 
-	.block-editor-list-view-block-select-button__lock {
+	.block-editor-list-view-block-select-button__lock,
+	.block-editor-list-view-block-select-button__sticky {
 		line-height: 0;
 	}
 

package/src/components/list-view/utils.js

@@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
 		level
 	);
 
-export const getBlockPropertiesDescription = ( isLocked ) =>
-	isLocked ? __( 'This block is locked.' ) : '';
+export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
+	[
+		blockInformation?.positionLabel
+			? `${ sprintf(
+					// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
+					__( 'Position: %s' ),
+					blockInformation.positionLabel
+			  ) }.`
+			: undefined,
+		isLocked ? __( 'This block is locked.' ) : undefined,
+	]
+		.filter( Boolean )
+		.join( ' ' );
 
 /**
  * Returns true if the client ID occurs within the block selection or multi-selection,

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

@@ -52,7 +52,7 @@ const FormatToolbar = () => {
 											toggleProps.className,
 											{ 'is-pressed': hasActive }
 										),
-										describedBy: __(
+										description: __(
 											'Displays more block tools'
 										),
 									} }

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

@@ -188,7 +188,7 @@ export function RichTextWrapper(
 						binding.source
 					);
 					if (
-						! blockBindingsSource?.canUserEditValue( {
+						! blockBindingsSource?.canUserEditValue?.( {
 							select,
 							context: blockContext,
 							args: binding.args,

package/src/components/spacing-sizes-control/input-controls/spacing-input-control.js

@@ -303,9 +303,11 @@ export default function SpacingInputControl( {
 				<CustomSelectControl
 					className="spacing-sizes-control__custom-select-control"
 					value={
+						// passing empty string as a fallback to continue using the
+						// component in controlled mode
 						options.find(
 							( option ) => option.key === currentValue
-						) || '' // passing undefined here causes a downshift controlled/uncontrolled warning
+						) || ''
 					}
 					onChange={ ( selection ) => {
 						onChange(

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

@@ -272,7 +272,7 @@ const ImageURLInputUI = ( {
 						icon={ linkOff }
 						label={ __( 'Disable expand on click' ) }
 						onClick={ () => {
-							onSetLightbox( false );
+							onSetLightbox?.( false );
 						} }
 						size="compact"
 					/>
@@ -302,7 +302,7 @@ const ImageURLInputUI = ( {
 						label={ __( 'Remove link' ) }
 						onClick={ () => {
 							onLinkRemove();
-							resetLightbox();
+							resetLightbox?.();
 						} }
 						size="compact"
 					/>
@@ -366,7 +366,7 @@ const ImageURLInputUI = ( {
 													LINK_DESTINATION_NONE,
 												href: '',
 											} );
-											onSetLightbox( true );
+											onSetLightbox?.( true );
 											stopEditLink();
 										} }
 									>

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

@@ -10,6 +10,7 @@
 .block-editor-url-popover__row {
 	display: flex;
 	gap: $grid-unit-05;
+	align-items: center;
 }
 
 // Any children of the popover-row that are not the settings-toggle

package/src/hooks/grid-visualizer.js

@@ -26,14 +26,12 @@ function GridTools( { clientId, layout } ) {
 		};
 	} );
 
-	if ( ! isSelected && ! isDragging ) {
-		return null;
-	}
-
 	return (
 		<>
-			<GridVisualizer clientId={ clientId } parentLayout={ layout } />
 			<GridLayoutSync clientId={ clientId } />
+			{ ( isSelected || isDragging ) && (
+				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			) }
 		</>
 	);
 }
@@ -41,7 +39,7 @@ function GridTools( { clientId, layout } ) {
 const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		if ( props.attributes.layout?.type !== 'grid' ) {
-			return <BlockEdit { ...props } />;
+			return <BlockEdit key="edit" { ...props } />;
 		}
 
 		return (
@@ -50,7 +48,7 @@ const addGridVisualizerToBlockEdit = createHigherOrderComponent(
 					clientId={ props.clientId }
 					layout={ props.attributes.layout }
 				/>
-				<BlockEdit { ...props } />
+				<BlockEdit key="edit" { ...props } />
 			</>
 		);
 	},

package/src/hooks/layout-child.js

@@ -119,11 +119,20 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				parentColumnUnit = 'rem';
 			}
 
-			const highestNumber = Math.max( columnSpan, columnStart );
+			let numColsToBreakAt = 2;
+
+			if ( columnSpan && columnStart ) {
+				numColsToBreakAt = columnSpan + columnStart - 1;
+			} else if ( columnSpan ) {
+				numColsToBreakAt = columnSpan;
+			} else {
+				numColsToBreakAt = columnStart;
+			}
+
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
-				highestNumber * parentColumnValue +
-				( highestNumber - 1 ) * defaultGapValue;
+				numColsToBreakAt * parentColumnValue +
+				( numColsToBreakAt - 1 ) * defaultGapValue;
 			// For blocks that only span one column, we want to remove any rowStart values as
 			// the container reduces in size, so that blocks are still arranged in markup order.
 			const minimumContainerQueryValue =

package/src/hooks/position.js

@@ -8,10 +8,7 @@ import clsx from 'clsx';
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import {
-	BaseControl,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo, Platform } from '@wordpress/element';
@@ -23,13 +20,8 @@ import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject, useStyleOverride } from './utils';
-import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
-const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
-	componentsPrivateApis
-);
-
 const POSITION_SUPPORT_KEY = 'position';
 
 const DEFAULT_OPTION = {
@@ -42,7 +34,7 @@ const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
 	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
-	__experimentalHint: __(
+	hint: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
 };
@@ -51,9 +43,7 @@ const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
 	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
-	__experimentalHint: __(
-		'The block will not move when the page is scrolled.'
-	),
+	hint: __( 'The block will not move when the page is scrolled.' ),
 };
 
 const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];

package/src/hooks/use-bindings-attributes.js

@@ -4,13 +4,14 @@
 import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useRegistry, useSelect } from '@wordpress/data';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useCallback, useMemo, useContext } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import BlockContext from '../components/block-context';
 
 /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
 /** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
@@ -93,15 +94,16 @@ export function canBindAttribute( blockName, attributeName ) {
 export const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const registry = useRegistry();
+		const blockContext = useContext( BlockContext );
 		const sources = useSelect( ( select ) =>
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
-		const { name, clientId, context } = props;
+		const { name, clientId } = props;
 		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
 			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
 				?.source === 'core/pattern-overrides';
-		const bindings = useMemo(
+		const blockBindings = useMemo(
 			() =>
 				replacePatternOverrideDefaultBindings(
 					name,
@@ -115,110 +117,138 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 		// there are attribute updates.
 		// `source.getValues` may also call a selector via `registry.select`.
 		const boundAttributes = useSelect( () => {
-			if ( ! bindings ) {
+			if ( ! blockBindings ) {
 				return;
 			}
 
 			const attributes = {};
 
-			for ( const [ attributeName, boundAttribute ] of Object.entries(
-				bindings
+			const blockBindingsBySource = new Map();
+
+			for ( const [ attributeName, binding ] of Object.entries(
+				blockBindings
 			) ) {
-				const source = sources[ boundAttribute.source ];
+				const { source: sourceName, args: sourceArgs } = binding;
+				const source = sources[ sourceName ];
 				if (
-					! source?.getValue ||
+					! source?.getValues ||
 					! canBindAttribute( name, attributeName )
 				) {
 					continue;
 				}
 
-				const args = {
-					registry,
-					context,
-					clientId,
-					attributeName,
-					args: boundAttribute.args,
-				};
-
-				attributes[ attributeName ] = source.getValue( args );
-
-				if ( attributes[ attributeName ] === undefined ) {
-					if ( attributeName === 'url' ) {
-						attributes[ attributeName ] = null;
-					} else {
-						attributes[ attributeName ] =
-							source.getPlaceholder?.( args );
+				blockBindingsBySource.set( source, {
+					...blockBindingsBySource.get( source ),
+					[ attributeName ]: {
+						args: sourceArgs,
+					},
+				} );
+			}
+
+			if ( blockBindingsBySource.size ) {
+				for ( const [ source, bindings ] of blockBindingsBySource ) {
+					// Populate context.
+					const context = {};
+
+					if ( source.usesContext?.length ) {
+						for ( const key of source.usesContext ) {
+							context[ key ] = blockContext[ key ];
+						}
+					}
+
+					// Get values in batch if the source supports it.
+					const values = source.getValues( {
+						registry,
+						context,
+						clientId,
+						bindings,
+					} );
+					for ( const [ attributeName, value ] of Object.entries(
+						values
+					) ) {
+						// Use placeholder when value is undefined.
+						if ( value === undefined ) {
+							if ( attributeName === 'url' ) {
+								attributes[ attributeName ] = null;
+							} else {
+								attributes[ attributeName ] =
+									source.getPlaceholder?.( {
+										registry,
+										context,
+										clientId,
+										attributeName,
+										args: bindings[ attributeName ].args,
+									} );
+							}
+						} else {
+							attributes[ attributeName ] = value;
+						}
 					}
 				}
 			}
 
 			return attributes;
-		}, [ bindings, name, clientId, context, registry, sources ] );
+		}, [ blockBindings, name, clientId, blockContext, registry, sources ] );
 
 		const { setAttributes } = props;
 
 		const _setAttributes = useCallback(
 			( nextAttributes ) => {
 				registry.batch( () => {
-					if ( ! bindings ) {
+					if ( ! blockBindings ) {
 						setAttributes( nextAttributes );
 						return;
 					}
 
 					const keptAttributes = { ...nextAttributes };
-					const updatesBySource = new Map();
+					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 (
-							! bindings[ attributeName ] ||
+							! blockBindings[ attributeName ] ||
 							! canBindAttribute( name, attributeName )
 						) {
 							continue;
 						}
 
-						const binding = bindings[ attributeName ];
+						const binding = blockBindings[ attributeName ];
 						const source = sources[ binding?.source ];
-						if ( ! source?.setValue && ! source?.setValues ) {
+						if ( ! source?.setValues ) {
 							continue;
 						}
-						updatesBySource.set( source, {
-							...updatesBySource.get( source ),
-							[ attributeName ]: newValue,
+						blockBindingsBySource.set( source, {
+							...blockBindingsBySource.get( source ),
+							[ attributeName ]: {
+								args: binding.args,
+								newValue,
+							},
 						} );
 						delete keptAttributes[ attributeName ];
 					}
 
-					if ( updatesBySource.size ) {
+					if ( blockBindingsBySource.size ) {
 						for ( const [
 							source,
-							attributes,
-						] of updatesBySource ) {
-							if ( source.setValues ) {
-								source.setValues( {
-									registry,
-									context,
-									clientId,
-									attributes,
-								} );
-							} else {
-								for ( const [
-									attributeName,
-									value,
-								] of Object.entries( attributes ) ) {
-									const binding = bindings[ attributeName ];
-									source.setValue( {
-										registry,
-										context,
-										clientId,
-										attributeName,
-										args: binding.args,
-										value,
-									} );
+							bindings,
+						] of blockBindingsBySource ) {
+							// Populate context.
+							const context = {};
+
+							if ( source.usesContext?.length ) {
+								for ( const key of source.usesContext ) {
+									context[ key ] = blockContext[ key ];
 								}
 							}
+
+							source.setValues( {
+								registry,
+								context,
+								clientId,
+								bindings,
+							} );
 						}
 					}
 
@@ -242,10 +272,10 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			},
 			[
 				registry,
-				bindings,
+				blockBindings,
 				name,
 				clientId,
-				context,
+				blockContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,

package/src/layouts/constrained.js

@@ -234,15 +234,23 @@ export default {
 			const paddingValues = getCSSRules( style );
 			paddingValues.forEach( ( rule ) => {
 				if ( rule.key === 'paddingRight' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingRightValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-right: calc(${ rule.value } * -1);
+						margin-right: calc(${ paddingRightValue } * -1);
 					}
 					`;
 				} else if ( rule.key === 'paddingLeft' ) {
+					// Add unit if 0, to avoid calc(0 * -1) which is invalid.
+					const paddingLeftValue =
+						rule.value === '0' ? '0px' : rule.value;
+
 					output += `
 					${ appendSelectors( selector, '> .alignfull' ) } {
-						margin-left: calc(${ rule.value } * -1);
+						margin-left: calc(${ paddingLeftValue } * -1);
 					}
 					`;
 				}

package/src/layouts/grid.js

@@ -264,6 +264,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
+						__nextHasNoMarginBottom
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
 						min={ 0 }
@@ -367,6 +368,7 @@ function GridLayoutColumnsAndRowsControl( {
 							/>
 						) : (
 							<RangeControl
+								__nextHasNoMarginBottom
 								value={ columnCount ?? 0 }
 								onChange={ ( value ) =>
 									onChange( {

package/src/private-apis.js

@@ -29,10 +29,6 @@ import {
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
 import TextAlignmentControl from './components/text-alignment-control';
-import {
-	default as ReusableBlocksRenameHint,
-	useReusableBlocksRenameHint,
-} from './components/inserter/reusable-block-rename-hint';
 import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
@@ -82,8 +78,6 @@ lock( privateApis, {
 	ResolutionTool,
 	TabbedSidebar,
 	TextAlignmentControl,
-	ReusableBlocksRenameHint,
-	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
 	globalStylesDataKey,

package/src/store/actions.js

@@ -213,6 +213,21 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block with the
+ * specified client ID has been hovered.
+ *
+ * @param {string} clientId Block client ID.
+ *
+ * @return {Object} Action object.
+ */
+export function hoverBlock( clientId ) {
+	return {
+		type: 'HOVER_BLOCK',
+		clientId,
+	};
+}
+
 /**
  * Yields action objects used in signalling that the block preceding the given
  * clientId (or optionally, its first parent from bottom to top)

package/src/store/reducer.js

@@ -2068,6 +2068,23 @@ export function lastFocus( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting currently hovered block.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function hoveredBlockClientId( state = false, action ) {
+	switch ( action.type ) {
+		case 'HOVER_BLOCK':
+			return action.clientId;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2100,6 +2117,7 @@ const combinedReducers = combineReducers( {
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
+	hoveredBlockClientId,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -2809,6 +2809,16 @@ export function isBlockVisible( state, clientId ) {
 	return state.blockVisibility?.[ clientId ] ?? true;
 }
 
+/**
+ * Returns the currently hovered block.
+ *
+ * @param {Object} state Global application state.
+ * @return {Object} Client Id of the hovered block.
+ */
+export function getHoveredBlockClientId( state ) {
+	return state.hoveredBlockClientId;
+}
+
 /**
  * Returns the list of all hidden blocks.
  *