@wordpress/block-editor 7.0.3 → 7.0.4

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,31 @@ 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 * 2);
+}
+
+.emotion-4>* {
+  min-height: 0;
+}
+
 <div
   className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
 >
@@ -21,97 +46,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"
+      <div
+        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+        data-wp-c16t={true}
+        data-wp-component="VStack"
+      >
+        <legend>
+          <div
+            className="block-editor-color-gradient-control__color-indicator"
           >
-            Test Color
             <span
-              aria-label="(Color: #f00)"
-              className="component-color-indicator"
-              style={
-                Object {
-                  "background": "#f00",
+              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"
-      >
+              />
+            </span>
+          </div>
+        </legend>
         <div
-          className="components-circular-option-picker__swatches"
+          className="components-circular-option-picker"
         >
           <div
-            className="components-circular-option-picker__option-wrapper"
+            className="components-circular-option-picker__swatches"
           >
-            <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"
+            <div
+              className="components-circular-option-picker__option-wrapper"
             >
-              <path
-                d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+              <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>
+              <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>
-        <div
-          className="components-circular-option-picker__custom-clear-wrapper"
-        >
           <div
-            className="components-dropdown components-circular-option-picker__dropdown-link-action"
-            tabIndex="-1"
+            className="components-circular-option-picker__custom-clear-wrapper"
           >
+            <div
+              className="components-dropdown components-circular-option-picker__dropdown-link-action"
+              tabIndex="-1"
+            >
+              <button
+                aria-describedby={null}
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker"
+                className="components-button is-link"
+                onClick={[Function]}
+                type="button"
+              >
+                Custom color
+              </button>
+            </div>
             <button
               aria-describedby={null}
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-button is-link"
+              className="components-button components-circular-option-picker__clear is-secondary is-small"
               onClick={[Function]}
               type="button"
             >
-              Custom color
+              Clear
             </button>
           </div>
-          <button
-            aria-describedby={null}
-            className="components-button components-circular-option-picker__clear is-secondary is-small"
-            onClick={[Function]}
-            type="button"
-          >
-            Clear
-          </button>
         </div>
       </div>
     </fieldset>

package/src/components/colors-gradients/control.js

@@ -10,8 +10,9 @@ import { every, isEmpty } from 'lodash';
 import { useState } from '@wordpress/element';
 import {
 	BaseControl,
-	Button,
-	ButtonGroup,
+	__experimentalVStack as VStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	ColorIndicator,
 	ColorPalette,
 	GradientPicker,
@@ -110,66 +111,68 @@ function ColorGradientControlInner( {
 			) }
 		>
 			<fieldset>
-				<legend>
-					<div className="block-editor-color-gradient-control__color-indicator">
-						<BaseControl.VisualLabel>
-							<VisualLabel
-								currentTab={ currentTab }
-								label={ label }
-								colorValue={ colorValue }
-								gradientValue={ gradientValue }
-							/>
-						</BaseControl.VisualLabel>
-					</div>
-				</legend>
-				{ canChooseAColor && canChooseAGradient && (
-					<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
-						<Button
-							isSmall
-							isPressed={ currentTab === 'color' }
-							onClick={ () => setCurrentTab( 'color' ) }
-						>
-							{ __( 'Solid' ) }
-						</Button>
-						<Button
-							isSmall
-							isPressed={ currentTab === 'gradient' }
-							onClick={ () => setCurrentTab( 'gradient' ) }
+				<VStack space={ 3 }>
+					<legend>
+						<div className="block-editor-color-gradient-control__color-indicator">
+							<BaseControl.VisualLabel>
+								<VisualLabel
+									currentTab={ currentTab }
+									label={ label }
+									colorValue={ colorValue }
+									gradientValue={ gradientValue }
+								/>
+							</BaseControl.VisualLabel>
+						</div>
+					</legend>
+					{ canChooseAColor && canChooseAGradient && (
+						<ToggleGroupControl
+							value={ currentTab }
+							onChange={ setCurrentTab }
+							label={ __( 'Select color type' ) }
+							hideLabelFromVision
+							isBlock
 						>
-							{ __( 'Gradient' ) }
-						</Button>
-					</ButtonGroup>
-				) }
-				{ ( currentTab === 'color' || ! canChooseAGradient ) && (
-					<ColorPalette
-						value={ colorValue }
-						onChange={
-							canChooseAGradient
-								? ( newColor ) => {
-										onColorChange( newColor );
-										onGradientChange();
-								  }
-								: onColorChange
-						}
-						{ ...{ colors, disableCustomColors } }
-						clearable={ clearable }
-					/>
-				) }
-				{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
-					<GradientPicker
-						value={ gradientValue }
-						onChange={
-							canChooseAColor
-								? ( newGradient ) => {
-										onGradientChange( newGradient );
-										onColorChange();
-								  }
-								: onGradientChange
-						}
-						{ ...{ gradients, disableCustomGradients } }
-						clearable={ clearable }
-					/>
-				) }
+							<ToggleGroupControlOption
+								value="color"
+								label={ __( 'Solid' ) }
+							/>
+							<ToggleGroupControlOption
+								value="gradient"
+								label={ __( 'Gradient' ) }
+							/>
+						</ToggleGroupControl>
+					) }
+					{ ( currentTab === 'color' || ! canChooseAGradient ) && (
+						<ColorPalette
+							value={ colorValue }
+							onChange={
+								canChooseAGradient
+									? ( newColor ) => {
+											onColorChange( newColor );
+											onGradientChange();
+									  }
+									: onColorChange
+							}
+							{ ...{ colors, disableCustomColors } }
+							clearable={ clearable }
+						/>
+					) }
+					{ ( currentTab === 'gradient' || ! canChooseAColor ) && (
+						<GradientPicker
+							value={ gradientValue }
+							onChange={
+								canChooseAColor
+									? ( newGradient ) => {
+											onGradientChange( newGradient );
+											onColorChange();
+									  }
+									: onGradientChange
+							}
+							{ ...{ gradients, disableCustomGradients } }
+							clearable={ clearable }
+						/>
+					) }
+				</VStack>
 			</fieldset>
 		</BaseControl>
 	);

package/src/components/colors-gradients/style.scss

@@ -2,11 +2,6 @@
 	.block-editor-color-gradient-control__color-indicator {
 		margin-bottom: $grid-unit-15;
 	}
-
-	.block-editor-color-gradient-control__button-tabs {
-		display: block;
-		margin-bottom: $grid-unit-15;
-	}
 }
 
 .block-editor-panel-color-gradient-settings {
@@ -45,4 +40,12 @@
 			margin-right: 0;
 		}
 	}
+
+
+	// This shouldn't be needed but there's a rule in the inspector controls
+	// overriding this causing too much spacing.
+	// That generic rule should ideally be removed.
+	.block-editor-block-inspector & .components-base-control {
+		margin-bottom: inherit;
+	}
 }

package/src/components/colors-gradients/test/control.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { render, screen } from '@testing-library/react';
 import { create, act } from 'react-test-renderer';
 import { noop } from 'lodash';
 
@@ -27,67 +28,57 @@ const getButtonWithAriaLabelStartPredicate = ( ariaLabelStart ) => (
 	);
 };
 
-const colorTabButtonPredicate = getButtonWithTestPredicate( 'Solid' );
-const gradientTabButtonPredicate = getButtonWithTestPredicate( 'Gradient' );
+const getTabWithTestPredicate = ( text ) => ( element ) => {
+	return (
+		element.type === 'button' &&
+		element.props[ 'aria-label' ] &&
+		element.props[ 'aria-label' ] === text
+	);
+};
+
+const colorTabButtonPredicate = getTabWithTestPredicate( 'Solid' );
+const gradientTabButtonPredicate = getTabWithTestPredicate( 'Gradient' );
 
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [
-						{ color: '#f00', name: 'red' },
-						{ color: '#0f0', name: 'green' },
-					] }
-					gradients={ [
-						{
-							gradient:
-								'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
-							name: 'Vivid cyan blue to vivid purple',
-							slug: 'vivid-cyan-blue-to-vivid-purple',
-						},
-						{
-							gradient:
-								'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
-							name: 'Light green cyan to vivid green cyan',
-							slug: 'light-green-cyan-to-vivid-green-cyan',
-						},
-					] }
-					disableCustomColors={ false }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [
+					{
+						gradient:
+							'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%',
+						name: 'Vivid cyan blue to vivid purple',
+						slug: 'vivid-cyan-blue-to-vivid-purple',
+					},
+					{
+						gradient:
+							'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)',
+						name: 'Light green cyan to vivid green cyan',
+						slug: 'light-green-cyan-to-vivid-green-cyan',
+					},
+				] }
+				disableCustomColors={ false }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is showing the two tab buttons.
-		expect( wrapper.root.findAll( colorTabButtonPredicate ) ).toHaveLength(
-			1
-		);
-		expect(
-			wrapper.root.findAll( gradientTabButtonPredicate )
-		).toHaveLength( 1 );
+		expect( screen.queryByLabelText( 'Solid' ) ).toBeInTheDocument();
+		expect( screen.queryByLabelText( 'Gradient' ) ).toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.type === 'button' &&
-					element.props &&
-					element.props[ 'aria-label' ] &&
-					element.props[ 'aria-label' ].startsWith( 'Color:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 
 		// Is showing the custom color picker.
-		expect(
-			wrapper.root.findAll( getButtonWithTestPredicate( 'Custom color' ) )
-		).toHaveLength( 1 );
+		expect( screen.queryByText( 'Custom color' ) ).toBeInTheDocument();
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', async () => {

package/src/components/copy-handler/index.js

@@ -31,7 +31,7 @@ export function useNotifyCopy() {
 		let notice = '';
 		if ( selectedBlockClientIds.length === 1 ) {
 			const clientId = selectedBlockClientIds[ 0 ];
-			const { title } = getBlockType( getBlockName( clientId ) );
+			const title = getBlockType( getBlockName( clientId ) )?.title;
 			notice =
 				eventType === 'copy'
 					? sprintf(

package/src/components/default-block-appender/index.js

@@ -59,8 +59,8 @@ export function DefaultBlockAppender( {
 				// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 				role="button"
 				aria-label={ __( 'Add block' ) }
-				// The wp-block className is important for editor styles.
-				className="wp-block block-editor-default-block-appender__content"
+				// A wrapping container for this one already has the wp-block className.
+				className="block-editor-default-block-appender__content"
 				onFocus={ onAppend }
 			>
 				{ showPrompt ? value : ZWNBSP }

package/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -7,7 +7,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={
       [MockFunction] {
@@ -43,7 +43,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={[MockFunction]}
     role="button"
@@ -67,7 +67,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
 >
   <p
     aria-label="Add block"
-    className="wp-block block-editor-default-block-appender__content"
+    className="block-editor-default-block-appender__content"
     contentEditable={true}
     onFocus={[MockFunction]}
     role="button"

package/src/components/font-appearance-control/index.js

@@ -195,19 +195,17 @@ export default function FontAppearanceControl( props ) {
 	};
 
 	return (
-		<fieldset className="components-font-appearance-control">
-			{ hasStylesOrWeights && (
-				<CustomSelectControl
-					className="components-font-appearance-control__select"
-					label={ getLabel() }
-					describedBy={ getDescribedBy() }
-					options={ selectOptions }
-					value={ currentSelection }
-					onChange={ ( { selectedItem } ) =>
-						onChange( selectedItem.style )
-					}
-				/>
-			) }
-		</fieldset>
+		hasStylesOrWeights && (
+			<CustomSelectControl
+				className="components-font-appearance-control"
+				label={ getLabel() }
+				describedBy={ getDescribedBy() }
+				options={ selectOptions }
+				value={ currentSelection }
+				onChange={ ( { selectedItem } ) =>
+					onChange( selectedItem.style )
+				}
+			/>
+		)
 	);
 }

package/src/components/font-appearance-control/style.scss

@@ -1,4 +1,4 @@
-.components-font-appearance-control__select {
+.components-font-appearance-control {
 	margin-bottom: 24px;
 
 	ul {

package/src/components/index.js

@@ -70,8 +70,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
-export { default as __experimentalListViewEditor } from './list-view/editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';

package/src/components/inserter/block-patterns-tab.js

@@ -31,11 +31,18 @@ function BlockPatternsCategory( {
 	// Remove any empty categories
 	const populatedCategories = useMemo(
 		() =>
-			allCategories.filter( ( category ) =>
-				allPatterns.some( ( pattern ) =>
-					pattern.categories?.includes( category.name )
+			allCategories
+				.filter( ( category ) =>
+					allPatterns.some( ( pattern ) =>
+						pattern.categories?.includes( category.name )
+					)
 				)
-			),
+				.sort( ( { name: currentName }, { name: nextName } ) => {
+					if ( ! [ currentName, nextName ].includes( 'featured' ) ) {
+						return 0;
+					}
+					return currentName === 'featured' ? -1 : 1;
+				} ),
 		[ allPatterns, allCategories ]
 	);