@wordpress/block-editor 14.0.0 → 14.1.0

package/src/components/text-alignment-control/index.js

@@ -14,11 +14,10 @@ import {
 	alignJustify,
 } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_ALIGNMENT_OPTIONS = [
 	{
@@ -75,9 +74,11 @@ export default function TextAlignmentControl( {
 	}
 
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
-			options={ validOptions }
 			className={ clsx(
 				'block-editor-text-alignment-control',
 				className
@@ -86,6 +87,17 @@ export default function TextAlignmentControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ validOptions.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-decoration-control/index.js

@@ -8,11 +8,10 @@ import clsx from 'clsx';
  */
 import { reset, formatStrikethrough, formatUnderline } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_DECORATIONS = [
 	{
@@ -48,9 +47,11 @@ export default function TextDecorationControl( {
 	className,
 } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
-			options={ TEXT_DECORATIONS }
 			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
@@ -59,6 +60,17 @@ export default function TextDecorationControl( {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_DECORATIONS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-decoration-control/stories/index.story.js

@@ -13,10 +13,6 @@ export default {
 	component: TextDecorationControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 

package/src/components/text-transform-control/index.js

@@ -13,11 +13,10 @@ import {
 	formatLowercase,
 	formatUppercase,
 } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import SegmentedTextControl from '../segmented-text-control';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+} from '@wordpress/components';
 
 const TEXT_TRANSFORMS = [
 	{
@@ -54,9 +53,11 @@ const TEXT_TRANSFORMS = [
  */
 export default function TextTransformControl( { className, value, onChange } ) {
 	return (
-		<SegmentedTextControl
+		<ToggleGroupControl
+			isDeselectable
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
-			options={ TEXT_TRANSFORMS }
 			className={ clsx(
 				'block-editor-text-transform-control',
 				className
@@ -65,6 +66,17 @@ export default function TextTransformControl( { className, value, onChange } ) {
 			onChange={ ( newValue ) => {
 				onChange( newValue === value ? undefined : newValue );
 			} }
-		/>
+		>
+			{ TEXT_TRANSFORMS.map( ( option ) => {
+				return (
+					<ToggleGroupControlOptionIcon
+						key={ option.value }
+						value={ option.value }
+						icon={ option.icon }
+						label={ option.label }
+					/>
+				);
+			} ) }
+		</ToggleGroupControl>
 	);
 }

package/src/components/text-transform-control/stories/index.story.js

@@ -13,10 +13,6 @@ export default {
 	component: TextTransformControl,
 	argTypes: {
 		onChange: { action: 'onChange' },
-		size: {
-			options: [ 'default', '__unstable-large' ],
-			control: { type: 'radio' },
-		},
 	},
 };
 

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

@@ -120,8 +120,8 @@ $input-size: 300px;
 }
 
 .block-editor-url-input__button-modal {
-	box-shadow: $shadow-popover;
-	border: 1px solid $gray-300;
+	box-shadow: $elevation-x-small;
+	border: $border-width solid $gray-300;
 	background: $white;
 }
 

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

@@ -227,12 +227,14 @@ const ImageURLInputUI = ( {
 				checked={ linkTarget === '_blank' }
 			/>
 			<TextControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link rel' ) }
 				value={ rel ?? '' }
 				onChange={ onSetLinkRel }
 			/>
 			<TextControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
 				label={ __( 'Link CSS class' ) }
 				value={ linkClass || '' }

package/src/components/use-block-drop-zone/index.js

@@ -313,6 +313,8 @@ export default function useBlockDropZone( {
 		getAllowedBlocks,
 		isDragging,
 		isGroupable,
+		getSettings,
+		isZoomOutMode,
 	} = unlock( useSelect( blockEditorStore ) );
 	const {
 		showInsertionPoint,
@@ -343,6 +345,7 @@ export default function useBlockDropZone( {
 				const targetBlockName = getBlockNamesByClientId( [
 					targetRootClientId,
 				] )[ 0 ];
+
 				const draggedBlockNames = getBlockNamesByClientId(
 					getDraggedBlockClientIds()
 				);
@@ -352,10 +355,23 @@ export default function useBlockDropZone( {
 					draggedBlockNames,
 					targetBlockName
 				);
+
 				if ( ! isBlockDroppingAllowed ) {
 					return;
 				}
 
+				const { sectionRootClientId } = unlock( getSettings() );
+
+				// In Zoom Out mode, if the target is not the section root provided by settings then
+				// do not allow dropping as the drop target is not within the root (that which is
+				// treated as "the content" by Zoom Out Mode).
+				if (
+					isZoomOutMode() &&
+					sectionRootClientId !== targetRootClientId
+				) {
+					return;
+				}
+
 				const blocks = getBlocks( targetRootClientId );
 
 				// The block list is empty, don't show the insertion point but still allow dropping.
@@ -470,6 +486,7 @@ export default function useBlockDropZone( {
 				} );
 			},
 			[
+				isDragging,
 				getAllowedBlocks,
 				targetRootClientId,
 				getBlockNamesByClientId,
@@ -481,13 +498,14 @@ export default function useBlockDropZone( {
 				parentBlockClientId,
 				getBlockIndex,
 				registry,
-				showInsertionPoint,
-				isDragging,
 				startDragging,
+				showInsertionPoint,
 				canInsertBlockType,
+				isGroupable,
 				getBlockVariations,
 				getGroupingBlockName,
-				isGroupable,
+				getSettings,
+				isZoomOutMode,
 			]
 		),
 		200

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

@@ -13,7 +13,7 @@ import {
 	__experimentalVStack as VStack,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import { useContext, Fragment } from '@wordpress/element';
 import { useViewportMatch } from '@wordpress/compose';
 
@@ -24,10 +24,10 @@ import {
 	canBindAttribute,
 	getBindableAttributes,
 } from '../hooks/use-bindings-attributes';
-import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
+import { useBlockBindingsUtils } from '../utils/block-bindings';
 
 const {
 	DropdownMenuV2: DropdownMenu,
@@ -51,17 +51,15 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelDropdown( {
-	fieldsList,
-	addConnection,
-	attribute,
-	binding,
-} ) {
+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( ( [ label, fields ], i ) => (
-				<Fragment key={ label }>
+			{ Object.entries( fieldsList ).map( ( [ name, fields ], i ) => (
+				<Fragment key={ name }>
 					<DropdownMenuGroup>
 						{ Object.keys( fieldsList ).length > 1 && (
 							<Text
@@ -70,14 +68,19 @@ function BlockBindingsPanelDropdown( {
 								variant="muted"
 								aria-hidden
 							>
-								{ label }
+								{ registeredSources[ name ].label }
 							</Text>
 						) }
 						{ Object.entries( fields ).map( ( [ key, value ] ) => (
 							<DropdownMenuRadioItem
 								key={ key }
 								onChange={ () =>
-									addConnection( key, attribute )
+									updateBlockBindings( {
+										[ attribute ]: {
+											source: name,
+											args: { key },
+										},
+									} )
 								}
 								name={ attribute + '-binding' }
 								value={ key }
@@ -141,9 +144,8 @@ function EditableBlockBindingsPanelItems( {
 	attributes,
 	bindings,
 	fieldsList,
-	addConnection,
-	removeConnection,
 } ) {
+	const { updateBlockBindings } = useBlockBindingsUtils();
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
@@ -155,7 +157,9 @@ function EditableBlockBindingsPanelItems( {
 						hasValue={ () => !! binding }
 						label={ attribute }
 						onDeselect={ () => {
-							removeConnection( attribute );
+							updateBlockBindings( {
+								[ attribute ]: undefined,
+							} );
 						} }
 					>
 						<DropdownMenu
@@ -175,7 +179,6 @@ function EditableBlockBindingsPanelItems( {
 						>
 							<BlockBindingsPanelDropdown
 								fieldsList={ fieldsList }
-								addConnection={ addConnection }
 								attribute={ attribute }
 								binding={ binding }
 							/>
@@ -187,91 +190,33 @@ function EditableBlockBindingsPanelItems( {
 	);
 }
 
-export const BlockBindingsPanel = ( { name, metadata } ) => {
+export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const registry = useRegistry();
 	const blockContext = useContext( BlockContext );
 	const { bindings } = metadata || {};
-
-	const bindableAttributes = getBindableAttributes( name );
+	const { removeAllBlockBindings } = useBlockBindingsUtils();
+	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const filteredBindings = { ...bindings };
 	Object.keys( filteredBindings ).forEach( ( key ) => {
 		if (
-			! canBindAttribute( name, key ) ||
+			! canBindAttribute( blockName, key ) ||
 			filteredBindings[ key ].source === 'core/pattern-overrides'
 		) {
 			delete filteredBindings[ key ];
 		}
 	} );
 
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const { _id } = useSelect( ( select ) => {
-		const { getSelectedBlockClientId } = select( blockEditorStore );
-
-		return {
-			_id: getSelectedBlockClientId(),
-		};
-	}, [] );
-
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
 	}
 
-	const removeAllConnections = () => {
-		const newMetadata = { ...metadata };
-		delete newMetadata.bindings;
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
-	const addConnection = ( value, attribute ) => {
-		// Assuming the block expects a flat structure for its metadata attribute
-		const newMetadata = {
-			...metadata,
-			// Adjust this according to the actual structure expected by your block
-			bindings: {
-				...metadata?.bindings,
-				[ attribute ]: {
-					source: 'core/post-meta',
-					args: { key: value },
-				},
-			},
-		};
-		// Update the block's attributes with the new metadata
-		updateBlockAttributes( _id, {
-			metadata: newMetadata,
-		} );
-	};
-
-	const removeConnection = ( key ) => {
-		const newMetadata = { ...metadata };
-		if ( ! newMetadata.bindings ) {
-			return;
-		}
-
-		delete newMetadata.bindings[ key ];
-		if ( Object.keys( newMetadata.bindings ).length === 0 ) {
-			delete newMetadata.bindings;
-		}
-		updateBlockAttributes( _id, {
-			metadata:
-				Object.keys( newMetadata ).length === 0
-					? undefined
-					: newMetadata,
-		} );
-	};
-
 	const fieldsList = {};
 	const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 	const registeredSources = getBlockBindingsSources();
-	Object.values( registeredSources ).forEach(
-		( { getFieldsList, label, usesContext } ) => {
+	Object.entries( registeredSources ).forEach(
+		( [ sourceName, { getFieldsList, usesContext } ] ) => {
 			if ( getFieldsList ) {
 				// Populate context.
 				const context = {};
@@ -286,7 +231,7 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 				} );
 				// Only add source if the list is not empty.
 				if ( sourceList ) {
-					fieldsList[ label ] = { ...sourceList };
+					fieldsList[ sourceName ] = { ...sourceList };
 				}
 			}
 		}
@@ -312,7 +257,7 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 			<ToolsPanel
 				label={ __( 'Attributes' ) }
 				resetAll={ () => {
-					removeAllConnections();
+					removeAllBlockBindings();
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
 				className="block-editor-bindings__panel"
@@ -327,8 +272,6 @@ export const BlockBindingsPanel = ( { name, metadata } ) => {
 							attributes={ bindableAttributes }
 							bindings={ filteredBindings }
 							fieldsList={ fieldsList }
-							addConnection={ addConnection }
-							removeConnection={ removeConnection }
 						/>
 					) }
 				</ItemGroup>

package/src/hooks/block-bindings.scss

@@ -1,5 +1,5 @@
 div.block-editor-bindings__panel {
-	grid-template-columns: auto;
+	grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
 	button:hover .block-editor-bindings__item-explanation {
 		color: inherit;
 	}

package/src/hooks/test/background.js

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import {
+	setBackgroundStyleDefaults,
+	BACKGROUND_BLOCK_DEFAULT_VALUES,
+} from '../background';
+
+describe( 'background', () => {
+	describe( 'setBackgroundStyleDefaults', () => {
+		const backgroundStyles = {
+			backgroundImage: { id: 123, url: 'image.png' },
+		};
+		const backgroundStylesContain = {
+			backgroundImage: { id: 123, url: 'image.png' },
+			backgroundSize: 'contain',
+		};
+		const backgroundStylesNoURL = { backgroundImage: { id: 123 } };
+		it.each( [
+			[
+				'return background size default',
+				backgroundStyles,
+				{
+					backgroundSize:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundSize,
+				},
+			],
+			[ 'return early if no styles are passed', undefined, undefined ],
+			[
+				'return early if images has no id',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return early if images has no URL',
+				backgroundStylesNoURL,
+				undefined,
+			],
+			[
+				'return background position default',
+				backgroundStylesContain,
+				{
+					backgroundPosition:
+						BACKGROUND_BLOCK_DEFAULT_VALUES.backgroundPosition,
+				},
+			],
+			[
+				'not apply background position value if one already exists in styles',
+				{
+					...backgroundStylesContain,
+					backgroundPosition: 'center',
+				},
+				undefined,
+			],
+		] )( 'should %s', ( message, styles, expected ) => {
+			const result = setBackgroundStyleDefaults( styles );
+			expect( result ).toEqual( expected );
+		} );
+	} );
+} );