@wordpress/block-library 9.48.1 → 10.0.0

package/src/post-featured-image/dimension-controls.js

@@ -2,207 +2,128 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
+import { __experimentalUseCustomUnits as useCustomUnits } from '@wordpress/components';
 import {
-	SelectControl,
-	__experimentalUnitControl as UnitControl,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import { useSettings } from '@wordpress/block-editor';
+	privateApis as blockEditorPrivateApis,
+	useSettings,
+} from '@wordpress/block-editor';
 
-const SCALE_OPTIONS = (
-	<>
-		<ToggleGroupControlOption
-			value="cover"
-			label={ _x( 'Cover', 'Scale option for Image dimension control' ) }
-		/>
-		<ToggleGroupControlOption
-			value="contain"
-			label={ _x(
-				'Contain',
-				'Scale option for Image dimension control'
-			) }
-		/>
-		<ToggleGroupControlOption
-			value="fill"
-			label={ _x( 'Fill', 'Scale option for Image dimension control' ) }
-		/>
-	</>
-);
+/**
+ * Internal dependencies
+ */
+import {
+	getActiveDimensionValue,
+	getDimensionUpdateAttributes,
+	getStyleStateKey,
+} from '../utils/style-state';
+import { unlock } from '../lock-unlock';
+
+const { DimensionsTool } = unlock( blockEditorPrivateApis );
 
 const DEFAULT_SCALE = 'cover';
+const DIMENSION_KEYS = [ 'aspectRatio', 'width', 'height', 'scale' ];
 
-const scaleHelp = {
-	cover: __(
-		'Image is scaled and cropped to fill the entire space without being distorted.'
-	),
-	contain: __(
-		'Image is scaled to fill the space without clipping nor distorting.'
-	),
-	fill: __(
-		'Image will be stretched and distorted to completely fill the space.'
-	),
-};
+const scaleOptions = [
+	{
+		value: 'cover',
+		label: _x( 'Cover', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image is scaled and cropped to fill the entire space without being distorted.'
+		),
+	},
+	{
+		value: 'contain',
+		label: _x( 'Contain', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image is scaled to fill the space without clipping nor distorting.'
+		),
+	},
+	{
+		value: 'fill',
+		label: _x( 'Fill', 'Scale option for Image dimension control' ),
+		help: __(
+			'Image will be stretched and distorted to completely fill the space.'
+		),
+	},
+];
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { aspectRatio, width, height, scale },
+	attributes,
 	setAttributes,
+	selectedStyleState,
+	hasSelectedStyleState = false,
 } ) => {
-	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
-		useSettings(
-			'spacing.units',
-			'dimensions.aspectRatios.default',
-			'dimensions.aspectRatios.theme',
-			'dimensions.defaultAspectRatios'
-		);
+	const { style } = attributes;
+	const selectedStyleStateKey = getStyleStateKey( selectedStyleState );
+	const activeAspectRatio = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'aspectRatio',
+	} );
+	const activeWidth = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'width',
+	} );
+	const activeHeight = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'height',
+	} );
+	const activeScale = getActiveDimensionValue( {
+		attributes,
+		selectedState: selectedStyleState,
+		hasSelectedStyleState,
+		attributeKey: 'scale',
+		styleKey: 'objectFit',
+	} );
+
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
 
-	const onDimensionChange = ( dimension, nextValue ) => {
-		const parsedValue = parseFloat( nextValue );
-		/**
-		 * If we have no value set and we change the unit,
-		 * we don't want to set the attribute, as it would
-		 * end up having the unit as value without any number.
-		 */
-		if ( isNaN( parsedValue ) && nextValue ) {
-			return;
-		}
-		setAttributes( {
-			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
-		} );
-	};
-	const scaleLabel = _x( 'Scale', 'Image scaling options' );
-
-	const showScaleControl =
-		height || ( aspectRatio && aspectRatio !== 'auto' );
+	const setDimensionAttributes = ( nextDimensions ) => {
+		const nextImageDimensions = {
+			...nextDimensions,
+			width:
+				! nextDimensions.width && nextDimensions.height
+					? 'auto'
+					: nextDimensions.width,
+		};
 
-	const themeOptions = themeRatios?.map( ( { name, ratio } ) => ( {
-		label: name,
-		value: ratio,
-	} ) );
-
-	const defaultOptions = defaultRatios?.map( ( { name, ratio } ) => ( {
-		label: name,
-		value: ratio,
-	} ) );
-
-	const aspectRatioOptions = [
-		{
-			label: _x(
-				'Original',
-				'Aspect ratio option for dimensions control'
-			),
-			value: 'auto',
-		},
-		...( showDefaultRatios ? defaultOptions : [] ),
-		...( themeOptions ? themeOptions : [] ),
-	];
+		setAttributes(
+			getDimensionUpdateAttributes( {
+				style,
+				selectedState: selectedStyleState,
+				hasSelectedStyleState,
+				nextDimensions: nextImageDimensions,
+				dimensionKeyMap: { scale: 'objectFit' },
+				dimensionKeys: DIMENSION_KEYS,
+			} )
+		);
+	};
 
 	return (
-		<>
-			<ToolsPanelItem
-				hasValue={ () => !! aspectRatio }
-				label={ __( 'Aspect ratio' ) }
-				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
-				resetAllFilter={ () => ( {
-					aspectRatio: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<SelectControl
-					__next40pxDefaultSize
-					label={ __( 'Aspect ratio' ) }
-					value={ aspectRatio || 'auto' }
-					options={ aspectRatioOptions }
-					onChange={ ( nextAspectRatio ) =>
-						setAttributes( { aspectRatio: nextAspectRatio } )
-					}
-				/>
-			</ToolsPanelItem>
-			<ToolsPanelItem
-				className="single-column"
-				hasValue={ () => !! height }
-				label={ __( 'Height' ) }
-				onDeselect={ () => setAttributes( { height: undefined } ) }
-				resetAllFilter={ () => ( {
-					height: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<UnitControl
-					__next40pxDefaultSize
-					label={ __( 'Height' ) }
-					labelPosition="top"
-					value={ height || '' }
-					min={ 0 }
-					onChange={ ( nextHeight ) =>
-						onDimensionChange( 'height', nextHeight )
-					}
-					units={ units }
-				/>
-			</ToolsPanelItem>
-			<ToolsPanelItem
-				className="single-column"
-				hasValue={ () => !! width }
-				label={ __( 'Width' ) }
-				onDeselect={ () => setAttributes( { width: undefined } ) }
-				resetAllFilter={ () => ( {
-					width: undefined,
-				} ) }
-				isShownByDefault
-				panelId={ clientId }
-			>
-				<UnitControl
-					__next40pxDefaultSize
-					label={ __( 'Width' ) }
-					labelPosition="top"
-					value={ width || '' }
-					min={ 0 }
-					onChange={ ( nextWidth ) =>
-						onDimensionChange( 'width', nextWidth )
-					}
-					units={ units }
-				/>
-			</ToolsPanelItem>
-			{ showScaleControl && (
-				<ToolsPanelItem
-					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
-					label={ scaleLabel }
-					onDeselect={ () =>
-						setAttributes( {
-							scale: DEFAULT_SCALE,
-						} )
-					}
-					resetAllFilter={ () => ( {
-						scale: DEFAULT_SCALE,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<ToggleGroupControl
-						__next40pxDefaultSize
-						label={ scaleLabel }
-						value={ scale }
-						help={ scaleHelp[ scale ] }
-						onChange={ ( value ) =>
-							setAttributes( {
-								scale: value,
-							} )
-						}
-						isBlock
-					>
-						{ SCALE_OPTIONS }
-					</ToggleGroupControl>
-				</ToolsPanelItem>
-			) }
-		</>
+		<DimensionsTool
+			key={ selectedStyleStateKey }
+			panelId={ clientId }
+			value={ {
+				aspectRatio: activeAspectRatio,
+				width: activeWidth,
+				height: activeHeight,
+				scale: activeScale,
+			} }
+			onChange={ setDimensionAttributes }
+			defaultScale={ DEFAULT_SCALE }
+			defaultAspectRatio="auto"
+			scaleOptions={ scaleOptions }
+			unitsOptions={ units }
+		/>
 	);
 };
 

package/src/post-featured-image/edit.js

@@ -49,9 +49,15 @@ import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { unlock } from '../lock-unlock';
+import { getDimensionResetAttributes } from '../utils/style-state';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const { ResolutionTool } = unlock( blockEditorPrivateApis );
+const { isDefaultBlockStyleState, ResolutionTool } = unlock(
+	blockEditorPrivateApis
+);
+
+const hasDimensionValue = ( value ) =>
+	value !== undefined && value !== null && value !== '';
 const DEFAULT_MEDIA_SIZE_SLUG = 'full';
 
 function FeaturedImageResolutionTool( { image, value, onChange } ) {
@@ -137,12 +143,13 @@ export default function PostFeaturedImageEdit( {
 		return imageId;
 	}, [ storedFeaturedImage, useFirstImageFromPost, postContent ] );
 
-	const { media, postType, postPermalink, hasSelectedStyleState } = useSelect(
+	const { media, postType, postPermalink, selectedStyleState } = useSelect(
 		( select ) => {
 			const { getEntityRecord, getPostType, getEditedEntityRecord } =
 				select( coreStore );
-			const { hasSelectedStyleState: hasSelectedBlockStyleState } =
-				unlock( select( blockEditorStore ) );
+			const { getSelectedBlockStyleState } = unlock(
+				select( blockEditorStore )
+			);
 			return {
 				media:
 					featuredImage &&
@@ -155,18 +162,19 @@ export default function PostFeaturedImageEdit( {
 					postTypeSlug,
 					postId
 				)?.link,
-				hasSelectedStyleState: hasSelectedBlockStyleState( clientId ),
+				selectedStyleState: getSelectedBlockStyleState( clientId ),
 			};
 		},
 		[ clientId, featuredImage, postTypeSlug, postId ]
 	);
+	const hasSelectedStyleState =
+		! isDefaultBlockStyleState( selectedStyleState );
 
 	const mediaUrl =
 		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
 		media?.source_url;
 
 	const blockProps = useBlockProps( {
-		style: { width, height, aspectRatio },
 		className: clsx( {
 			'is-transient': temporaryURL,
 		} ),
@@ -184,8 +192,13 @@ export default function PostFeaturedImageEdit( {
 				) }
 				withIllustration
 				style={ {
-					height: !! aspectRatio && '100%',
-					width: !! aspectRatio && '100%',
+					aspectRatio,
+					height: hasDimensionValue( height )
+						? height
+						: hasDimensionValue( width ) && 'auto',
+					width: hasDimensionValue( width )
+						? width
+						: !! aspectRatio && '100%',
 					...borderProps.style,
 					...shadowProps.style,
 				} }
@@ -240,16 +253,32 @@ export default function PostFeaturedImageEdit( {
 					clientId={ clientId }
 				/>
 			</InspectorControls>
-			{ ! hasSelectedStyleState && (
-				<InspectorControls group="dimensions">
-					<DimensionControls
-						clientId={ clientId }
-						attributes={ attributes }
-						setAttributes={ setAttributes }
-						media={ media }
-					/>
-				</InspectorControls>
-			) }
+			<InspectorControls
+				group="dimensions"
+				resetAllFilter={ ( attrs ) => {
+					return getDimensionResetAttributes( {
+						attributes: attrs,
+						selectedState: selectedStyleState,
+						hasSelectedStyleState,
+						keys: [ 'aspectRatio', 'height', 'objectFit', 'width' ],
+						defaultAttributes: {
+							aspectRatio: undefined,
+							height: undefined,
+							scale: undefined,
+							width: undefined,
+						},
+					} );
+				} }
+			>
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+					selectedStyleState={ selectedStyleState }
+					hasSelectedStyleState={ hasSelectedStyleState }
+				/>
+			</InspectorControls>
 			{ ( featuredImage || isDescendentOfQueryLoop || ! postId ) && (
 				<InspectorControls>
 					<ToolsPanel
@@ -266,7 +295,7 @@ export default function PostFeaturedImageEdit( {
 					>
 						<ToolsPanelItem
 							label={
-								postType?.labels.singular_name
+								postType?.labels?.singular_name
 									? sprintf(
 											// translators: %s: Name of the post type e.g: "post".
 											__( 'Link to %s' ),
@@ -327,7 +356,6 @@ export default function PostFeaturedImageEdit( {
 								}
 							>
 								<TextControl
-									__next40pxDefaultSize
 									label={ __( 'Link relation' ) }
 									help={ createInterpolateElement(
 										__(
@@ -398,8 +426,11 @@ export default function PostFeaturedImageEdit( {
 	const imageStyles = {
 		...borderProps.style,
 		...shadowProps.style,
-		height: aspectRatio ? '100%' : height,
-		width: !! aspectRatio && '100%',
+		aspectRatio,
+		height: hasDimensionValue( height )
+			? height
+			: hasDimensionValue( width ) && 'auto',
+		width: hasDimensionValue( width ) ? width : !! aspectRatio && '100%',
 		objectFit: !! ( height || aspectRatio ) && scale,
 	};
 

package/src/post-featured-image/index.php

@@ -40,16 +40,26 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 
 	$extra_styles = '';
+	$has_width    = array_key_exists( 'width', $attributes ) && null !== $attributes['width'] && '' !== $attributes['width'];
+	$has_height   = array_key_exists( 'height', $attributes ) && null !== $attributes['height'] && '' !== $attributes['height'];
 
-	// Aspect ratio with a height set needs to override the default width/height.
 	if ( ! empty( $attributes['aspectRatio'] ) ) {
-		$extra_styles .= 'width:100%;height:100%;';
-	} elseif ( ! empty( $attributes['height'] ) ) {
-		$extra_styles .= "height:{$attributes['height']};";
+		$extra_styles .= esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';';
+		$extra_styles .= 'width:100%;';
+	}
+
+	if ( $has_height ) {
+		$extra_styles .= esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';';
+	} elseif ( $has_width ) {
+		$extra_styles .= 'height:auto;';
+	}
+
+	if ( $has_width ) {
+		$extra_styles .= esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';';
 	}
 
 	if ( ! empty( $attributes['scale'] ) ) {
-		$extra_styles .= "object-fit:{$attributes['scale']};";
+		$extra_styles .= esc_attr( safecss_filter_attr( 'object-fit:' . $attributes['scale'] ) ) . ';';
 	}
 	if ( ! empty( $attributes['style']['shadow'] ) ) {
 		$shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
@@ -90,6 +100,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 			foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) {
 				$tag_html->set_attribute( $name, $processor->get_attribute( $name ) );
 			}
+			if ( ! empty( $attr['style'] ) ) {
+				$existing_style = $tag_html->get_attribute( 'style' );
+				$style          = is_string( $existing_style ) && '' !== $existing_style
+					? rtrim( $existing_style, ';' ) . ';' . $attr['style']
+					: $attr['style'];
+				$tag_html->set_attribute( 'style', $style );
+			}
 			$featured_image = $tag_html->get_updated_html();
 		}
 	}
@@ -101,13 +118,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$height         = ! empty( $attributes['height'] ) ? 'style="' . esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . '"' : '';
 		$featured_image = sprintf(
-			'<a href="%1$s" target="%2$s" %3$s %4$s>%5$s%6$s</a>',
+			'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
 			esc_url( get_the_permalink( $post_ID ) ),
 			esc_attr( $link_target ),
 			$rel,
-			$height,
 			$featured_image,
 			$overlay_markup
 		);
@@ -115,20 +130,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$aspect_ratio = ! empty( $attributes['aspectRatio'] )
-		? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
-		: '';
-	$width        = ! empty( $attributes['width'] )
-		? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
-		: '';
-	$height       = ! empty( $attributes['height'] )
-		? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
-		: '';
-	if ( ! $height && ! $width && ! $aspect_ratio ) {
-		$wrapper_attributes = get_block_wrapper_attributes();
-	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
-	}
+	$wrapper_attributes = get_block_wrapper_attributes();
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }
 

package/src/post-terms/edit.js

@@ -65,7 +65,6 @@ export default function PostTermsEdit( {
 		<>
 			<InspectorControls group="advanced">
 				<TextControl
-					__next40pxDefaultSize
 					autoComplete="off"
 					label={ __( 'Separator' ) }
 					value={ separator || '' }

package/src/post-title/edit.js

@@ -203,7 +203,6 @@ export default function PostTitleEdit( {
 										}
 									>
 										<TextControl
-											__next40pxDefaultSize
 											label={ __( 'Link relation' ) }
 											help={ createInterpolateElement(
 												__(

package/src/pullquote/README.md

@@ -16,7 +16,6 @@ _Defined via the [`attributes`](https://developer.wordpress.org/block-editor/ref
 |-----------|------|---------|-------------|
 | `value` | `rich-text` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `p`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
 | `citation` | `rich-text` | — | [Source](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `rich-text`. [Selector](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#value-source): `cite`. [Role](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-attributes/#role): `content` |
-| `textAlign` | `string` | — | — |
 
 ## Supports
 
@@ -39,6 +38,7 @@ _Defined via the [`supports`](https://developer.wordpress.org/block-editor/refer
 - [`typography`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography):
   - [`fontSize`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-fontsize): `true`
   - [`lineHeight`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-lineheight): `true`
+  - [`textAlign`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#typography-textalign): `true`
 - [`interactivity`](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#interactivity):
   - `clientNavigation`: `true`
 

package/src/pullquote/block.json

@@ -18,9 +18,6 @@
 			"source": "rich-text",
 			"selector": "cite",
 			"role": "content"
-		},
-		"textAlign": {
-			"type": "string"
 		}
 	},
 	"supports": {
@@ -52,6 +49,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"textAlign": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,