@wordpress/block-library 7.1.1 → 7.2.0

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';
 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/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/build/separator/separator-settings.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _element = require("@wordpress/element");
-
-var _i18n = require("@wordpress/i18n");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-/**
- * WordPress dependencies
- */
-const SeparatorSettings = _ref => {
-  let {
-    color,
-    setColor
-  } = _ref;
-  return (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_blockEditor.PanelColorSettings, {
-    __experimentalHasMultipleOrigins: true,
-    __experimentalIsRenderedInSidebar: true,
-    title: (0, _i18n.__)('Color'),
-    colorSettings: [{
-      value: color.color,
-      onChange: setColor,
-      label: (0, _i18n.__)('Color')
-    }]
-  }));
-};
-
-var _default = SeparatorSettings;
-exports.default = _default;
-//# sourceMappingURL=separator-settings.js.map

package/build/separator/separator-settings.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/separator/separator-settings.js"],"names":["SeparatorSettings","color","setColor","value","onChange","label"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,iBAAiB,GAAG;AAAA,MAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF;AAAA,SACzB,4BAAC,8BAAD,QACC,4BAAC,+BAAD;AACC,IAAA,gCAAgC,MADjC;AAEC,IAAA,iCAAiC,MAFlC;AAGC,IAAA,KAAK,EAAG,cAAI,OAAJ,CAHT;AAIC,IAAA,aAAa,EAAG,CACf;AACCC,MAAAA,KAAK,EAAEF,KAAK,CAACA,KADd;AAECG,MAAAA,QAAQ,EAAEF,QAFX;AAGCG,MAAAA,KAAK,EAAE,cAAI,OAAJ;AAHR,KADe;AAJjB,IADD,CADyB;AAAA,CAA1B;;eAiBeL,iB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';\n\nconst SeparatorSettings = ( { color, setColor } ) => (\n\t<InspectorControls>\n\t\t<PanelColorSettings\n\t\t\t__experimentalHasMultipleOrigins\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\ttitle={ __( 'Color' ) }\n\t\t\tcolorSettings={ [\n\t\t\t\t{\n\t\t\t\t\tvalue: color.color,\n\t\t\t\t\tonChange: setColor,\n\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t},\n\t\t\t] }\n\t\t></PanelColorSettings>\n\t</InspectorControls>\n);\n\nexport default SeparatorSettings;\n"]}

package/build-module/separator/separator-settings.js

@@ -1,27 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
-
-const SeparatorSettings = _ref => {
-  let {
-    color,
-    setColor
-  } = _ref;
-  return createElement(InspectorControls, null, createElement(PanelColorSettings, {
-    __experimentalHasMultipleOrigins: true,
-    __experimentalIsRenderedInSidebar: true,
-    title: __('Color'),
-    colorSettings: [{
-      value: color.color,
-      onChange: setColor,
-      label: __('Color')
-    }]
-  }));
-};
-
-export default SeparatorSettings;
-//# sourceMappingURL=separator-settings.js.map

package/build-module/separator/separator-settings.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/separator/separator-settings.js"],"names":["__","InspectorControls","PanelColorSettings","SeparatorSettings","color","setColor","value","onChange","label"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,yBAAtD;;AAEA,MAAMC,iBAAiB,GAAG;AAAA,MAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF;AAAA,SACzB,cAAC,iBAAD,QACC,cAAC,kBAAD;AACC,IAAA,gCAAgC,MADjC;AAEC,IAAA,iCAAiC,MAFlC;AAGC,IAAA,KAAK,EAAGL,EAAE,CAAE,OAAF,CAHX;AAIC,IAAA,aAAa,EAAG,CACf;AACCM,MAAAA,KAAK,EAAEF,KAAK,CAACA,KADd;AAECG,MAAAA,QAAQ,EAAEF,QAFX;AAGCG,MAAAA,KAAK,EAAER,EAAE,CAAE,OAAF;AAHV,KADe;AAJjB,IADD,CADyB;AAAA,CAA1B;;AAiBA,eAAeG,iBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';\n\nconst SeparatorSettings = ( { color, setColor } ) => (\n\t<InspectorControls>\n\t\t<PanelColorSettings\n\t\t\t__experimentalHasMultipleOrigins\n\t\t\t__experimentalIsRenderedInSidebar\n\t\t\ttitle={ __( 'Color' ) }\n\t\t\tcolorSettings={ [\n\t\t\t\t{\n\t\t\t\t\tvalue: color.color,\n\t\t\t\t\tonChange: setColor,\n\t\t\t\t\tlabel: __( 'Color' ),\n\t\t\t\t},\n\t\t\t] }\n\t\t></PanelColorSettings>\n\t</InspectorControls>\n);\n\nexport default SeparatorSettings;\n"]}

package/src/separator/separator-settings.js

@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
-
-const SeparatorSettings = ( { color, setColor } ) => (
-	<InspectorControls>
-		<PanelColorSettings
-			__experimentalHasMultipleOrigins
-			__experimentalIsRenderedInSidebar
-			title={ __( 'Color' ) }
-			colorSettings={ [
-				{
-					value: color.color,
-					onChange: setColor,
-					label: __( 'Color' ),
-				},
-			] }
-		></PanelColorSettings>
-	</InspectorControls>
-);
-
-export default SeparatorSettings;