@wordpress/block-library 7.1.0 → 7.3.0

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 -->"
+`;

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

@@ -0,0 +1,180 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getEditorHtml,
+	initializeEditor,
+	waitFor,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe( 'Spacer block', () => {
+	it( 'inserts block', async () => {
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+		} = await initializeEditor();
+
+		fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
+
+		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 50px', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '50' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'updates height to 25vh', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const {
+			getByA11yLabel,
+			getByDisplayValue,
+			getByTestId,
+			getByText,
+		} = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Set vh unit
+		fireEvent.press( getByText( 'px' ) );
+		fireEvent.press( getByText( 'Viewport height (vh)' ) );
+
+		// Update height attribute
+		fireEvent.press( getByText( '100' ) );
+		const heightTextInput = getByDisplayValue( '100' );
+		fireEvent.changeText( heightTextInput, '25' );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'increments height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'increment' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'decrements height', async () => {
+		const initialHtml = `<!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer -->`;
+		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+			initialHtml,
+		} );
+
+		// Select Spacer block
+		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		fireEvent.press( spacerBlock );
+
+		// Open block settings
+		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		await waitFor(
+			() => getByTestId( 'block-settings-modal' ).props.isVisible
+		);
+
+		// Increment height
+		fireEvent(
+			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			'accessibilityAction',
+			{
+				nativeEvent: { actionName: 'decrement' },
+			}
+		);
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/style.scss

@@ -1,4 +1,5 @@
 @import "./archives/style.scss";
+@import "./avatar/style.scss";
 @import "./audio/style.scss";
 @import "./button/style.scss";
 @import "./buttons/style.scss";

package/src/table/deprecated.js

@@ -244,7 +244,11 @@ const deprecated = [
 			);
 		},
 		isEligible: ( attributes ) => {
-			return attributes.backgroundColor && ! attributes.style;
+			return (
+				attributes.backgroundColor &&
+				attributes.backgroundColor in oldColors &&
+				! attributes.style
+			);
 		},
 
 		// This version is the first to introduce the style attribute to the

package/src/tag-cloud/block.json

@@ -20,6 +20,14 @@
 		"showTagCounts": {
 			"type": "boolean",
 			"default": false
+		},
+		"smallestFontSize": {
+			"type": "string",
+			"default": "8pt" 
+		},
+		"largestFontSize": {
+			"type": "string",
+			"default": "22pt"
 		}
 	},
 	"styles": [

package/src/tag-cloud/edit.js

@@ -7,14 +7,23 @@ import { map, filter } from 'lodash';
  * WordPress dependencies
  */
 import {
+	Flex,
+	FlexItem,
 	PanelBody,
 	ToggleControl,
 	SelectControl,
 	RangeControl,
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	useSetting,
+} from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -32,8 +41,26 @@ const MIN_TAGS = 1;
  */
 const MAX_TAGS = 100;
 
+const MIN_FONT_SIZE = 0.1;
+const MAX_FONT_SIZE = 100;
+
 function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
-	const { taxonomy, showTagCounts, numberOfTags } = attributes;
+	const {
+		taxonomy,
+		showTagCounts,
+		numberOfTags,
+		smallestFontSize,
+		largestFontSize,
+	} = attributes;
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+		],
+	} );
 
 	const getTaxonomyOptions = () => {
 		const selectOption = {
@@ -54,6 +81,33 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		return [ selectOption, ...taxonomyOptions ];
 	};
 
+	const onFontSizeChange = ( fontSizeLabel, newValue ) => {
+		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+		const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue(
+			newValue
+		);
+		if ( ! Number.isFinite( quantity ) ) {
+			return;
+		}
+		const updateObj = { [ fontSizeLabel ]: newValue };
+		// We need to keep in sync the `unit` changes to both `smallestFontSize`
+		// and `largestFontSize` attributes.
+		Object.entries( {
+			smallestFontSize,
+			largestFontSize,
+		} ).forEach( ( [ attribute, currentValue ] ) => {
+			const [
+				currentQuantity,
+				currentUnit,
+			] = parseQuantityAndUnitFromRawValue( currentValue );
+			// Only add an update if the other font size attribute has a different unit.
+			if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) {
+				updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`;
+			}
+		} );
+		setAttributes( updateObj );
+	};
+
 	const inspectorControls = (
 		<InspectorControls>
 			<PanelBody title={ __( 'Tag Cloud settings' ) }>
@@ -82,6 +136,32 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 					max={ MAX_TAGS }
 					required
 				/>
+				<Flex>
+					<FlexItem isBlock>
+						<UnitControl
+							label={ __( 'Smallest size' ) }
+							value={ smallestFontSize }
+							onChange={ ( value ) => {
+								onFontSizeChange( 'smallestFontSize', value );
+							} }
+							units={ units }
+							min={ MIN_FONT_SIZE }
+							max={ MAX_FONT_SIZE }
+						/>
+					</FlexItem>
+					<FlexItem isBlock>
+						<UnitControl
+							label={ __( 'Largest size' ) }
+							value={ largestFontSize }
+							onChange={ ( value ) => {
+								onFontSizeChange( 'largestFontSize', value );
+							} }
+							units={ units }
+							min={ MIN_FONT_SIZE }
+							max={ MAX_FONT_SIZE }
+						/>
+					</FlexItem>
+				</Flex>
 			</PanelBody>
 		</InspectorControls>
 	);

package/src/tag-cloud/index.php

@@ -13,11 +13,17 @@
  * @return string Returns the tag cloud for selected taxonomy.
  */
 function render_block_core_tag_cloud( $attributes ) {
+	$smallest_font_size = $attributes['smallestFontSize'];
+	$unit               = ( preg_match( '/^[0-9.]+(?P<unit>[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt' );
+
 	$args      = array(
 		'echo'       => false,
+		'unit'       => $unit,
 		'taxonomy'   => $attributes['taxonomy'],
 		'show_count' => $attributes['showTagCounts'],
 		'number'     => $attributes['numberOfTags'],
+		'smallest'   => floatVal( $attributes['smallestFontSize'] ),
+		'largest'    => floatVal( $attributes['largestFontSize'] ),
 	);
 	$tag_cloud = wp_tag_cloud( $args );
 

package/src/template-part/edit/utils/hooks.js

@@ -102,13 +102,18 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 	const { saveEntityRecord } = useDispatch( coreStore );
 
 	return async ( blocks = [], title = __( 'Untitled Template Part' ) ) => {
+		// Currently template parts only allow latin chars.
+		// Fallback slug will receive suffix by default.
+		const cleanSlug =
+			kebabCase( title ).replace( /[^\w-]+/g, '' ) || 'wp-custom-part';
+
 		// If we have `area` set from block attributes, means an exposed
 		// block variation was inserted. So add this prop to the template
 		// part entity on creation. Afterwards remove `area` value from
 		// block attributes.
 		const record = {
 			title,
-			slug: kebabCase( title ),
+			slug: cleanSlug,
 			content: serialize( blocks ),
 			// `area` is filterable on the server and defaults to `UNCATEGORIZED`
 			// if provided value is not allowed.

package/src/template-part/editor.scss

@@ -12,13 +12,3 @@
 		height: 70%;
 	}
 }
-
-.block-library-template-part__selection-content .block-editor-block-patterns-list {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-gap: $grid-unit-10;
-
-	.block-editor-block-patterns-list__list-item {
-		margin-bottom: 0;
-	}
-}