@wordpress/block-library 6.0.20 → 6.0.26

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

@@ -1,22 +1,15 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelBody,
 	__experimentalUnitControl as UnitControl,
-	Flex,
-	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -38,6 +31,8 @@ const SCALE_OPTIONS = (
 	</>
 );
 
+const DEFAULT_SCALE = 'cover';
+
 const scaleHelp = {
 	cover: __(
 		'Image is scaled and cropped to fill the entire space without being distorted.'
@@ -51,6 +46,7 @@ const scaleHelp = {
 };
 
 const DimensionControls = ( {
+	clientId,
 	attributes: { width, height, scale },
 	setAttributes,
 } ) => {
@@ -72,53 +68,82 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex
-				justify="space-between"
-				className={ classNames(
-					'block-library-post-featured-image-dimension-controls',
-					{ 'scale-control-is-visible': !! height }
-				) }
+		<InspectorControls __experimentalGroup="dimensions">
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! height }
+				label={ __( 'Height' ) }
+				onDeselect={ () => setAttributes( { height: undefined } ) }
+				resetAllFilter={ () => ( {
+					height: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<UnitControl
+					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={ true }
+				panelId={ clientId }
 			>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Height' ) }
-						labelPosition="top"
-						value={ height || '' }
-						onChange={ ( nextHeight ) => {
-							onDimensionChange( 'height', nextHeight );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="top"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							onDimensionChange( 'width', nextWidth );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-			</Flex>
+				<UnitControl
+					label={ __( 'Width' ) }
+					labelPosition="top"
+					value={ width || '' }
+					min={ 0 }
+					onChange={ ( nextWidth ) =>
+						onDimensionChange( 'width', nextWidth )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
 			{ !! height && (
-				<ToggleGroupControl
+				<ToolsPanelItem
+					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
-					value={ scale }
-					help={ scaleHelp[ scale ] }
-					onChange={ ( value ) => {
+					onDeselect={ () =>
 						setAttributes( {
-							scale: value,
-						} );
-					} }
-					isBlock
+							scale: DEFAULT_SCALE,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						scale: DEFAULT_SCALE,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
-					{ SCALE_OPTIONS }
-				</ToggleGroupControl>
+					<ToggleGroupControl
+						label={ scaleLabel }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						{ SCALE_OPTIONS }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</InspectorControls>
 	);
 };
 

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

@@ -46,6 +46,7 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
@@ -136,11 +137,12 @@ function PostFeaturedImageDisplay( {
 
 	return (
 		<>
+			<DimensionControls
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
 			<InspectorControls>
-				<DimensionControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ sprintf(

package/src/post-featured-image/editor.scss

@@ -128,11 +128,3 @@ div[data-type="core/post-featured-image"] {
 		display: block;
 	}
 }
-
-.block-library-post-featured-image-dimension-controls {
-	margin-bottom: $grid-unit-10;
-
-	&.scale-control-is-visible {
-		margin-bottom: $grid-unit-20;
-	}
-}

package/src/post-template/style.scss

@@ -11,6 +11,11 @@
 	list-style: none;
 	padding: 0;
 
+	// Unset background colors that can be inherited from Global Styles with extra specificity.
+	&.wp-block-post-template {
+		background: none;
+	}
+
 	&.is-flex-container {
 		flex-direction: row;
 		display: flex;

package/src/search/index.php

@@ -43,16 +43,18 @@ function render_block_core_search( $attributes ) {
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
+	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
+
 	$label_markup = sprintf(
 		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		$input_id,
-		empty( $attributes['label'] ) ? __( 'Search' ) : esc_html( $attributes['label'] )
+		esc_attr( $input_id ),
+		$label_inner_html
 	);
 	if ( $show_label && ! empty( $attributes['label'] ) ) {
 		$label_markup = sprintf(
 			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
 			$input_id,
-			esc_html( $attributes['label'] )
+			$label_inner_html
 		);
 	}
 
@@ -77,7 +79,7 @@ function render_block_core_search( $attributes ) {
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
-				$button_internal_markup = esc_html( $attributes['buttonText'] );
+				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
 			$button_classes        .= ' has-icon';

package/src/site-logo/edit.js

@@ -358,7 +358,7 @@ export default function LogoEdit( {
 	setAttributes,
 	isSelected,
 } ) {
-	const { className: styleClass, width, shouldSyncIcon } = attributes;
+	const { width, shouldSyncIcon } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
@@ -406,39 +406,8 @@ export default function LogoEdit( {
 		};
 	}, [] );
 
-	const { getGlobalBlockCount } = useSelect( blockEditorStore );
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	useEffect( () => {
-		// Cleanup function to discard unsaved changes to the icon and logo when
-		// the block is removed.
-		return () => {
-			// Do nothing if the block is being rendered in the styles preview or the
-			// block inserter.
-			if (
-				styleClass?.includes(
-					'block-editor-block-types-list__site-logo-example'
-				) ||
-				styleClass?.includes(
-					'block-editor-block-styles__block-preview-container'
-				)
-			) {
-				return;
-			}
-
-			const logoBlockCount = getGlobalBlockCount( 'core/site-logo' );
-
-			// Only discard unsaved changes if we are removing the last Site Logo block
-			// on the page.
-			if ( logoBlockCount === 0 ) {
-				editEntityRecord( 'root', 'site', undefined, {
-					site_logo: undefined,
-					site_icon: undefined,
-				} );
-			}
-		};
-	}, [] );
-
 	const setLogo = ( newValue, shouldForceSync = false ) => {
 		// `shouldForceSync` is used to force syncing when the attribute
 		// may not have updated yet.

package/src/site-logo/index.php

@@ -14,7 +14,7 @@
  */
 function render_block_core_site_logo( $attributes ) {
 	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
-		if ( empty( $attributes['width'] ) || empty( $image ) ) {
+		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}
 		$height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] );

package/src/site-title/index.php

@@ -35,7 +35,6 @@ function render_block_core_site_title( $attributes ) {
 		);
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			$link_attrs[] = 'target="_blank"';
-			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
 		}
 		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), $site_title );
 	}

package/src/social-links/deprecated.js

@@ -49,65 +49,6 @@ const migrateWithLayout = ( attributes ) => {
 
 // Social Links block deprecations.
 const deprecated = [
-	// Implement `flex` layout.
-	{
-		attributes: {
-			iconColor: {
-				type: 'string',
-			},
-			customIconColor: {
-				type: 'string',
-			},
-			iconColorValue: {
-				type: 'string',
-			},
-			iconBackgroundColor: {
-				type: 'string',
-			},
-			customIconBackgroundColor: {
-				type: 'string',
-			},
-			iconBackgroundColorValue: {
-				type: 'string',
-			},
-			openInNewTab: {
-				type: 'boolean',
-				default: false,
-			},
-			size: {
-				type: 'string',
-			},
-		},
-		supports: {
-			align: [ 'left', 'center', 'right' ],
-			anchor: true,
-			__experimentalExposeControlsToChildren: true,
-		},
-		isEligible: ( { layout } ) => ! layout,
-		migrate: migrateWithLayout,
-		save( props ) {
-			const {
-				attributes: {
-					iconBackgroundColorValue,
-					iconColorValue,
-					itemsJustification,
-					size,
-				},
-			} = props;
-
-			const className = classNames( size, {
-				'has-icon-color': iconColorValue,
-				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
-			} );
-
-			return (
-				<ul { ...useBlockProps.save( { className } ) }>
-					<InnerBlocks.Content />
-				</ul>
-			);
-		},
-	},
 	// V1. Remove CSS variable use for colors.
 	{
 		attributes: {

package/src/social-links/edit.js

@@ -192,7 +192,7 @@ export function SocialLinksEdit( props ) {
 									iconBackgroundColorValue: colorValue,
 								} );
 							},
-							label: __( 'Icon background color' ),
+							label: __( 'Icon background' ),
 						},
 					] }
 				/>

package/src/spacer/block.json

@@ -7,11 +7,11 @@
 	"textdomain": "default",
 	"attributes": {
 		"height": {
-			"type": "number",
-			"default": 100
+			"type": "string",
+			"default": "100px"
 		},
 		"width": {
-			"type": "number"
+			"type": "string"
 		}
 	},
 	"usesContext": [ "orientation" ],

package/src/spacer/controls.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
+import {
+	BaseControl,
+	PanelBody,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { MAX_SPACER_SIZE } from './edit';
+
+function DimensionInput( { label, onChange, isResizing, value = '' } ) {
+	const [ temporaryInput, setTemporaryInput ] = useState( null );
+
+	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
+
+	// In most contexts the spacer size cannot meaningfully be set to a
+	// percentage, since this is relative to the parent container. This
+	// unit is disabled from the UI.
+	const availableUnitSettings = (
+		useSetting( 'spacing.units' ) || undefined
+	)?.filter( ( availableUnit ) => availableUnit !== '%' );
+
+	const units = useCustomUnits( {
+		availableUnits: availableUnitSettings || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: '100', em: '10', rem: '10', vw: '10', vh: '25' },
+	} );
+
+	const handleOnChange = ( unprocessedValue ) => {
+		setTemporaryInput( null );
+		onChange( unprocessedValue );
+	};
+
+	const handleOnBlur = () => {
+		if ( temporaryInput !== null ) {
+			setTemporaryInput( null );
+		}
+	};
+
+	const inputValue = temporaryInput !== null ? temporaryInput : value;
+
+	return (
+		<BaseControl label={ label } id={ inputId }>
+			<UnitControl
+				id={ inputId }
+				isResetValueOnUnitChange
+				min={ 0 }
+				max={ MAX_SPACER_SIZE }
+				onBlur={ handleOnBlur }
+				onChange={ handleOnChange }
+				style={ { maxWidth: 80 } }
+				value={ inputValue }
+				units={ units }
+				// Force the unit to update to `px` when the Spacer is being resized.
+				unit={ isResizing ? 'px' : undefined }
+			/>
+		</BaseControl>
+	);
+}
+
+export default function SpacerControls( {
+	setAttributes,
+	orientation,
+	height,
+	width,
+	isResizing,
+} ) {
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Spacer settings' ) }>
+				{ orientation === 'horizontal' && (
+					<DimensionInput
+						label={ __( 'Width' ) }
+						value={ width }
+						onChange={ ( nextWidth ) =>
+							setAttributes( { width: nextWidth } )
+						}
+						isResizing={ isResizing }
+					/>
+				) }
+				{ orientation !== 'horizontal' && (
+					<DimensionInput
+						label={ __( 'Height' ) }
+						value={ height }
+						onChange={ ( nextHeight ) =>
+							setAttributes( { height: nextHeight } )
+						}
+						isResizing={ isResizing }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+}

package/src/spacer/controls.native.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	UnitControl,
+	getValueAndUnit,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
+import { useCallback } from '@wordpress/element';
+import { useSetting } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const DEFAULT_VALUES = { px: '100', em: '10', rem: '10', vw: '10', vh: '25' };
+
+function Controls( { attributes, context, setAttributes } ) {
+	const { orientation } = context;
+	const label = orientation !== 'horizontal' ? __( 'Height' ) : __( 'Width' );
+
+	const { height, width } = attributes;
+	const { valueToConvert, valueUnit: unit } =
+		getValueAndUnit( orientation !== 'horizontal' ? height : width ) || {};
+	const value = Number( valueToConvert );
+
+	const setNewDimensions = ( nextValue, nextUnit ) => {
+		const valueWithUnit = `${ nextValue }${ nextUnit }`;
+		if ( orientation === 'horizontal' ) {
+			setAttributes( { width: valueWithUnit } );
+		} else {
+			setAttributes( { height: valueWithUnit } );
+		}
+	};
+
+	const handleChange = useCallback(
+		( nextValue ) => {
+			setNewDimensions( nextValue, unit );
+		},
+		[ height, width ]
+	);
+
+	const handleUnitChange = useCallback(
+		( nextUnit ) => {
+			setNewDimensions( value, nextUnit );
+		},
+		[ height, width ]
+	);
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: DEFAULT_VALUES,
+	} );
+
+	return (
+		<>
+			<PanelBody title={ __( 'Dimensions' ) }>
+				<UnitControl
+					label={ label }
+					min={ 1 }
+					value={ value }
+					onChange={ handleChange }
+					onUnitChange={ handleUnitChange }
+					units={ units }
+					unit={ unit }
+					style={ styles.rangeCellContainer }
+				/>
+			</PanelBody>
+		</>
+	);
+}
+
+export default Controls;

package/src/spacer/deprecated.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		attributes: {
+			height: {
+				type: 'number',
+				default: 100,
+			},
+			width: {
+				type: 'number',
+			},
+		},
+		migrate( attributes ) {
+			const { height, width } = attributes;
+			return {
+				...attributes,
+				width: width !== undefined ? `${ width }px` : undefined,
+				height: height !== undefined ? `${ height }px` : undefined,
+			};
+		},
+		save( { attributes } ) {
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						style: {
+							height: attributes.height,
+							width: attributes.width,
+						},
+						'aria-hidden': true,
+					} ) }
+				/>
+			);
+		},
+	},
+];
+
+export default deprecated;