@wordpress/block-library 7.1.1 → 7.3.1

package/src/separator/edit.js

@@ -7,30 +7,52 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { HorizontalRule } from '@wordpress/components';
-import { withColors, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getColorClassName,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import SeparatorSettings from './separator-settings';
+import useDeprecatedOpacity from './use-deprecated-opacity';
+
+export default function SeparatorEdit( { attributes, setAttributes } ) {
+	const { backgroundColor, opacity, style } = attributes;
+	const colorProps = useColorProps( attributes );
+	const currentColor = colorProps?.style?.backgroundColor;
+	const hasCustomColor = !! style?.color?.background;
+
+	useDeprecatedOpacity( opacity, currentColor, setAttributes );
+
+	// The dots styles uses text for the dots, to change those dots color is
+	// using color, not backgroundColor.
+	const colorClass = getColorClassName( 'color', backgroundColor );
+
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || currentColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.classname
+	);
+
+	const styles = {
+		color: currentColor,
+		backgroundColor: currentColor,
+	};
 
-function SeparatorEdit( { color, setColor, className } ) {
 	return (
 		<>
 			<HorizontalRule
 				{ ...useBlockProps( {
-					className: classnames( className, {
-						'has-background': color.color,
-						[ color.class ]: color.class,
-					} ),
-					style: {
-						backgroundColor: color.color,
-						color: color.color,
-					},
+					className,
+					style: hasCustomColor ? styles : undefined,
 				} ) }
 			/>
-			<SeparatorSettings color={ color } setColor={ setColor } />
 		</>
 	);
 }
-
-export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );

package/src/separator/editor.scss

@@ -2,4 +2,10 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
+
+	// This is also set in style.scss, but needs a higher specificity in editor
+	// due to the way that color block supports adds additional background color styles.
+	&.wp-block-separator.is-style-dots {
+		background: none !important;
+	}
 }

package/src/separator/index.js

@@ -10,6 +10,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -26,4 +27,5 @@ export const settings = {
 	transforms,
 	edit,
 	save,
+	deprecated,
 };

package/src/separator/save.js

@@ -6,28 +6,36 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function separatorSave( { attributes } ) {
-	const { color, customColor } = attributes;
-
+	const { backgroundColor, style, opacity } = attributes;
+	const customColor = style?.color?.background;
+	const colorProps = getColorClassesAndStyles( attributes );
 	// The hr support changing color using border-color, since border-color
 	// is not yet supported in the color palette, we use background-color.
-	const backgroundClass = getColorClassName( 'background-color', color );
+
 	// The dots styles uses text for the dots, to change those dots color is
 	// using color, not backgroundColor.
-	const colorClass = getColorClassName( 'color', color );
+	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames( {
-		'has-text-color has-background': color || customColor,
-		[ backgroundClass ]: backgroundClass,
-		[ colorClass ]: colorClass,
-	} );
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || customColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.className
+	);
 
-	const style = {
-		backgroundColor: backgroundClass ? undefined : customColor,
+	const styles = {
+		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-
-	return <hr { ...useBlockProps.save( { className, style } ) } />;
+	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
 }

package/src/separator/test/edit.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import SeparatorEdit from '../edit';
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: jest.fn(),
+} ) );
+
+const defaultAttributes = {
+	backgroundColor: undefined,
+	opacity: 'alpha-channel',
+	style: {},
+	className: '',
+};
+const defaultProps = {
+	attributes: defaultAttributes,
+	setAttributes: jest.fn(),
+};
+
+describe( 'Separator block edit method', () => {
+	beforeEach( () => {
+		useBlockProps.mockClear();
+	} );
+
+	test( 'should add the has-alpha-channel-opacity class and no inline styles by default', () => {
+		render( <SeparatorEdit { ...defaultProps } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add has-css-opacity class and no inline styles for deprecated block with no color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: { ...defaultAttributes, opacity: 'css' },
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-css-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add inline background style for block without dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			// For backwards compatibility the has-text-color class is also added even though it is only needed for
+			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add inline color style for block with dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				className: 'is-style-dots',
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add color class when color from palette specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				backgroundColor: 'banana',
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		// Note that only the manual addition of the text color class can be checked as the
+		// background color classes are added by useBlockProps which has to be mocked.
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className:
+				'has-text-color has-banana-color has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+} );

package/src/separator/theme.scss

@@ -1,9 +1,15 @@
+// Import styles for rendering the static content of deprecated block versions.
+@import "./deprecated.scss";
+
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid currentColor;
 	margin-left: auto;
 	margin-right: auto;
-	opacity: 0.4;
+
+	&.has-alpha-channel-opacity {
+		opacity: initial;
+	}
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {

package/src/separator/use-deprecated-opacity.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
+export default function useDeprecatedOpacity(
+	opacity,
+	currentColor,
+	setAttributes
+) {
+	const [
+		deprecatedOpacityWithNoColor,
+		setDeprecatedOpacityWithNoColor,
+	] = useState( false );
+	const previousColor = usePrevious( currentColor );
+
+	// A separator with no color set will always have previousColor set to undefined,
+	// and we need to differentiate these from those with color set that will return
+	// previousColor as undefined on the first render.
+	useEffect( () => {
+		if ( opacity === 'css' && ! currentColor && ! previousColor ) {
+			setDeprecatedOpacityWithNoColor( true );
+		}
+	}, [ currentColor, previousColor, opacity ] );
+
+	// For deprecated blocks, that have a default 0.4 css opacity set, we
+	// need to remove this if the current color is changed, or a color is added.
+	// In these instances the opacity attribute is set back to the default of
+	// alpha-channel which allows a new custom opacity to be set via the color picker.
+	useEffect( () => {
+		if (
+			opacity === 'css' &&
+			( ( deprecatedOpacityWithNoColor && currentColor ) ||
+				( previousColor && currentColor !== previousColor ) )
+		) {
+			setAttributes( { opacity: 'alpha-channel' } );
+			setDeprecatedOpacityWithNoColor( false );
+		}
+	}, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] );
+}

package/src/site-logo/block.json

@@ -34,7 +34,7 @@
 		"align": true,
 		"alignWide": false,
 		"color": {
-			"__experimentalDuotone": "img",
+			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		}

package/src/site-logo/edit.js

@@ -417,8 +417,9 @@ export default function LogoEdit( {
 	};
 
 	const setIcon = ( newValue ) =>
+		// The new value needs to be `null` to reset the Site Icon.
 		editEntityRecord( 'root', 'site', undefined, {
-			site_icon: newValue,
+			site_icon: newValue ?? null,
 		} );
 
 	let alt = null;

package/src/site-logo/editor.scss

@@ -1,4 +1,5 @@
-.wp-block[data-align="center"] > .wp-block-site-logo {
+.wp-block[data-align="center"] > .wp-block-site-logo,
+.wp-block-site-logo.aligncenter > div {
 	display: table;
 	margin-left: auto;
 	margin-right: auto;
@@ -45,6 +46,7 @@
 
 	// Style the placeholder.
 	.components-placeholder {
+		display: flex;
 		justify-content: center;
 		align-items: center;
 		box-shadow: none;

package/src/site-logo/index.php

@@ -44,10 +44,6 @@ function render_block_core_site_logo( $attributes ) {
 	}
 
 	$classnames = array();
-	if ( ! empty( $attributes['className'] ) ) {
-		$classnames[] = $attributes['className'];
-	}
-
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
 	}

package/src/social-link/index.php

@@ -21,7 +21,6 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
 	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
-	$class_name  = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;
 
 	// Don't render a link if there is no URL set.
 	if ( ! $url ) {
@@ -36,7 +35,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service . $class_name,
+			'class' => 'wp-social-link wp-social-link-' . $service,
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);

package/src/social-links/block.json

@@ -51,12 +51,13 @@
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
+			"allowVerticalAlignment": false,
 			"default": {
 				"type": "flex"
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"margin": [ "top", "bottom" ],
 			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {

package/src/social-links/edit.js

@@ -7,7 +7,7 @@ import classNames from 'classnames';
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { Fragment, useEffect } from '@wordpress/element';
+import { Fragment, useEffect, useRef } from '@wordpress/element';
 import {
 	BlockControls,
 	useInnerBlocksProps,
@@ -58,6 +58,7 @@ export function SocialLinksEdit( props ) {
 
 	const {
 		iconBackgroundColorValue,
+		customIconBackgroundColor,
 		iconColorValue,
 		openInNewTab,
 		showLabels,
@@ -66,18 +67,27 @@ export function SocialLinksEdit( props ) {
 	} = attributes;
 	const usedLayout = layout || getDefaultBlockLayout( name );
 
-	// Remove icon background color if logos only style selected.
-	const logosOnly =
-		attributes.className?.indexOf( 'is-style-logos-only' ) >= 0;
+	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
+
+	// Remove icon background color when logos only style is selected or
+	// restore it when any other style is selected.
+	const backgroundBackup = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
+			backgroundBackup.current = {
+				iconBackgroundColor,
+				iconBackgroundColorValue,
+				customIconBackgroundColor,
+			};
 			setAttributes( {
 				iconBackgroundColor: undefined,
 				customIconBackgroundColor: undefined,
 				iconBackgroundColorValue: undefined,
 			} );
+		} else {
+			setAttributes( { ...backgroundBackup.current } );
 		}
-	}, [ logosOnly, setAttributes ] );
+	}, [ logosOnly ] );
 
 	const SocialPlaceholder = (
 		<li className="wp-block-social-links__social-placeholder">

package/src/spacer/controls.js

@@ -8,18 +8,16 @@ import {
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { MAX_SPACER_SIZE } from './edit';
+import { MIN_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
@@ -41,32 +39,28 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
-		setTemporaryInput( null );
 		onChange( unprocessedValue );
 	};
 
-	const handleOnBlur = () => {
-		if ( temporaryInput !== null ) {
-			setTemporaryInput( null );
-		}
-	};
-
-	const inputValue = temporaryInput !== null ? temporaryInput : value;
+	// Force the unit to update to `px` when the Spacer is being resized.
+	const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue(
+		value
+	);
+	const computedValue = [
+		parsedQuantity,
+		isResizing ? 'px' : parsedUnit,
+	].join( '' );
 
 	return (
 		<BaseControl label={ label } id={ inputId }>
 			<UnitControl
 				id={ inputId }
 				isResetValueOnUnitChange
-				min={ 0 }
-				max={ MAX_SPACER_SIZE }
-				onBlur={ handleOnBlur }
+				min={ MIN_SPACER_SIZE }
 				onChange={ handleOnChange }
 				style={ { maxWidth: 80 } }
-				value={ inputValue }
+				value={ computedValue }
 				units={ units }
-				// Force the unit to update to `px` when the Spacer is being resized.
-				unit={ isResizing ? 'px' : undefined }
 			/>
 		</BaseControl>
 	);

package/src/spacer/controls.native.js

@@ -14,6 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import { MIN_SPACER_SIZE } from './edit.js';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
@@ -66,7 +67,7 @@ function Controls( { attributes, context, setAttributes } ) {
 			<PanelBody title={ __( 'Dimensions' ) }>
 				<UnitControl
 					label={ label }
-					min={ 1 }
+					min={ MIN_SPACER_SIZE }
 					value={ value }
 					onChange={ handleChange }
 					onUnitChange={ handleUnitChange }

package/src/spacer/edit.js

@@ -16,8 +16,7 @@ import { View } from '@wordpress/primitives';
  */
 import SpacerControls from './controls';
 
-export const MIN_SPACER_SIZE = 1;
-export const MAX_SPACER_SIZE = 500;
+export const MIN_SPACER_SIZE = 0;
 
 const ResizableSpacer = ( {
 	orientation,
@@ -58,10 +57,7 @@ const ResizableSpacer = ( {
 				}
 			} }
 			onResizeStop={ ( _event, _direction, elt ) => {
-				const nextVal = Math.min(
-					MAX_SPACER_SIZE,
-					getCurrentSize( elt )
-				);
+				const nextVal = getCurrentSize( elt );
 				onResizeStop( `${ nextVal }px` );
 				setIsResizing( false );
 			} }
@@ -147,6 +143,7 @@ const SpacerEdit = ( {
 		return (
 			<>
 				<ResizableSpacer
+					minHeight={ MIN_SPACER_SIZE }
 					enable={ {
 						top: false,
 						right: false,

package/src/spacer/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spacer block decrements height 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"99px\\"} -->
+<div style=\\"height:99px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block increments height 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"101px\\"} -->
+<div style=\\"height:101px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block inserts block 1`] = `
+"<!-- wp:spacer -->
+<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block updates height to 25vh 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"25vh\\"} -->
+<div style=\\"height:25vh\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;
+
+exports[`Spacer block updates height to 50px 1`] = `
+"<!-- wp:spacer {\\"height\\":\\"50px\\"} -->
+<div style=\\"height:50px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
+<!-- /wp:spacer -->"
+`;