@wordpress/block-editor 13.4.0 → 14.1.0

package/src/components/use-resize-canvas/index.js

@@ -43,7 +43,7 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 );
+	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
 
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
@@ -62,8 +62,6 @@ export default function useResizeCanvas( deviceType ) {
 					marginLeft: marginHorizontal,
 					marginRight: marginHorizontal,
 					height,
-					borderRadius: '2px 2px 2px 2px',
-					border: '1px solid #ddd',
 					overflowY: 'auto',
 				};
 			default:

package/src/components/use-settings/index.js

@@ -43,9 +43,10 @@ export function useSettings( ...paths ) {
  * It looks up the setting first in the block instance hierarchy.
  * If none is found, it'll look it up in the block editor settings.
  *
+ * @deprecated 6.5.0 Use useSettings instead.
+ *
  * @param {string} path The path to the setting.
  * @return {any} Returns the value defined for the setting.
- * @deprecated 6.5.0 Use useSettings instead.
  * @example
  * ```js
  * const isEnabled = useSetting( 'typography.dropCap' );

package/src/components/writing-mode-control/index.js

@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { textHorizontal, textVertical } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const WRITING_MODES = [
 	{
@@ -39,14 +38,27 @@ const WRITING_MODES = [
  */
 export default function WritingModeControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
-			options={ WRITING_MODES }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ WRITING_MODES.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/hooks/background.js

@@ -16,16 +16,14 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
-import {
-	globalStylesDataKey,
-	globalStylesLinksDataKey,
-} from '../store/private-keys';
+import { globalStylesDataKey } from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
-// Initial control values where no block style is set.
-const BACKGROUND_DEFAULT_VALUES = {
+// Initial control values.
+export const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 /**
@@ -55,31 +53,28 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 }
 
 export function setBackgroundStyleDefaults( backgroundStyle ) {
-	if ( ! backgroundStyle ) {
+	if ( ! backgroundStyle || ! backgroundStyle?.backgroundImage?.url ) {
 		return;
 	}
 
-	const backgroundImage = backgroundStyle?.backgroundImage;
 	let backgroundStylesWithDefaults;
 
 	// Set block background defaults.
-	if ( !! backgroundImage?.url ) {
-		if ( ! backgroundStyle?.backgroundSize ) {
-			backgroundStylesWithDefaults = {
-				backgroundSize: 'cover',
-			};
-		}
-
-		if (
-			'contain' === backgroundStyle?.backgroundSize &&
-			! backgroundStyle?.backgroundPosition
-		) {
-			backgroundStylesWithDefaults = {
-				backgroundPosition: 'center',
-			};
-		}
+	if ( ! backgroundStyle?.backgroundSize ) {
+		backgroundStylesWithDefaults = {
+			backgroundSize: BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+		};
 	}
 
+	if (
+		'contain' === backgroundStyle?.backgroundSize &&
+		! backgroundStyle?.backgroundPosition
+	) {
+		backgroundStylesWithDefaults = {
+			backgroundPosition:
+				BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+		};
+	}
 	return backgroundStylesWithDefaults;
 }
 
@@ -138,15 +133,15 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const { style, inheritedValue, _links } = useSelect(
+	const { style, inheritedValue } = useSelect(
 		( select ) => {
 			const { getBlockAttributes, getSettings } =
 				select( blockEditorStore );
 			const _settings = getSettings();
 			return {
 				style: getBlockAttributes( clientId )?.style,
-				_links: _settings[ globalStylesLinksDataKey ],
 				/*
+				 * To ensure we pass down the right inherited values:
 				 * @TODO 1. Pass inherited value down to all block style controls,
 				 *   See: packages/block-editor/src/hooks/style.js
 				 * @TODO 2. Add support for block style variations,
@@ -187,11 +182,10 @@ export function BackgroundImagePanel( {
 			inheritedValue={ inheritedValue }
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			defaultValues={ BACKGROUND_DEFAULT_VALUES }
+			defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

package/src/hooks/block-bindings.js

@@ -2,89 +2,283 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 import {
-	BaseControl,
-	PanelBody,
-	__experimentalHStack as HStack,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalText as Text,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalTruncate as Truncate,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
+import { useContext, Fragment } from '@wordpress/element';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { canBindAttribute } from '../hooks/use-bindings-attributes';
+import {
+	canBindAttribute,
+	getBindableAttributes,
+} from '../hooks/use-bindings-attributes';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
+import BlockContext from '../components/block-context';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
 
-export const BlockBindingsPanel = ( { name, metadata } ) => {
-	const { bindings } = metadata || {};
-	const { sources } = useSelect( ( select ) => {
-		const _sources = unlock(
-			select( blocksStore )
-		).getAllBlockBindingsSources();
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuGroupV2: DropdownMenuGroup,
+	DropdownMenuRadioItemV2: DropdownMenuRadioItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+	DropdownMenuItemHelpTextV2: DropdownMenuItemHelpText,
+	DropdownMenuSeparatorV2: DropdownMenuSeparator,
+} = unlock( componentsPrivateApis );
 
-		return {
-			sources: _sources,
-		};
-	}, [] );
+const useToolsPanelDropdownMenuProps = () => {
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return ! isMobile
+		? {
+				popoverProps: {
+					placement: 'left-start',
+					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
+					offset: 259,
+				},
+		  }
+		: {};
+};
 
-	if ( ! bindings ) {
-		return null;
-	}
+function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) {
+	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+	const registeredSources = getBlockBindingsSources();
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const currentKey = binding?.args?.key;
+	return (
+		<>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
+					<DropdownMenuGroup>
+						{ Object.keys( fieldsList ).length > 1 && (
+							<Text
+								className="block-editor-bindings__source-label"
+								upperCase
+								variant="muted"
+								aria-hidden
+							>
+								{ registeredSources[ name ].label }
+							</Text>
+						) }
+						{ Object.entries( fields ).map( ( [ key, value ] ) => (
+							<DropdownMenuRadioItem
+								key={ key }
+								onChange={ () =>
+									updateBlockBindings( {
+										[ attribute ]: {
+											source: name,
+											args: { key },
+										},
+									} )
+								}
+								name={ attribute + '-binding' }
+								value={ key }
+								checked={ key === currentKey }
+							>
+								<DropdownMenuItemLabel>
+									{ key }
+								</DropdownMenuItemLabel>
+								<DropdownMenuItemHelpText>
+									{ value }
+								</DropdownMenuItemHelpText>
+							</DropdownMenuRadioItem>
+						) ) }
+					</DropdownMenuGroup>
+					{ i !== Object.keys( fieldsList ).length - 1 && (
+						<DropdownMenuSeparator />
+					) }
+				</Fragment>
+			) ) }
+		</>
+	);
+}
+
+function BlockBindingsAttribute( { attribute, binding } ) {
+	const { source: sourceName, args } = binding || {};
+	const sourceProps =
+		unlock( blocksPrivateApis ).getBlockBindingsSource( sourceName );
+	return (
+		<VStack>
+			<Truncate>{ attribute }</Truncate>
+			{ !! binding && (
+				<Text
+					variant="muted"
+					className="block-editor-bindings__item-explanation"
+				>
+					<Truncate>
+						{ args?.key || sourceProps?.label || sourceName }
+					</Truncate>
+				</Text>
+			) }
+		</VStack>
+	);
+}
+
+function ReadOnlyBlockBindingsPanelItems( { bindings } ) {
+	return (
+		<>
+			{ Object.entries( bindings ).map( ( [ attribute, binding ] ) => (
+				<Item key={ attribute }>
+					<BlockBindingsAttribute
+						attribute={ attribute }
+						binding={ binding }
+					/>
+				</Item>
+			) ) }
+		</>
+	);
+}
+
+function EditableBlockBindingsPanelItems( {
+	attributes,
+	bindings,
+	fieldsList,
+} ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
+	const isMobile = useViewportMatch( 'medium', '<' );
+	return (
+		<>
+			{ attributes.map( ( attribute ) => {
+				const binding = bindings[ attribute ];
+				return (
+					<ToolsPanelItem
+						key={ attribute }
+						hasValue={ () => !! binding }
+						label={ attribute }
+						onDeselect={ () => {
+							updateBlockBindings( {
+								[ attribute ]: undefined,
+							} );
+						} }
+					>
+						<DropdownMenu
+							placement={
+								isMobile ? 'bottom-start' : 'left-start'
+							}
+							gutter={ isMobile ? 8 : 36 }
+							className="block-editor-bindings__popover"
+							trigger={
+								<Item>
+									<BlockBindingsAttribute
+										attribute={ attribute }
+										binding={ binding }
+									/>
+								</Item>
+							}
+						>
+							<BlockBindingsPanelDropdown
+								fieldsList={ fieldsList }
+								attribute={ attribute }
+								binding={ binding }
+							/>
+						</DropdownMenu>
+					</ToolsPanelItem>
+				);
+			} ) }
+		</>
+	);
+}
+
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
+	const registry = useRegistry();
+	const blockContext = useContext( BlockContext );
+	const { bindings } = metadata || {};
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Don't show not allowed attributes.
-	// Don't show the bindings connected to pattern overrides in the inspectors panel.
-	// TODO: Explore if this should be abstracted to let other sources decide.
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( name, key ) ||
+			! canBindAttribute( blockName, key ) ||
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];
 		}
 	} );
 
-	if ( Object.keys( filteredBindings ).length === 0 ) {
+	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
+		return null;
+	}
+
+	const fieldsList = {};
+	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
+	const registeredSources = getBlockBindingsSources();
+	Object.entries( registeredSources ).forEach(
+		( [ sourceName, { getFieldsList, usesContext } ] ) => {
+			if ( getFieldsList ) {
+				// Populate context.
+				const context = {};
+				if ( usesContext?.length ) {
+					for ( const key of usesContext ) {
+						context[ key ] = blockContext[ key ];
+					}
+				}
+				const sourceList = getFieldsList( {
+					registry,
+					context,
+				} );
+				// Only add source if the list is not empty.
+				if ( sourceList ) {
+					fieldsList[ sourceName ] = { ...sourceList };
+				}
+			}
+		}
+	);
+	// Remove empty sources.
+	Object.entries( fieldsList ).forEach( ( [ key, value ] ) => {
+		if ( ! Object.keys( value ).length ) {
+			delete fieldsList[ key ];
+		}
+	} );
+
+	// Lock the UI when the experiment is not enabled or there are no fields to connect to.
+	const readOnly =
+		! window.__experimentalBlockBindingsUI ||
+		! Object.keys( fieldsList ).length;
+
+	if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
 		return null;
 	}
 
 	return (
 		<InspectorControls>
-			<PanelBody
-				title={ __( 'Attributes' ) }
-				className="components-panel__block-bindings-panel"
+			<ToolsPanel
+				label={ __( 'Attributes' ) }
+				resetAll={ () => {
+					removeAllBlockBindings();
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+				className="block-editor-bindings__panel"
 			>
-				<BaseControl
-					help={ __( 'Attributes connected to various sources.' ) }
-				>
-					<ItemGroup isBordered isSeparated size="large">
-						{ Object.keys( filteredBindings ).map( ( key ) => {
-							return (
-								<Item key={ key }>
-									<HStack>
-										<span>{ key }</span>
-										<span className="components-item__block-bindings-source">
-											{ sources[
-												filteredBindings[ key ].source
-											]
-												? sources[
-														filteredBindings[ key ]
-															.source
-												  ].label
-												: filteredBindings[ key ]
-														.source }
-										</span>
-									</HStack>
-								</Item>
-							);
-						} ) }
-					</ItemGroup>
-				</BaseControl>
-			</PanelBody>
+				<ItemGroup isBordered isSeparated>
+					{ readOnly ? (
+						<ReadOnlyBlockBindingsPanelItems
+							bindings={ filteredBindings }
+						/>
+					) : (
+						<EditableBlockBindingsPanelItems
+							attributes={ bindableAttributes }
+							bindings={ filteredBindings }
+							fieldsList={ fieldsList }
+						/>
+					) }
+				</ItemGroup>
+				<Text variant="muted">
+					{ __( 'Attributes connected to various sources.' ) }
+				</Text>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 };

package/src/hooks/block-bindings.scss

@@ -1,3 +1,14 @@
-.components-panel__block-bindings-panel .components-item__block-bindings-source {
-	color: $gray-700;
+div.block-editor-bindings__panel {
+	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+	button:hover .block-editor-bindings__item-explanation {
+		color: inherit;
+	}
+}
+
+.block-editor-bindings__popover {
+	// This won't be needed if `DropdownMenuGroup` component handles the label.
+	.block-editor-bindings__source-label {
+		grid-column: 2;
+		margin: $grid-unit-10 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/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/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"