@wordpress/block-editor 7.0.1 → 8.0.0

package/src/components/block-variation-picker/README.md

@@ -1,8 +1,12 @@
 # Block Variation Picker
 
-The `BlockVariationPicker` component allows to display for certain types of blocks their different variations, and to choose one of them.
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
 
-This component is currently used by the "Columns" block to display and choose the number and structure of columns. It is also used by the "Post Hierarchical Terms Block" block.
+The `BlockVariationPicker` component allows certain types of blocks to display their different variations, and to choose one of them. Variations provided are usually filtered by their inclusion of the `block` value in their `scope` attribute.
+
+This component is currently used by "Columns" and "Query Loop" blocks.
 
 ![Columns block variations](https://make.wordpress.org/core/files/2020/09/colums-block-variations.png)
 
@@ -18,33 +22,62 @@ This component is currently used by the "Columns" block to display and choose th
 Renders the variations of a block.
 
 ```jsx
-import { BlockVariationPicker } from '@wordpress/block-editor';
-
-const MyBlockVariationPicker = () => (
-	<BlockVariationPicker variations={ variations } />
-);
+import { useSelect } from '@wordpress/data';
+import {
+	__experimentalBlockVariationPicker as BlockVariationPicker,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+const MyBlockVariationPicker = ( { blockName } ) => {
+	const variations = useSelect(
+		( select ) => {
+			const { getBlockVariations } = select( blocksStore );
+			return getBlockVariations( blockName, 'block' );
+		},
+		[ blockName ]
+	);
+	return <BlockVariationPicker variations={ variations } />;
+};
 ```
 
 ### Props
 
-#### label
-
-The label of each variation of the block.
+#### `label`
 
 -   Type: `String`
+-   Required: No
+-   Default: `Choose variation`
 
-#### instructions
+The label of each variation of the block.
 
-The instructions to choose a block variation.
+#### `instructions`
 
 -   Type: `String`
+-   Required: No
+-   Default: `Select a variation to start with.`
+
+The instructions to choose a block variation.
 
-#### variations
+#### `variations`
 
--   Type: `Array`
+-   Type: `Array<WPBlockVariation>`
 
 The different variations of the block.
 
+#### `onSelect`
+
+-   Type: `Function`
+
+Callback called when a block variation is selected. It recieves the selected variation as a parameter.
+
+#### `icon`
+
+-   Type: `Icon component`
+-   Required: No
+-   Default: `layout`
+
+Icon to be displayed at the top of the component before the `label`.
+
 ## Related components
 
 Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [BlockEditorProvider](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree.

package/src/components/block-variation-picker/style.native.scss

@@ -17,6 +17,8 @@
 .cancelButton {
 	color: $blue-wordpress;
 	font-size: 16px;
+	padding-left: $grid-unit-20;
+	padding-right: $grid-unit-20;
 }
 
 .cancelButtonDark {
@@ -25,4 +27,6 @@
 
 .closeIcon {
 	color: $gray;
+	margin-left: $grid-unit-20;
+	padding: $grid-unit-20;
 }

package/src/components/border-radius-control/index.js

@@ -53,6 +53,7 @@ export default function BorderRadiusControl( { onChange, values } ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );
+
 	const unit = getAllUnit( values );
 	const unitConfig = units && units.find( ( item ) => item.value === unit );
 	const step = unitConfig?.step || 1;

package/src/components/border-radius-control/test/utils.js

@@ -0,0 +1,216 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getAllUnit,
+	getAllValue,
+	hasMixedValues,
+	hasDefinedValues,
+	mode,
+} from '../utils';
+
+describe( 'getAllUnit', () => {
+	describe( 'when provided string based values', () => {
+		it( 'should return valid unit when passed a valid unit', () => {
+			expect( getAllUnit( '32em' ) ).toBe( 'em' );
+		} );
+
+		it( 'should fall back to px when passed an invalid unit', () => {
+			expect( getAllUnit( '32apples' ) ).toBe( 'px' );
+		} );
+
+		it( 'should fall back to px when passed a value without a unit', () => {
+			expect( getAllUnit( '32' ) ).toBe( 'px' );
+		} );
+	} );
+
+	describe( 'when provided object based values', () => {
+		it( 'should return the most common value', () => {
+			const values = {
+				bottomLeft: '2em',
+				bottomRight: '2em',
+				topLeft: '0',
+				topRight: '2px',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should return the real value when the most common value is undefined', () => {
+			const values = {
+				bottomLeft: '0',
+				bottomRight: '0',
+				topLeft: '0',
+				topRight: '2em',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should return the most common value there are no undefined values', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '2px',
+				topRight: '2em',
+			};
+			expect( getAllUnit( values ) ).toBe( 'em' );
+		} );
+
+		it( 'should fall back to px when all values are undefined or equivalent', () => {
+			const values = {
+				bottomLeft: '0',
+				bottomRight: undefined,
+				topLeft: undefined,
+				topRight: '0',
+			};
+			expect( getAllUnit( values ) ).toBe( 'px' );
+		} );
+	} );
+
+	describe( 'when provided invalid values', () => {
+		it( 'should return px when passed an array', () => {
+			expect( getAllUnit( [] ) ).toBe( 'px' );
+		} );
+		it( 'should return px when passed a boolean', () => {
+			expect( getAllUnit( false ) ).toBe( 'px' );
+		} );
+		it( 'should return px when passed undefined', () => {
+			expect( getAllUnit( false ) ).toBe( 'px' );
+		} );
+	} );
+} );
+
+describe( 'getAllValue', () => {
+	describe( 'when provided string based values', () => {
+		it( 'should return valid value + unit when passed a valid unit', () => {
+			expect( getAllValue( '32em' ) ).toBe( '32em' );
+		} );
+
+		it( 'should return string as-is without parsing it', () => {
+			expect( getAllValue( '32apples' ) ).toBe( '32apples' );
+		} );
+	} );
+
+	describe( 'when provided object based values', () => {
+		it( 'should return null if values are mixed', () => {
+			const values = {
+				bottomLeft: '2em',
+				bottomRight: '2em',
+				topLeft: '0',
+				topRight: '2px',
+			};
+			expect( getAllValue( values ) ).toBe( null );
+		} );
+
+		it( 'should return the common value + unit when all values are the same', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '1em',
+				topRight: '1em',
+			};
+			expect( getAllValue( values ) ).toBe( '1em' );
+		} );
+
+		it( 'should return the common value + most common unit when same values but different units', () => {
+			const values = {
+				bottomLeft: '1em',
+				bottomRight: '1em',
+				topLeft: '1px',
+				topRight: '1rem',
+			};
+			expect( getAllValue( values ) ).toBe( '1em' );
+		} );
+
+		it( 'should fall back to null when values are undefined', () => {
+			const values = {
+				bottomLeft: undefined,
+				bottomRight: undefined,
+				topLeft: undefined,
+				topRight: undefined,
+			};
+			expect( getAllValue( values ) ).toBe( null );
+		} );
+	} );
+
+	describe( 'when provided invalid values', () => {
+		it( 'should return px when passed an array', () => {
+			expect( getAllValue( [] ) ).toBe( null );
+		} );
+		it( 'should return px when passed a boolean', () => {
+			expect( getAllValue( false ) ).toBe( null );
+		} );
+		it( 'should return px when passed undefined', () => {
+			expect( getAllValue( false ) ).toBe( null );
+		} );
+	} );
+} );
+
+describe( 'hasMixedValues', () => {
+	it( 'should return false when passed a string value', () => {
+		expect( hasMixedValues( '2px' ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed mixed values', () => {
+		const values = {
+			bottomLeft: '1em',
+			bottomRight: '1px',
+			topLeft: '2px',
+			topRight: '2em',
+		};
+		expect( hasMixedValues( values ) ).toBe( true );
+	} );
+
+	it( 'should return false when passed a common value', () => {
+		const values = {
+			bottomLeft: '1em',
+			bottomRight: '1em',
+			topLeft: '1em',
+			topRight: '1em',
+		};
+		expect( hasMixedValues( values ) ).toBe( false );
+	} );
+} );
+
+describe( 'hasDefinedValues', () => {
+	it( 'should return false when passed a falsy value', () => {
+		expect( hasDefinedValues( undefined ) ).toBe( false );
+		expect( hasDefinedValues( null ) ).toBe( false );
+		expect( hasDefinedValues( '' ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed a non empty string value', () => {
+		expect( hasDefinedValues( '1px' ) ).toBe( true );
+	} );
+
+	it( 'should return false when passed an object with empty values', () => {
+		const values = {
+			bottomLeft: undefined,
+			bottomRight: undefined,
+			topLeft: undefined,
+			topRight: undefined,
+		};
+		expect( hasDefinedValues( values ) ).toBe( false );
+	} );
+
+	it( 'should return true when passed an object with at least one real value', () => {
+		const values = {
+			bottomLeft: undefined,
+			bottomRight: '1px',
+			topLeft: undefined,
+			topRight: undefined,
+		};
+		expect( hasDefinedValues( values ) ).toBe( true );
+	} );
+} );
+
+describe( 'mode', () => {
+	it( 'should return the most common value', () => {
+		const values = [ 'a', 'z', 'z', 'b', undefined ];
+		expect( mode( values ) ).toBe( 'z' );
+	} );
+
+	it( 'should return the most common real value', () => {
+		const values = [ undefined, 'a', undefined, undefined, undefined ];
+		expect( mode( values ) ).toBe( 'a' );
+	} );
+} );

package/src/components/border-radius-control/utils.js

@@ -4,27 +4,35 @@
 import { __experimentalParseUnit as parseUnit } from '@wordpress/components';
 
 /**
- * Gets the item with the highest occurrence within an array
- * https://stackoverflow.com/a/20762713
+ * Gets the (non-undefined) item with the highest occurrence within an array
+ * Based in part on: https://stackoverflow.com/a/20762713
  *
- * @param {Array<any>} arr Array of items to check.
- * @return {any}           The item with the most occurrences.
+ * Undefined values are always sorted to the end by `sort`, so this function
+ * returns the first element, to always prioritize real values over undefined
+ * values.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
+ *
+ * @param {Array<any>} inputArray Array of items to check.
+ * @return {any}                  The item with the most occurrences.
  */
-function mode( arr ) {
+export function mode( inputArray ) {
+	const arr = [ ...inputArray ];
 	return arr
 		.sort(
 			( a, b ) =>
-				arr.filter( ( v ) => v === a ).length -
-				arr.filter( ( v ) => v === b ).length
+				inputArray.filter( ( v ) => v === b ).length -
+				inputArray.filter( ( v ) => v === a ).length
 		)
-		.pop();
+		.shift();
 }
 
 /**
  * Returns the most common CSS unit in the radius values.
+ * Falls back to `px` as a default unit.
  *
  * @param {Object|string} values Radius values.
- * @return {string}              Most common CSS unit in values.
+ * @return {string}              Most common CSS unit in values. Default: `px`.
  */
 export function getAllUnit( values = {} ) {
 	if ( typeof values === 'string' ) {
@@ -37,7 +45,7 @@ export function getAllUnit( values = {} ) {
 		return unit;
 	} );
 
-	return mode( allUnits );
+	return mode( allUnits ) || 'px';
 }
 
 /**

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -14,6 +14,56 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   margin-bottom: inherit;
 }
 
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-top: calc(4px * 1);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: normal;
+  -webkit-box-align: normal;
+  -ms-flex-align: normal;
+  align-items: normal;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+}
+
+.emotion-6>*+*:not( marquee ) {
+  margin-top: calc(4px * 3);
+}
+
+.emotion-6>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -21,96 +71,103 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
     className="components-base-control__field emotion-2 emotion-3"
   >
     <fieldset>
-      <legend>
-        <div
-          className="block-editor-color-gradient-control__color-indicator"
-        >
-          <span
-            className="components-base-control__label"
-          >
-            Test Color
-            <span
-              aria-label="(Color: #f00)"
-              className="component-color-indicator"
-              style={
-                Object {
-                  "background": "#f00",
-                }
-              }
-            />
-          </span>
-        </div>
-      </legend>
       <div
-        className="components-circular-option-picker"
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
       >
-        <div
-          className="components-circular-option-picker__swatches"
-        >
+        <legend>
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="block-editor-color-gradient-control__color-indicator"
           >
-            <button
-              aria-describedby={null}
-              aria-label="Color: red"
-              aria-pressed={true}
-              className="components-button components-circular-option-picker__option is-pressed"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#f00",
-                  "color": "#f00",
-                }
-              }
-              type="button"
-            />
-            <svg
-              aria-hidden={true}
-              fill="#000000"
-              focusable={false}
-              height={24}
-              role="img"
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
+            <span
+              className="components-base-control__label"
             >
-              <path
-                d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
-              />
-            </svg>
+              Test Color
+            </span>
           </div>
-        </div>
+        </legend>
         <div
-          className="components-circular-option-picker__custom-clear-wrapper"
+          className="components-flex components-h-stack components-v-stack emotion-6 emotion-5"
+          data-wp-c16t={true}
+          data-wp-component="VStack"
         >
           <div
-            className="components-dropdown components-circular-option-picker__dropdown-link-action"
+            className="components-dropdown"
+            tabIndex="-1"
           >
             <button
-              aria-describedby={null}
               aria-expanded={false}
               aria-haspopup="true"
               aria-label="Custom color picker"
-              className="components-button is-link"
+              className="components-color-palette__custom-color"
               onClick={[Function]}
-              type="button"
+              style={
+                Object {
+                  "background": "#f00",
+                }
+              }
             >
-              Custom color
+              #f00
             </button>
           </div>
-          <button
-            aria-describedby={null}
-            className="components-button components-circular-option-picker__clear is-secondary is-small"
-            onClick={[Function]}
-            type="button"
+          <div
+            className="components-circular-option-picker"
           >
-            Clear
-          </button>
+            <div
+              className="components-circular-option-picker__swatches"
+            >
+              <div
+                className="components-circular-option-picker__option-wrapper"
+              >
+                <button
+                  aria-describedby={null}
+                  aria-label="Color: red"
+                  aria-pressed={true}
+                  className="components-button components-circular-option-picker__option is-pressed"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseDown={[Function]}
+                  onMouseEnter={[Function]}
+                  onMouseLeave={[Function]}
+                  style={
+                    Object {
+                      "backgroundColor": "#f00",
+                      "color": "#f00",
+                    }
+                  }
+                  type="button"
+                />
+                <svg
+                  aria-hidden={true}
+                  fill="#000"
+                  focusable={false}
+                  height={24}
+                  role="img"
+                  viewBox="0 0 24 24"
+                  width={24}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              className="components-circular-option-picker__custom-clear-wrapper"
+            >
+              <button
+                aria-describedby={null}
+                className="components-button components-circular-option-picker__clear is-secondary is-small"
+                onClick={[Function]}
+                type="button"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </fieldset>

package/src/components/colors/test/utils.js

@@ -5,6 +5,7 @@ import {
 	getColorObjectByAttributeValues,
 	getColorObjectByColorValue,
 	getColorClassName,
+	getMostReadableColor,
 } from '../utils';
 
 describe( 'color utils', () => {
@@ -127,4 +128,44 @@ describe( 'color utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getMostReadableColor', () => {
+		it( 'should return the most readable color', () => {
+			expect(
+				getMostReadableColor(
+					[
+						{
+							name: 'Red',
+							slug: 'red',
+							color: 'red',
+						},
+						{
+							name: 'Black',
+							slug: 'black',
+							color: 'black',
+						},
+					],
+					'#f3f3f3'
+				)
+			).toBe( 'black' );
+
+			expect(
+				getMostReadableColor(
+					[
+						{
+							name: 'C1',
+							slug: 'c1',
+							color: '#39373b',
+						},
+						{
+							name: 'C2',
+							slug: 'c2',
+							color: '#a25de6',
+						},
+					],
+					'#9853ff'
+				)
+			).toBe( '#39373b' );
+		} );
+	} );
 } );

package/src/components/colors/utils.js

@@ -1,8 +1,12 @@
 /**
  * External dependencies
  */
-import { find, kebabCase, map } from 'lodash';
-import tinycolor from 'tinycolor2';
+import { find, kebabCase, maxBy } from 'lodash';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import a11yPlugin from 'colord/plugins/a11y';
+
+extend( [ namesPlugin, a11yPlugin ] );
 
 /**
  * Provided an array of color objects as set by the theme or by the editor defaults,
@@ -72,7 +76,7 @@ export function getColorClassName( colorContextName, colorSlug ) {
  * @return {string} String with the color value of the most readable color.
  */
 export function getMostReadableColor( colors, colorValue ) {
-	return tinycolor
-		.mostReadable( colorValue, map( colors, 'color' ) )
-		.toHexString();
+	const colordColor = colord( colorValue );
+	return maxBy( colors, ( { color } ) => colordColor.contrast( color ) )
+		.color;
 }