@wordpress/block-editor 13.3.0 → 14.0.0

package/src/hooks/block-hooks.js

@@ -201,6 +201,7 @@ function BlockHooksControlPure( {
 
 								return (
 									<ToggleControl
+										__nextHasNoMarginBottom
 										checked={ checked }
 										key={ block.title }
 										label={

package/src/hooks/block-hooks.scss

@@ -4,6 +4,7 @@
 	 * we need to right-align the toggle.
 	 */
 	.components-toggle-control .components-h-stack {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 		flex-direction: row-reverse;
 	}
 

package/src/hooks/block-style-variation.js

@@ -13,7 +13,7 @@ import {
 	toStyles,
 	getBlockSelectors,
 } from '../components/global-styles';
-import { useStyleOverride } from './utils';
+import { usePrivateStyleOverride } from './utils';
 import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
@@ -63,7 +63,7 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 
 // A helper component to apply a style override using the useStyleOverride hook.
 function OverrideStyles( { override } ) {
-	useStyleOverride( override );
+	usePrivateStyleOverride( override );
 }
 
 /**
@@ -351,7 +351,7 @@ function useBlockProps( { name, className, clientId } ) {
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
 
-	useStyleOverride( {
+	usePrivateStyleOverride( {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',

package/src/hooks/contrast-checker.js

@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import ContrastChecker from '../components/contrast-checker';
-import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -17,23 +17,23 @@ export default function BlockColorContrastChecker( { clientId } ) {
 	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
 	const [ detectedColor, setDetectedColor ] = useState();
 	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
-	const ref = useBlockRef( clientId );
+	const blockEl = useBlockElement( clientId );
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
 	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => {
-		if ( ! ref.current ) {
+		if ( ! blockEl ) {
 			return;
 		}
-		setDetectedColor( getComputedStyle( ref.current ).color );
+		setDetectedColor( getComputedStyle( blockEl ).color );
 
-		const firstLinkElement = ref.current?.querySelector( 'a' );
+		const firstLinkElement = blockEl.querySelector( 'a' );
 		if ( firstLinkElement && !! firstLinkElement.innerText ) {
 			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
 		}
 
-		let backgroundColorNode = ref.current;
+		let backgroundColorNode = blockEl;
 		let backgroundColor =
 			getComputedStyle( backgroundColorNode ).backgroundColor;
 		while (
@@ -48,7 +48,7 @@ export default function BlockColorContrastChecker( { clientId } ) {
 		}
 
 		setDetectedBackgroundColor( backgroundColor );
-	} );
+	}, [ blockEl ] );
 
 	return (
 		<ContrastChecker

package/src/hooks/duotone.js

@@ -32,10 +32,10 @@ import {
 } from '../components/duotone/utils';
 import { getBlockCSSSelector } from '../components/global-styles/get-block-css-selector';
 import { scopeSelector } from '../components/global-styles/utils';
-import { useBlockSettings, useStyleOverride } from './utils';
+import { useBlockSettings, usePrivateStyleOverride } from './utils';
 import { default as StylesFiltersPanel } from '../components/global-styles/filters-panel';
 import { useBlockEditingMode } from '../components/block-editing-mode';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 const EMPTY_ARRAY = [];
 
@@ -265,7 +265,7 @@ function useDuotoneStyles( {
 
 	const isValidFilter = Array.isArray( colors ) || colors === 'unset';
 
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					css:
@@ -276,7 +276,7 @@ function useDuotoneStyles( {
 			  }
 			: undefined
 	);
-	useStyleOverride(
+	usePrivateStyleOverride(
 		isValidFilter
 			? {
 					assets:

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/index.js

@@ -37,7 +37,6 @@ import './grid-visualizer';
 
 createBlockEditFilter(
 	[
-		blockBindingsPanel,
 		align,
 		textAlign,
 		anchor,
@@ -48,6 +47,7 @@ createBlockEditFilter(
 		layout,
 		contentLockUI,
 		blockHooks,
+		blockBindingsPanel,
 		childLayout,
 	].filter( Boolean )
 );
@@ -91,3 +91,4 @@ export { useCachedTruthy } from './use-cached-truthy';
 export { setBackgroundStyleDefaults } from './background';
 export { useZoomOut } from './use-zoom-out';
 export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
+export { useStyleOverride } from './utils';

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/line-height.js

@@ -39,7 +39,6 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"

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/spacing-visualizer.js

@@ -14,7 +14,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  * Internal dependencies
  */
 import BlockPopoverCover from '../components/block-popover/cover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
 function SpacingVisualizer( { clientId, value, computeStyle, forceShow } ) {
 	const blockElement = useBlockElement( clientId );

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 */
@@ -90,18 +91,23 @@ export function canBindAttribute( blockName, attributeName ) {
 	);
 }
 
+export function getBindableAttributes( blockName ) {
+	return BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+}
+
 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 +121,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 +276,10 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			},
 			[
 				registry,
-				bindings,
+				blockBindings,
 				name,
 				clientId,
-				context,
+				blockContext,
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,

package/src/hooks/use-editor-wrapper-styles.native.scss

@@ -5,6 +5,7 @@
 }
 
 .use-editor-wrapper-styles--reversed {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 	flex-direction: column-reverse;
 	width: 100%;
 	max-width: 580;

package/src/hooks/use-zoom-out.js

@@ -49,5 +49,5 @@ export function useZoomOut( zoomOut = true ) {
 		) {
 			__unstableSetEditorMode( originalEditingMode.current );
 		}
-	}, [ __unstableSetEditorMode, zoomOut, mode ] );
+	}, [ __unstableGetEditorMode, __unstableSetEditorMode, zoomOut ] ); // Mode is deliberately excluded from the dependencies so that the effect does not run when mode changes.
 }

package/src/hooks/utils.js

@@ -135,7 +135,20 @@ export function shouldSkipSerialization(
 
 const pendingStyleOverrides = new WeakMap();
 
-export function useStyleOverride( {
+/**
+ * Override a block editor settings style. Leave the ID blank to create a new
+ * style.
+ *
+ * @param {Object}  override     Override object.
+ * @param {?string} override.id  Id of the style override, leave blank to create
+ *                               a new style.
+ * @param {string}  override.css CSS to apply.
+ */
+export function useStyleOverride( { id, css } ) {
+	return usePrivateStyleOverride( { id, css } );
+}
+
+export function usePrivateStyleOverride( {
 	id,
 	css,
 	assets,

package/src/index.js

@@ -14,6 +14,7 @@ export {
 	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
 	useCachedTruthy,
 	useZoomOut,
+	useStyleOverride,
 } from './hooks';
 export * from './components';
 export * from './elements';

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

@@ -16,7 +16,7 @@ import {
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useHasBlockToolbar } from './components/block-toolbar/use-has-block-toolbar';
-import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
+import { cleanEmptyObject } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
@@ -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';
@@ -72,7 +68,6 @@ lock( privateApis, {
 	BlockInfo,
 	useHasBlockToolbar,
 	cleanEmptyObject,
-	useStyleOverride,
 	BlockQuickNavigation,
 	LayoutStyle,
 	BlockRemovalWarningModal,
@@ -82,8 +77,6 @@ lock( privateApis, {
 	ResolutionTool,
 	TabbedSidebar,
 	TextAlignmentControl,
-	ReusableBlocksRenameHint,
-	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
 	globalStylesDataKey,