@wordpress/block-editor 10.2.0 → 10.4.0

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

@@ -117,134 +117,116 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   min-width: 0;
 }
 
-<div
-  className="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
->
+<div>
   <div
-    className="components-base-control__field emotion-2 emotion-3"
+    class="components-base-control block-editor-color-gradient-control emotion-0 emotion-1"
   >
-    <fieldset
-      className="block-editor-color-gradient-control__fieldset"
+    <div
+      class="components-base-control__field emotion-2 emotion-3"
     >
-      <div
-        className="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
-        data-wp-c16t={true}
-        data-wp-component="VStack"
+      <fieldset
+        class="block-editor-color-gradient-control__fieldset"
       >
-        <legend>
-          <div
-            className="block-editor-color-gradient-control__color-indicator"
-          >
-            <span
-              className="components-base-control__label emotion-6 emotion-7"
-            >
-              Test Color
-            </span>
-          </div>
-        </legend>
         <div
-          className="block-editor-color-gradient-control__panel"
+          class="components-flex components-h-stack components-v-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="VStack"
         >
-          <div
-            className="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
-            data-wp-c16t={true}
-            data-wp-component="VStack"
-          >
+          <legend>
             <div
-              className="components-dropdown"
-              tabIndex="-1"
+              class="block-editor-color-gradient-control__color-indicator"
             >
-              <button
-                aria-expanded={false}
-                aria-haspopup="true"
-                aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
-                className="components-flex components-color-palette__custom-color emotion-10 emotion-5"
-                data-wp-c16t={true}
-                data-wp-component="Flex"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "background": "#f00",
-                    "color": "#000",
-                  }
-                }
+              <span
+                class="components-base-control__label emotion-6 emotion-7"
               >
-                <span
-                  className="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
-                  data-wp-c16t={true}
-                  data-wp-component="FlexItem"
-                >
-                  red
-                </span>
-                <span
-                  className="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
-                  data-wp-c16t={true}
-                  data-wp-component="FlexItem"
-                >
-                  f00
-                </span>
-              </button>
+                Test Color
+              </span>
             </div>
+          </legend>
+          <div
+            class="block-editor-color-gradient-control__panel"
+          >
             <div
-              className="components-circular-option-picker"
+              class="components-flex components-h-stack components-v-stack emotion-8 emotion-5"
+              data-wp-c16t="true"
+              data-wp-component="VStack"
             >
               <div
-                className="components-circular-option-picker__swatches"
+                class="components-dropdown"
+                tabindex="-1"
               >
-                <div
-                  className="components-circular-option-picker__option-wrapper"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-label="Custom color picker. The currently selected color is called \\"red\\" and has a value of \\"f00\\"."
+                  class="components-flex components-color-palette__custom-color emotion-10 emotion-5"
+                  data-wp-c16t="true"
+                  data-wp-component="Flex"
+                  style="background: rgb(255, 0, 0); color: rgb(0, 0, 0);"
                 >
-                  <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}
-                    viewBox="0 0 24 24"
-                    width={24}
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="components-truncate components-flex-item components-color-palette__custom-color-name emotion-5 emotion-13 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
                   >
-                    <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>
+                    red
+                  </span>
+                  <span
+                    class="components-flex-item components-color-palette__custom-color-value emotion-15 emotion-5"
+                    data-wp-c16t="true"
+                    data-wp-component="FlexItem"
+                  >
+                    f00
+                  </span>
+                </button>
               </div>
               <div
-                className="components-circular-option-picker__custom-clear-wrapper"
+                class="components-circular-option-picker"
               >
-                <button
-                  aria-describedby={null}
-                  className="components-button components-circular-option-picker__clear is-tertiary"
-                  onClick={[Function]}
-                  type="button"
+                <div
+                  class="components-circular-option-picker__swatches"
                 >
-                  Clear
-                </button>
+                  <div
+                    class="components-circular-option-picker__option-wrapper"
+                  >
+                    <button
+                      aria-label="Color: red"
+                      aria-pressed="true"
+                      class="components-button components-circular-option-picker__option is-pressed"
+                      style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
+                      type="button"
+                    />
+                    <svg
+                      aria-hidden="true"
+                      fill="#000"
+                      focusable="false"
+                      height="24"
+                      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
+                  class="components-circular-option-picker__custom-clear-wrapper"
+                >
+                  <button
+                    class="components-button components-circular-option-picker__clear is-tertiary"
+                    type="button"
+                  >
+                    Clear
+                  </button>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </fieldset>
+      </fieldset>
+    </div>
   </div>
 </div>
 `;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { create, act } from 'react-test-renderer';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -12,20 +12,16 @@ const noop = () => {};
 
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
-		let root;
+		const { container } = render(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ noop }
+			/>
+		);
 
-		await act( async () => {
-			root = create(
-				<ColorPaletteControl
-					label="Test Color"
-					value="#f00"
-					colors={ [ { color: '#f00', name: 'red' } ] }
-					disableCustomColors={ false }
-					onChange={ noop }
-				/>
-			);
-		} );
-
-		expect( root.toJSON() ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { every, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -180,7 +180,7 @@ function ColorGradientControlSelect( props ) {
 
 function ColorGradientControl( props ) {
 	if (
-		every( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )
+		colorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )
 	) {
 		return <ColorGradientControlInner { ...props } />;
 	}

package/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { every, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -50,8 +50,7 @@ export const PanelColorGradientSettingsInner = ( {
 		isEmpty( gradients ) &&
 		disableCustomColors &&
 		disableCustomGradients &&
-		every(
-			settings,
+		settings?.every(
 			( setting ) =>
 				isEmpty( setting.colors ) &&
 				isEmpty( setting.gradients ) &&
@@ -137,7 +136,7 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => {
 
 const PanelColorGradientSettings = ( props ) => {
 	if (
-		every( colorsAndGradientKeys, ( key ) => props.hasOwnProperty( key ) )
+		colorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import { create, act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -11,15 +10,6 @@ import ColorGradientControl from '../control';
 
 const noop = () => {};
 
-const getButtonWithAriaLabelStartPredicate =
-	( ariaLabelStart ) => ( element ) => {
-		return (
-			element.type === 'button' &&
-			element.props[ 'aria-label' ] &&
-			element.props[ 'aria-label' ].startsWith( ariaLabelStart )
-		);
-	};
-
 describe( 'ColorPaletteControl', () => {
 	it( 'renders tabs if it is possible to select a color and a gradient rendering a color picker at the start', async () => {
 		render(
@@ -64,25 +54,21 @@ describe( 'ColorPaletteControl', () => {
 	} );
 
 	it( 'renders the color picker and does not render tabs if it is only possible to select a color', 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={ [] }
-					disableCustomColors={ false }
-					disableCustomGradients={ true }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [
+					{ color: '#f00', name: 'red' },
+					{ color: '#0f0', name: 'green' },
+				] }
+				gradients={ [] }
+				disableCustomColors={ false }
+				disableCustomGradients={ true }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -93,43 +79,35 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Colors.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Color:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Color:/ ) ).toHaveLength( 2 );
 	} );
 
 	it( 'renders the gradient picker and does not render tabs if it is only possible to select a gradient', async () => {
-		let wrapper;
-
-		await act( async () => {
-			wrapper = create(
-				<ColorGradientControl
-					label="Test Color Gradient"
-					colorValue="#f00"
-					colors={ [] }
-					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={ true }
-					disableCustomGradients={ false }
-					onColorChange={ noop }
-					onGradientChange={ noop }
-				/>
-			);
-		} );
+		render(
+			<ColorGradientControl
+				label="Test Color Gradient"
+				colorValue="#f00"
+				colors={ [] }
+				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={ true }
+				disableCustomGradients={ false }
+				onColorChange={ noop }
+				onGradientChange={ noop }
+			/>
+		);
 
 		// Is not showing the two tab buttons.
 		expect(
@@ -140,22 +118,16 @@ describe( 'ColorPaletteControl', () => {
 		).not.toBeInTheDocument();
 
 		// Is showing the two predefined Gradients.
-		expect(
-			wrapper.root.findAll(
-				getButtonWithAriaLabelStartPredicate( 'Gradient:' )
-			)
-		).toHaveLength( 2 );
+		expect( screen.getAllByLabelText( /^Gradient:/ ) ).toHaveLength( 2 );
 
 		// Is showing the custom gradient picker.
 		expect(
-			wrapper.root.findAll(
-				( element ) =>
-					element.props &&
-					element.props.className &&
-					element.props.className.includes(
-						'components-custom-gradient-picker'
-					)
-			).length
-		).toBeGreaterThanOrEqual( 1 );
+			screen.getAllByRole( 'button', {
+				expanded: false,
+				name: /^Gradient control point at position/,
+			} )[ 0 ]
+		).toHaveClass(
+			'components-custom-gradient-picker__control-point-button'
+		);
 	} );
 } );

package/src/components/duotone-control/index.js

@@ -36,7 +36,7 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
-				isAlternate: true,
+				variant: 'toolbar',
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {