@wordpress/block-library 6.0.23 → 7.0.0

package/src/social-links/edit.js

@@ -60,6 +60,7 @@ export function SocialLinksEdit( props ) {
 		iconBackgroundColorValue,
 		iconColorValue,
 		openInNewTab,
+		showLabels,
 		size,
 		layout,
 	} = attributes;
@@ -80,7 +81,6 @@ export function SocialLinksEdit( props ) {
 
 	const SocialPlaceholder = (
 		<li className="wp-block-social-links__social-placeholder">
-			<div className="wp-social-link"></div>
 			<div className="wp-block-social-links__social-placeholder-icons">
 				<div className="wp-social-link wp-social-link-twitter"></div>
 				<div className="wp-social-link wp-social-link-facebook"></div>
@@ -116,6 +116,34 @@ export function SocialLinksEdit( props ) {
 		position: 'bottom right',
 	};
 
+	const colorSettings = [
+		{
+			// Use custom attribute as fallback to prevent loss of named color selection when
+			// switching themes to a new theme that does not have a matching named color.
+			value: iconColor.color || iconColorValue,
+			onChange: ( colorValue ) => {
+				setIconColor( colorValue );
+				setAttributes( { iconColorValue: colorValue } );
+			},
+			label: __( 'Icon color' ),
+		},
+	];
+
+	if ( ! logosOnly ) {
+		colorSettings.push( {
+			// Use custom attribute as fallback to prevent loss of named color selection when
+			// switching themes to a new theme that does not have a matching named color.
+			value: iconBackgroundColor.color || iconBackgroundColorValue,
+			onChange: ( colorValue ) => {
+				setIconBackgroundColor( colorValue );
+				setAttributes( {
+					iconBackgroundColorValue: colorValue,
+				} );
+			},
+			label: __( 'Icon background' ),
+		} );
+	}
+
 	return (
 		<Fragment>
 			<BlockControls group="other">
@@ -164,37 +192,19 @@ export function SocialLinksEdit( props ) {
 							setAttributes( { openInNewTab: ! openInNewTab } )
 						}
 					/>
+					<ToggleControl
+						label={ __( 'Show labels' ) }
+						checked={ showLabels }
+						onChange={ () =>
+							setAttributes( { showLabels: ! showLabels } )
+						}
+					/>
 				</PanelBody>
 				<PanelColorSettings
 					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
-					colorSettings={ [
-						{
-							// Use custom attribute as fallback to prevent loss of named color selection when
-							// switching themes to a new theme that does not have a matching named color.
-							value: iconColor.color || iconColorValue,
-							onChange: ( colorValue ) => {
-								setIconColor( colorValue );
-								setAttributes( { iconColorValue: colorValue } );
-							},
-							label: __( 'Icon color' ),
-						},
-						! logosOnly && {
-							// Use custom attribute as fallback to prevent loss of named color selection when
-							// switching themes to a new theme that does not have a matching named color.
-							value:
-								iconBackgroundColor.color ||
-								iconBackgroundColorValue,
-							onChange: ( colorValue ) => {
-								setIconBackgroundColor( colorValue );
-								setAttributes( {
-									iconBackgroundColorValue: colorValue,
-								} );
-							},
-							label: __( 'Icon background color' ),
-						},
-					] }
+					colorSettings={ colorSettings }
 				/>
 				{ ! logosOnly && (
 					<ContrastChecker

package/src/social-links/editor.scss

@@ -4,6 +4,13 @@
 		display: inline-block;
 		margin-left: $grid-unit-10;
 	}
+
+	// Unset background colors that can be inherited from Global Styles.
+	// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
+	// The rule can be removed if editor styles get lowered in specificity.
+	&.wp-block-social-links {
+		background: none;
+	}
 }
 
 // Prevent toolbar from jumping when selecting / hovering a link.

package/src/social-links/save.js

@@ -10,10 +10,16 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
-		attributes: { iconBackgroundColorValue, iconColorValue, size },
+		attributes: {
+			iconBackgroundColorValue,
+			iconColorValue,
+			showLabels,
+			size,
+		},
 	} = props;
 
 	const className = classNames( size, {
+		'has-visible-labels': showLabels,
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
 	} );

package/src/social-links/style.scss

@@ -6,6 +6,9 @@
 	// Some themes give all <ul> default margin instead of padding.
 	margin-left: 0;
 
+	// Unset background colors that can be inherited from Global Styles.
+	background: none;
+
 	// Some themes add underlines, false underlines (via shadows), and borders to <a>.
 	.wp-social-link a,
 	.wp-social-link a:hover {
@@ -25,6 +28,12 @@
 			width: 1em;
 			height: 1em;
 		}
+
+		span:not(.screen-reader-text) {
+			margin-left: 0.5em;
+			margin-right: 0.5em;
+			font-size: 0.65em;
+		}
 	}
 
 	// Icon sizes.
@@ -71,7 +80,8 @@
 	height: auto;
 
 	a {
-		display: block;
+		align-items: center;
+		display: flex;
 		line-height: 0;
 		transition: transform 0.1s ease;
 	}

package/src/spacer/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/spacer",
 	"title": "Spacer",
@@ -7,11 +8,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;