@wordpress/block-library 9.40.2-next.v.202602271551.0 → 9.41.0

package/src/button/deprecated.js

@@ -26,6 +26,25 @@ import { compose } from '@wordpress/compose';
 import migrateFontFamily from '../utils/migrate-font-family';
 import migrateTextAlign from '../utils/migrate-text-align';
 
+const migrateWidth = ( attributes ) => {
+	const { width, ...otherAttributes } = attributes;
+
+	if ( ! width ) {
+		return otherAttributes;
+	}
+
+	return {
+		...otherAttributes,
+		style: {
+			...otherAttributes.style,
+			dimensions: {
+				...otherAttributes.style?.dimensions,
+				width: `${ width }%`,
+			},
+		},
+	};
+};
+
 const migrateBorderRadius = ( attributes ) => {
 	const { borderRadius, ...newAttributes } = attributes;
 	// We have to check old property `borderRadius` and if
@@ -136,6 +155,211 @@ const blockAttributes = {
 	},
 };
 
+const v14 = {
+	attributes: {
+		tagName: {
+			type: 'string',
+			enum: [ 'a', 'button' ],
+			default: 'a',
+		},
+		type: {
+			type: 'string',
+			default: 'button',
+		},
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+			role: 'content',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a,button',
+			attribute: 'title',
+			role: 'content',
+		},
+		text: {
+			type: 'rich-text',
+			source: 'rich-text',
+			selector: 'a,button',
+			role: 'content',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+			role: 'content',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+			role: 'content',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		splitting: true,
+		align: false,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			__experimentalSkipSerialization: [
+				'fontSize',
+				'lineHeight',
+				'textAlign',
+				'fontFamily',
+				'fontWeight',
+				'fontStyle',
+				'textTransform',
+				'textDecoration',
+				'letterSpacing',
+			],
+			fontSize: true,
+			lineHeight: true,
+			textAlign: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalTextDecoration: true,
+			__experimentalLetterSpacing: true,
+			__experimentalWritingMode: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		shadow: {
+			__experimentalSkipSerialization: true,
+		},
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			color: true,
+			radius: true,
+			style: true,
+			width: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
+	selectors: {
+		root: '.wp-block-button .wp-block-button__link',
+		typography: {
+			writingMode: '.wp-block-button',
+		},
+	},
+	save( { attributes, className } ) {
+		const {
+			tagName,
+			type,
+			fontSize,
+			linkTarget,
+			rel,
+			style,
+			text,
+			title,
+			url,
+			width,
+		} = attributes;
+
+		const TagName = tagName || 'a';
+		const isButtonTag = 'button' === TagName;
+		const buttonType = type || 'button';
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const shadowProps = getShadowClassesAndStyles( attributes );
+		const typographyProps = getTypographyClassesAndStyles( attributes );
+		const buttonClasses = clsx(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			typographyProps.className,
+			{
+				// For backwards compatibility add style that isn't
+				// provided via block support.
+				'no-border-radius': style?.border?.radius === 0,
+				[ `has-custom-font-size` ]:
+					fontSize || style?.typography?.fontSize,
+			},
+			__experimentalGetElementClassName( 'button' )
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+			...shadowProps.style,
+			...typographyProps.style,
+			writingMode: undefined,
+		};
+
+		const wrapperClasses = clsx( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName={ TagName }
+					type={ isButtonTag ? buttonType : null }
+					className={ buttonClasses }
+					href={ isButtonTag ? null : url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ isButtonTag ? null : linkTarget }
+					rel={ isButtonTag ? null : rel }
+				/>
+			</div>
+		);
+	},
+	isEligible( attributes ) {
+		return typeof attributes.width === 'number';
+	},
+	migrate: migrateWidth,
+};
+
 const v13 = {
 	attributes: {
 		tagName: {
@@ -317,10 +541,6 @@ const v13 = {
 			writingMode: undefined,
 		};
 
-		// The use of a `title` attribute here is soft-deprecated, but still applied
-		// if it had already been assigned, for the sake of backward-compatibility.
-		// A title will no longer be assigned for new or updated button block links.
-
 		const wrapperClasses = clsx( className, {
 			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
 		} );
@@ -342,9 +562,9 @@ const v13 = {
 		);
 	},
 	isEligible( attributes ) {
-		return !! attributes.textAlign;
+		return !! attributes.textAlign || typeof attributes.width === 'number';
 	},
-	migrate: migrateTextAlign,
+	migrate: compose( migrateWidth, migrateTextAlign ),
 };
 
 const v12 = {
@@ -531,6 +751,10 @@ const v12 = {
 			</div>
 		);
 	},
+	isEligible( attributes ) {
+		return typeof attributes.width === 'number';
+	},
+	migrate: migrateWidth,
 };
 
 const v11 = {
@@ -793,13 +1017,14 @@ const v10 = {
 			</div>
 		);
 	},
-	migrate: migrateFontFamily,
-	isEligible( { style } ) {
-		return style?.typography?.fontFamily;
+	migrate: compose( migrateWidth, migrateFontFamily ),
+	isEligible( { style, width } ) {
+		return style?.typography?.fontFamily || typeof width === 'number';
 	},
 };
 
 const deprecated = [
+	v14,
 	v13,
 	v12,
 	v11,
@@ -908,7 +1133,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateWidth,
+			migrateFontFamily,
+			migrateBorderRadius
+		),
 	},
 	{
 		supports: {
@@ -996,7 +1225,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateWidth,
+			migrateFontFamily,
+			migrateBorderRadius
+		),
 	},
 	{
 		supports: {
@@ -1084,7 +1317,11 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: compose( migrateFontFamily, migrateBorderRadius ),
+		migrate: compose(
+			migrateWidth,
+			migrateFontFamily,
+			migrateBorderRadius
+		),
 	},
 	{
 		supports: {
@@ -1148,7 +1385,7 @@ const deprecated = [
 				/>
 			);
 		},
-		migrate: migrateBorderRadius,
+		migrate: compose( migrateWidth, migrateBorderRadius ),
 	},
 	{
 		supports: {
@@ -1200,6 +1437,7 @@ const deprecated = [
 			!! attributes.customGradient ||
 			!! attributes.align,
 		migrate: compose(
+			migrateWidth,
 			migrateBorderRadius,
 			migrateCustomColorsAndGradients,
 			migrateAlign
@@ -1394,7 +1632,7 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( migrateWidth, oldColorsMigration ),
 		save( { attributes } ) {
 			const {
 				url,
@@ -1477,7 +1715,7 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( migrateWidth, oldColorsMigration ),
 	},
 	{
 		attributes: {
@@ -1511,7 +1749,7 @@ const deprecated = [
 				</div>
 			);
 		},
-		migrate: oldColorsMigration,
+		migrate: compose( migrateWidth, oldColorsMigration ),
 	},
 ];
 

package/src/button/edit.js

@@ -12,10 +12,6 @@ import {
 	ToolbarButton,
 	Popover,
 	ExternalLink,
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -27,6 +23,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalGetShadowClassesAndStyles as useShadowProps,
+	__experimentalGetDimensionsClassesAndStyles as useDimensionsProps,
 	__experimentalGetElementClassName,
 	store as blockEditorStore,
 	useBlockEditingMode,
@@ -47,9 +44,9 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { unlock } from '../lock-unlock';
 import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';
+import { getWidthClasses, isPercentageWidth } from './utils';
 
 const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
@@ -117,49 +114,6 @@ function useEnter( props ) {
 	}, [] );
 }
 
-function WidthPanel( { selectedWidth, setAttributes } ) {
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-
-	return (
-		<ToolsPanel
-			label={ __( 'Settings' ) }
-			resetAll={ () => setAttributes( { width: undefined } ) }
-			dropdownMenuProps={ dropdownMenuProps }
-		>
-			<ToolsPanelItem
-				label={ __( 'Width' ) }
-				isShownByDefault
-				hasValue={ () => !! selectedWidth }
-				onDeselect={ () => setAttributes( { width: undefined } ) }
-			>
-				<ToggleGroupControl
-					label={ __( 'Width' ) }
-					value={ selectedWidth }
-					onChange={ ( newWidth ) =>
-						setAttributes( { width: newWidth } )
-					}
-					isBlock
-					__next40pxDefaultSize
-				>
-					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
-						return (
-							<ToggleGroupControlOption
-								key={ widthValue }
-								value={ widthValue }
-								label={ sprintf(
-									/* translators: %d: Percentage value. */
-									__( '%d%%' ),
-									widthValue
-								) }
-							/>
-						);
-					} ) }
-				</ToggleGroupControl>
-			</ToolsPanelItem>
-		</ToolsPanel>
-	);
-}
-
 function ButtonEdit( props ) {
 	const {
 		attributes,
@@ -179,9 +133,10 @@ function ButtonEdit( props ) {
 		style,
 		text,
 		url,
-		width,
 		metadata,
 	} = attributes;
+	const width = style?.dimensions?.width;
+
 	useDeprecatedTextAlign( props );
 
 	const TagName = tagName || 'a';
@@ -203,6 +158,7 @@ function ButtonEdit( props ) {
 	const colorProps = useColorProps( attributes );
 	const spacingProps = useSpacingProps( attributes );
 	const shadowProps = useShadowProps( attributes );
+	const dimensionsProps = useDimensionsProps( attributes );
 	const ref = useRef();
 	const richTextRef = useRef();
 	const blockProps = useBlockProps( {
@@ -304,10 +260,21 @@ function ButtonEdit( props ) {
 	const useEnterRef = useEnter( { content: text, clientId } );
 	const mergedRef = useMergeRefs( [ useEnterRef, richTextRef ] );
 
-	const [ fluidTypographySettings, layout ] = useSettings(
+	const [ fluidTypographySettings, layout, dimensionSizes ] = useSettings(
 		'typography.fluid',
-		'layout'
+		'layout',
+		'dimensions.dimensionSizes'
 	);
+	const dimensionPresets = useMemo( () => {
+		if ( ! dimensionSizes ) {
+			return [];
+		}
+		return [
+			...( dimensionSizes?.custom ?? [] ),
+			...( dimensionSizes?.theme ?? [] ),
+			...( dimensionSizes?.default ?? [] ),
+		];
+	}, [ dimensionSizes ] );
 	const typographyProps = useTypographyProps( attributes, {
 		typography: {
 			fluid: fluidTypographySettings,
@@ -317,18 +284,46 @@ function ButtonEdit( props ) {
 		},
 	} );
 
+	// Resolve preset dimension references to their actual values.
+	const resolvedWidth = useMemo( () => {
+		if ( ! width ) {
+			return undefined;
+		}
+		const presetPrefix = 'var:preset|dimension|';
+		if ( width.startsWith( presetPrefix ) ) {
+			const slug = width.slice( presetPrefix.length );
+			const preset = dimensionPresets?.find( ( p ) => p.slug === slug );
+			return preset?.size ?? width;
+		}
+		return width;
+	}, [ width, dimensionPresets ] );
+
 	const hasNonContentControls = blockEditingMode === 'default';
 	const hasBlockControls =
 		hasNonContentControls || ( isLinkTag && ! lockUrlControls );
+	const classes = clsx(
+		blockProps.className,
+		getWidthClasses( resolvedWidth )
+	);
+
+	const widthStyle = useMemo( () => {
+		if ( ! width ) {
+			return {};
+		}
+		if ( isPercentageWidth( resolvedWidth ) ) {
+			return {
+				'--wp--block-button--width': parseFloat( resolvedWidth ),
+			};
+		}
+		return dimensionsProps.style;
+	}, [ width, resolvedWidth, dimensionsProps.style ] );
 
 	return (
 		<>
 			<div
 				{ ...blockProps }
-				className={ clsx( blockProps.className, {
-					[ `has-custom-width wp-block-button__width-${ width }` ]:
-						width,
-				} ) }
+				className={ classes }
+				style={ { ...blockProps.style, ...widthStyle } }
 			>
 				<RichText
 					ref={ mergedRef }
@@ -432,12 +427,6 @@ function ButtonEdit( props ) {
 						/>
 					</Popover>
 				) }
-			<InspectorControls>
-				<WidthPanel
-					selectedWidth={ width }
-					setAttributes={ setAttributes }
-				/>
-			</InspectorControls>
 			<InspectorControls group="advanced">
 				<HTMLElementControl
 					tagName={ tagName }

package/src/button/index.php

@@ -60,6 +60,74 @@ function render_block_core_button( $attributes, $content ) {
 		return '';
 	}
 
+	$width = $attributes['style']['dimensions']['width'] ?? null;
+
+	if ( $width ) {
+		// Resolve preset references to their actual values.
+		$resolved_width = $width;
+		$is_preset      = str_starts_with( $width, 'var:preset|dimension|' );
+
+		if ( $is_preset ) {
+			$slug              = substr( $width, strlen( 'var:preset|dimension|' ) );
+			$dimension_presets = wp_get_global_settings(
+				array( 'dimensions', 'dimensionSizes' ),
+				array( 'block_name' => 'core/button' )
+			);
+
+			// Search origins in priority order: custom > theme > default.
+			if ( is_array( $dimension_presets ) ) {
+				foreach ( array( 'custom', 'theme', 'default' ) as $origin ) {
+					if ( empty( $dimension_presets[ $origin ] ) || ! is_array( $dimension_presets[ $origin ] ) ) {
+						continue;
+					}
+					foreach ( $dimension_presets[ $origin ] as $preset ) {
+						if ( isset( $preset['slug'] ) && $preset['slug'] === $slug ) {
+							$resolved_width = $preset['size'] ?? $width;
+							break 2;
+						}
+					}
+				}
+			}
+		}
+
+		$is_percentage = str_ends_with( $resolved_width, '%' );
+
+		$processor = new WP_HTML_Tag_Processor( $content );
+		// Target the outer wrapper div.
+		if ( $processor->next_tag( array( 'class_name' => 'wp-block-button' ) ) ) {
+			$processor->add_class( 'has-custom-width' );
+			$existing_style = $processor->get_attribute( 'style' );
+			$existing_style = is_string( $existing_style ) ? $existing_style : '';
+
+			if ( $is_percentage ) {
+				$numeric_width = (float) $resolved_width;
+				$processor->add_class( 'wp-block-button__width' );
+
+				// Maintain legacy class for the standard percentage widths.
+				$legacy_widths = array(
+					'25%'  => 'wp-block-button__width-25',
+					'50%'  => 'wp-block-button__width-50',
+					'75%'  => 'wp-block-button__width-75',
+					'100%' => 'wp-block-button__width-100',
+				);
+				if ( isset( $legacy_widths[ $resolved_width ] ) ) {
+					$processor->add_class( $legacy_widths[ $resolved_width ] );
+				}
+
+				$width_style = "--wp--block-button--width: $numeric_width;";
+				$processor->set_attribute( 'style', $width_style . ( $existing_style ? ' ' . $existing_style : '' ) );
+			} else {
+				$css_value   = $is_preset
+					? 'var(--wp--preset--dimension--' . _wp_to_kebab_case( $slug ) . ')'
+					: $width;
+				$width_style = "width: $css_value;";
+				$processor->set_attribute( 'style', $width_style . ( $existing_style ? ' ' . $existing_style : '' ) );
+			}
+
+			$content = $processor->get_updated_html();
+		}
+	}
+
 	return $content;
 }
 

package/src/button/save.js

@@ -17,7 +17,7 @@ import {
 	getTypographyClassesAndStyles,
 } from '@wordpress/block-editor';
 
-export default function save( { attributes, className } ) {
+export default function save( { attributes } ) {
 	const {
 		tagName,
 		type,
@@ -28,9 +28,7 @@ export default function save( { attributes, className } ) {
 		text,
 		title,
 		url,
-		width,
 	} = attributes;
-
 	const TagName = tagName || 'a';
 	const isButtonTag = 'button' === TagName;
 	const buttonType = type || 'button';
@@ -65,12 +63,8 @@ export default function save( { attributes, className } ) {
 	// if it had already been assigned, for the sake of backward-compatibility.
 	// A title will no longer be assigned for new or updated button block links.
 
-	const wrapperClasses = clsx( className, {
-		[ `has-custom-width wp-block-button__width-${ width }` ]: width,
-	} );
-
 	return (
-		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+		<div { ...useBlockProps.save() }>
 			<RichText.Content
 				tagName={ TagName }
 				type={ isButtonTag ? buttonType : null }