@wordpress/block-editor 9.0.0 → 9.1.0

package/src/components/warning/test/index.js

@@ -18,7 +18,7 @@ describe( 'Warning', () => {
 	it( 'should have valid class', () => {
 		const wrapper = shallow( <Warning /> );
 
-		expect( wrapper.hasClass( 'block-editor-warning' ) ).toBe( true );
+		expect( wrapper.find( '.block-editor-warning' ) ).toHaveLength( 1 );
 		expect( wrapper.find( '.block-editor-warning__actions' ) ).toHaveLength(
 			0
 		);

package/src/hooks/anchor.js

@@ -117,7 +117,7 @@ export const withInspectorControl = createHigherOrderComponent(
 						 * We plan to remove scoping anchors to 'core/heading' to support
 						 * anchors for all eligble blocks. Additionally we plan to explore
 						 * leveraging InspectorAdvancedControls instead of a custom
-						 * PanelBody title. https://git.io/Jtcov
+						 * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
 						 */ }
 						{ ! isWeb && props.name === 'core/heading' && (
 							<InspectorControls>

package/src/hooks/border.js

@@ -269,17 +269,8 @@ export function BorderPanel( props ) {
 						colors={ colors }
 						enableAlpha={ true }
 						onChange={ onBorderChange }
-						popoverClassNames={ {
-							linked: 'block-editor__border-box-control__popover',
-							top:
-								'block-editor__border-box-control__popover-top',
-							right:
-								'block-editor__border-box-control__popover-right',
-							bottom:
-								'block-editor__border-box-control__popover-bottom',
-							left:
-								'block-editor__border-box-control__popover-left',
-						} }
+						popoverPlacement="left-start"
+						popoverOffset={ 40 }
 						showStyle={ isStyleSupported }
 						value={ hydratedBorder }
 						__experimentalHasMultipleOrigins={ true }

package/src/hooks/border.scss

@@ -3,51 +3,3 @@
 		grid-column: span 1;
 	}
 }
-
-.block-editor__border-box-control__popover,
-.block-editor__border-box-control__popover-top,
-.block-editor__border-box-control__popover-right,
-.block-editor__border-box-control__popover-bottom,
-.block-editor__border-box-control__popover-left {
-	.components-popover__content {
-		width: 282px;
-	}
-}
-
-$split-border-control-offset: 55px;
-
-@include break-medium() {
-	.block-editor__border-box-control__popover,
-	.block-editor__border-box-control__popover-left {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 } !important;
-		}
-	}
-
-	.block-editor__border-box-control__popover-top,
-	.block-editor__border-box-control__popover-bottom {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 + $split-border-control-offset } !important;
-		}
-	}
-
-	.block-editor__border-box-control__popover-right {
-		.components-popover__content {
-			margin-right: #{ $grid-unit-50 + $grid-unit-15 + ( $split-border-control-offset * 2 )} !important;
-		}
-	}
-
-	.block-editor__border-box-control__popover,
-	.block-editor__border-box-control__popover-top,
-	.block-editor__border-box-control__popover-right,
-	.block-editor__border-box-control__popover-bottom,
-	.block-editor__border-box-control__popover-left {
-		&.is-from-top .components-popover__content {
-			margin-top: #{ -($grid-unit-50 + $grid-unit-15) } !important;
-		}
-
-		&.is-from-bottom .components-popover__content {
-			margin-bottom: #{ -($grid-unit-50 + $grid-unit-15) } !important;
-		}
-	}
-}

package/src/hooks/color-panel.js

@@ -6,9 +6,10 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import ColorGradientSettingsDropdown from '../components/colors-gradients/dropdown';
 import ContrastChecker from '../components/contrast-checker';
-import ToolsPanelColorDropdown from '../components/colors-gradients/tools-panel-color-dropdown';
 import InspectorControls from '../components/inspector-controls';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 
 function getComputedStyle( node ) {
@@ -58,16 +59,19 @@ export default function ColorPanel( {
 		setDetectedBackgroundColor( backgroundColor );
 	} );
 
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
 		<InspectorControls __experimentalGroup="color">
-			{ settings.map( ( setting, index ) => (
-				<ToolsPanelColorDropdown
-					key={ index }
-					settings={ setting }
-					panelId={ clientId }
-					enableAlpha={ enableAlpha }
-				/>
-			) ) }
+			<ColorGradientSettingsDropdown
+				enableAlpha={ enableAlpha }
+				panelId={ clientId }
+				settings={ settings }
+				__experimentalIsItemGroup={ false }
+				__experimentalHasMultipleOrigins
+				__experimentalIsRenderedInSidebar
+				{ ...colorGradientSettings }
+			/>
 			{ enableContrastChecking && (
 				<ContrastChecker
 					backgroundColor={ detectedBackgroundColor }

package/src/hooks/color.scss

@@ -20,66 +20,4 @@
 			row-gap: 0;
 		}
 	}
-
-	/**
-	 * The following styles replicate the separated border of the
-	 * `ItemGroup` component but allows for hidden items. This is because
-	 * to maintain the order of `ToolsPanel` controls, each `ToolsPanelItem`
-	 * must at least render a placeholder which would otherwise interfere
-	 * with the `:last-child` styles.
-	 */
-	.block-editor-tools-panel-color-gradient-settings__item {
-		padding: 0;
-
-		// Border styles.
-		border-left: 1px solid rgba(0, 0, 0, 0.1);
-		border-right: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-
-		&.first {
-			border-top-left-radius: 2px;
-			border-top-right-radius: 2px;
-			border-top: 1px solid rgba(0, 0, 0, 0.1);
-		}
-
-		&.last {
-			border-bottom-left-radius: 2px;
-			border-bottom-right-radius: 2px;
-		}
-
-		> div,
-		> div > button {
-			border-radius: inherit;
-		}
-	}
-
-	.block-editor-panel-color-gradient-settings__color-indicator {
-		// Show a diagonal line (crossed out) for empty swatches.
-		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
-	}
-
-	/**
-	 * The following few styles fix the layout and spacing for the due to the
-	 * introduced wrapper element by the `Item` component.
-	 */
-	.block-editor-tools-panel-color-dropdown {
-		display: block;
-		padding: 0;
-
-		> button {
-			height: 46px;
-
-			&.is-open {
-				background: $gray-100;
-				color: var(--wp-admin-theme-color);
-			}
-		}
-	}
-
-	.color-block-support-panel__item-group {
-		> div {
-			grid-column: span 2;
-			border-radius: inherit;
-		}
-	}
 }

package/src/hooks/style.js

@@ -1,18 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	first,
-	forEach,
-	get,
-	has,
-	isEmpty,
-	isString,
-	kebabCase,
-	map,
-	omit,
-	startsWith,
-} from 'lodash';
+import { get, has, isEmpty, kebabCase, omit } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -58,7 +47,7 @@ const VARIABLE_REFERENCE_PREFIX = 'var:';
 const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
 const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
 function compileStyleValue( uncompiledValue ) {
-	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
 		const variable = uncompiledValue
 			.slice( VARIABLE_REFERENCE_PREFIX.length )
 			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
@@ -82,13 +71,13 @@ export function getInlineStyles( styles = {} ) {
 		const path = STYLE_PROPERTY[ propKey ].value;
 		const subPaths = STYLE_PROPERTY[ propKey ].properties;
 		// Ignore styles on elements because they are handled on the server.
-		if ( has( styles, path ) && 'elements' !== first( path ) ) {
+		if ( has( styles, path ) && 'elements' !== path?.[ 0 ] ) {
 			// Checking if style value is a string allows for shorthand css
 			// option and backwards compatibility for border radius support.
 			const styleValue = get( styles, path );
 
 			if ( ! STYLE_PROPERTY[ propKey ].useEngine ) {
-				if ( !! subPaths && ! isString( styleValue ) ) {
+				if ( !! subPaths && typeof styleValue !== 'string' ) {
 					Object.entries( subPaths ).forEach( ( entry ) => {
 						const [ name, subPath ] = entry;
 						const value = get( styleValue, [ subPath ] );
@@ -108,11 +97,8 @@ export function getInlineStyles( styles = {} ) {
 
 	// The goal is to move everything to server side generated engine styles
 	// This is temporary as we absorb more and more styles into the engine.
-	const extraRules = getCSSRules( styles, { selector: 'self' } );
+	const extraRules = getCSSRules( styles );
 	extraRules.forEach( ( rule ) => {
-		if ( rule.selector !== 'self' ) {
-			throw "This style can't be added as inline style";
-		}
 		output[ rule.key ] = rule.value;
 	} );
 
@@ -120,24 +106,25 @@ export function getInlineStyles( styles = {} ) {
 }
 
 function compileElementsStyles( selector, elements = {} ) {
-	return map( elements, ( styles, element ) => {
-		const elementStyles = getInlineStyles( styles );
-		if ( ! isEmpty( elementStyles ) ) {
-			// The .editor-styles-wrapper selector is required on elements styles. As it is
-			// added to all other editor styles, not providing it causes reset and global
-			// styles to override element styles because of higher specificity.
-			return [
-				`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
-				...map(
-					elementStyles,
-					( value, property ) =>
-						`\t${ kebabCase( property ) }: ${ value };`
-				),
-				'}',
-			].join( '\n' );
-		}
-		return '';
-	} ).join( '\n' );
+	return Object.entries( elements )
+		.map( ( [ element, styles ] ) => {
+			const elementStyles = getInlineStyles( styles );
+			if ( ! isEmpty( elementStyles ) ) {
+				// The .editor-styles-wrapper selector is required on elements styles. As it is
+				// added to all other editor styles, not providing it causes reset and global
+				// styles to override element styles because of higher specificity.
+				return [
+					`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
+					...Object.entries( elementStyles ).map(
+						( [ cssProperty, value ] ) =>
+							`\t${ kebabCase( cssProperty ) }: ${ value };`
+					),
+					'}',
+				].join( '\n' );
+			}
+			return '';
+		} )
+		.join( '\n' );
 }
 
 /**
@@ -235,8 +222,7 @@ export function addSaveProps(
 	}
 
 	let { style } = attributes;
-
-	forEach( skipPaths, ( path, indicator ) => {
+	Object.entries( skipPaths ).forEach( ( [ indicator, path ] ) => {
 		const skipSerialization = getBlockSupport( blockType, indicator );
 
 		if ( skipSerialization === true ) {

package/src/hooks/typography.js

@@ -130,6 +130,7 @@ export function TypographyPanel( props ) {
 			{ ! isFontSizeDisabled && (
 				<ToolsPanelItem
 					hasValue={ () => hasFontSizeValue( props ) }
+					/* translators: Ensure translation is distinct from "Letter case" */
 					label={ __( 'Font size' ) }
 					onDeselect={ () => resetFontSize( props ) }
 					isShownByDefault={ defaultControls?.fontSize }
@@ -205,6 +206,7 @@ export function TypographyPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasTextTransformValue( props ) }
+					/* translators: Ensure translation is distinct from "Font size" */
 					label={ __( 'Letter case' ) }
 					onDeselect={ () => resetTextTransform( props ) }
 					isShownByDefault={ defaultControls?.textTransform }

package/src/style.scss

@@ -1,6 +1,5 @@
 @import "./autocompleters/style.scss";
 @import "./components/block-alignment-control/style.scss";
-@import "./components/block-alignment-matrix-control/style.scss";
 @import "./components/block-icon/style.scss";
 @import "./components/block-inspector/style.scss";
 @import "./components/block-list/style.scss";

package/build/components/colors-gradients/tools-panel-color-dropdown.js

@@ -1,89 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ToolsPanelColorDropdown;
-
-var _element = require("@wordpress/element");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _components = require("@wordpress/components");
-
-var _control = _interopRequireDefault(require("./control"));
-
-var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("./use-multiple-origin-colors-and-gradients"));
-
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function ToolsPanelColorDropdown(_ref) {
-  var _settings$gradientVal;
-
-  let {
-    settings,
-    enableAlpha,
-    ...otherProps
-  } = _ref;
-  const colorGradientSettings = (0, _useMultipleOriginColorsAndGradients.default)();
-  const controlSettings = { ...colorGradientSettings,
-    clearable: false,
-    enableAlpha,
-    label: settings.label,
-    onColorChange: settings.onColorChange,
-    onGradientChange: settings.onGradientChange,
-    colorValue: settings.colorValue,
-    gradientValue: settings.gradientValue
-  };
-  const selectedColor = (_settings$gradientVal = settings.gradientValue) !== null && _settings$gradientVal !== void 0 ? _settings$gradientVal : settings.colorValue;
-  return (0, _element.createElement)(_components.__experimentalToolsPanelItem, (0, _extends2.default)({
-    hasValue: settings.hasValue,
-    label: settings.label,
-    onDeselect: settings.onDeselect,
-    isShownByDefault: settings.isShownByDefault,
-    resetAllFilter: settings.resetAllFilter
-  }, otherProps, {
-    className: "block-editor-tools-panel-color-gradient-settings__item"
-  }), (0, _element.createElement)(_components.Dropdown, {
-    className: "block-editor-tools-panel-color-dropdown",
-    contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
-    renderToggle: _ref2 => {
-      let {
-        isOpen,
-        onToggle
-      } = _ref2;
-      return (0, _element.createElement)(_components.Button, {
-        onClick: onToggle,
-        "aria-expanded": isOpen,
-        className: (0, _classnames.default)('block-editor-panel-color-gradient-settings__dropdown', {
-          'is-open': isOpen
-        })
-      }, (0, _element.createElement)(_components.__experimentalHStack, {
-        justify: "flex-start"
-      }, (0, _element.createElement)(_components.ColorIndicator, {
-        className: "block-editor-panel-color-gradient-settings__color-indicator",
-        colorValue: selectedColor
-      }), (0, _element.createElement)(_components.FlexItem, null, settings.label)));
-    },
-    renderContent: () => (0, _element.createElement)(_control.default, (0, _extends2.default)({
-      showTitle: false,
-      __experimentalHasMultipleOrigins: true,
-      __experimentalIsRenderedInSidebar: true,
-      enableAlpha: true
-    }, controlSettings))
-  }));
-}
-//# sourceMappingURL=tools-panel-color-dropdown.js.map

package/build/components/colors-gradients/tools-panel-color-dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js"],"names":["ToolsPanelColorDropdown","settings","enableAlpha","otherProps","colorGradientSettings","controlSettings","clearable","label","onColorChange","onGradientChange","colorValue","gradientValue","selectedColor","hasValue","onDeselect","isShownByDefault","resetAllFilter","isOpen","onToggle"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAYA;;AACA;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAUA;AACA;AACA;AAIe,SAASA,uBAAT,OAIX;AAAA;;AAAA,MAJ6C;AAChDC,IAAAA,QADgD;AAEhDC,IAAAA,WAFgD;AAGhD,OAAGC;AAH6C,GAI7C;AACH,QAAMC,qBAAqB,GAAG,mDAA9B;AACA,QAAMC,eAAe,GAAG,EACvB,GAAGD,qBADoB;AAEvBE,IAAAA,SAAS,EAAE,KAFY;AAGvBJ,IAAAA,WAHuB;AAIvBK,IAAAA,KAAK,EAAEN,QAAQ,CAACM,KAJO;AAKvBC,IAAAA,aAAa,EAAEP,QAAQ,CAACO,aALD;AAMvBC,IAAAA,gBAAgB,EAAER,QAAQ,CAACQ,gBANJ;AAOvBC,IAAAA,UAAU,EAAET,QAAQ,CAACS,UAPE;AAQvBC,IAAAA,aAAa,EAAEV,QAAQ,CAACU;AARD,GAAxB;AAUA,QAAMC,aAAa,4BAAGX,QAAQ,CAACU,aAAZ,yEAA6BV,QAAQ,CAACS,UAAzD;AAEA,SACC,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAGT,QAAQ,CAACY,QADrB;AAEC,IAAA,KAAK,EAAGZ,QAAQ,CAACM,KAFlB;AAGC,IAAA,UAAU,EAAGN,QAAQ,CAACa,UAHvB;AAIC,IAAA,gBAAgB,EAAGb,QAAQ,CAACc,gBAJ7B;AAKC,IAAA,cAAc,EAAGd,QAAQ,CAACe;AAL3B,KAMMb,UANN;AAOC,IAAA,SAAS,EAAC;AAPX,MASC,4BAAC,oBAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,gBAAgB,EAAC,8DAFlB;AAGC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEc,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,4BAAC,kBAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,yBAAgBD,MAFjB;AAGC,QAAA,SAAS,EAAG,yBACX,sDADW,EAEX;AAAE,qBAAWA;AAAb,SAFW;AAHb,SAQC,4BAAC,gCAAD;AAAQ,QAAA,OAAO,EAAC;AAAhB,SACC,4BAAC,0BAAD;AACC,QAAA,SAAS,EAAC,6DADX;AAEC,QAAA,UAAU,EAAGL;AAFd,QADD,EAKC,4BAAC,oBAAD,QAAYX,QAAQ,CAACM,KAArB,CALD,CARD,CADc;AAAA,KAHhB;AAqBC,IAAA,aAAa,EAAG,MACf,4BAAC,gBAAD;AACC,MAAA,SAAS,EAAG,KADb;AAEC,MAAA,gCAAgC,MAFjC;AAGC,MAAA,iCAAiC,MAHlC;AAIC,MAAA,WAAW;AAJZ,OAKMF,eALN;AAtBF,IATD,CADD;AA2CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\nexport default function ToolsPanelColorDropdown( {\n\tsettings,\n\tenableAlpha,\n\t...otherProps\n} ) {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\tconst controlSettings = {\n\t\t...colorGradientSettings,\n\t\tclearable: false,\n\t\tenableAlpha,\n\t\tlabel: settings.label,\n\t\tonColorChange: settings.onColorChange,\n\t\tonGradientChange: settings.onGradientChange,\n\t\tcolorValue: settings.colorValue,\n\t\tgradientValue: settings.gradientValue,\n\t};\n\tconst selectedColor = settings.gradientValue ?? settings.colorValue;\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ settings.hasValue }\n\t\t\tlabel={ settings.label }\n\t\t\tonDeselect={ settings.onDeselect }\n\t\t\tisShownByDefault={ settings.isShownByDefault }\n\t\t\tresetAllFilter={ settings.resetAllFilter }\n\t\t\t{ ...otherProps }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tclassName=\"block-editor-tools-panel-color-dropdown\"\n\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\n\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\t\t\t\t\t\tcolorValue={ selectedColor }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<FlexItem>{ settings.label }</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t{ ...controlSettings }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}

package/build-module/components/colors-gradients/tools-panel-color-dropdown.js

@@ -1,75 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement } from "@wordpress/element";
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-/**
- * WordPress dependencies
- */
-
-import { Button, ColorIndicator, Dropdown, FlexItem, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-
-import ColorGradientControl from './control';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
-export default function ToolsPanelColorDropdown(_ref) {
-  var _settings$gradientVal;
-
-  let {
-    settings,
-    enableAlpha,
-    ...otherProps
-  } = _ref;
-  const colorGradientSettings = useMultipleOriginColorsAndGradients();
-  const controlSettings = { ...colorGradientSettings,
-    clearable: false,
-    enableAlpha,
-    label: settings.label,
-    onColorChange: settings.onColorChange,
-    onGradientChange: settings.onGradientChange,
-    colorValue: settings.colorValue,
-    gradientValue: settings.gradientValue
-  };
-  const selectedColor = (_settings$gradientVal = settings.gradientValue) !== null && _settings$gradientVal !== void 0 ? _settings$gradientVal : settings.colorValue;
-  return createElement(ToolsPanelItem, _extends({
-    hasValue: settings.hasValue,
-    label: settings.label,
-    onDeselect: settings.onDeselect,
-    isShownByDefault: settings.isShownByDefault,
-    resetAllFilter: settings.resetAllFilter
-  }, otherProps, {
-    className: "block-editor-tools-panel-color-gradient-settings__item"
-  }), createElement(Dropdown, {
-    className: "block-editor-tools-panel-color-dropdown",
-    contentClassName: "block-editor-panel-color-gradient-settings__dropdown-content",
-    renderToggle: _ref2 => {
-      let {
-        isOpen,
-        onToggle
-      } = _ref2;
-      return createElement(Button, {
-        onClick: onToggle,
-        "aria-expanded": isOpen,
-        className: classnames('block-editor-panel-color-gradient-settings__dropdown', {
-          'is-open': isOpen
-        })
-      }, createElement(HStack, {
-        justify: "flex-start"
-      }, createElement(ColorIndicator, {
-        className: "block-editor-panel-color-gradient-settings__color-indicator",
-        colorValue: selectedColor
-      }), createElement(FlexItem, null, settings.label)));
-    },
-    renderContent: () => createElement(ColorGradientControl, _extends({
-      showTitle: false,
-      __experimentalHasMultipleOrigins: true,
-      __experimentalIsRenderedInSidebar: true,
-      enableAlpha: true
-    }, controlSettings))
-  }));
-}
-//# sourceMappingURL=tools-panel-color-dropdown.js.map

package/build-module/components/colors-gradients/tools-panel-color-dropdown.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/tools-panel-color-dropdown.js"],"names":["classnames","Button","ColorIndicator","Dropdown","FlexItem","__experimentalHStack","HStack","__experimentalToolsPanelItem","ToolsPanelItem","ColorGradientControl","useMultipleOriginColorsAndGradients","ToolsPanelColorDropdown","settings","enableAlpha","otherProps","colorGradientSettings","controlSettings","clearable","label","onColorChange","onGradientChange","colorValue","gradientValue","selectedColor","hasValue","onDeselect","isShownByDefault","resetAllFilter","isOpen","onToggle"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SACCC,MADD,EAECC,cAFD,EAGCC,QAHD,EAICC,QAJD,EAKCC,oBAAoB,IAAIC,MALzB,EAMCC,4BAA4B,IAAIC,cANjC,QAOO,uBAPP;AASA;AACA;AACA;;AACA,OAAOC,oBAAP,MAAiC,WAAjC;AACA,OAAOC,mCAAP,MAAgD,4CAAhD;AAEA,eAAe,SAASC,uBAAT,OAIX;AAAA;;AAAA,MAJ6C;AAChDC,IAAAA,QADgD;AAEhDC,IAAAA,WAFgD;AAGhD,OAAGC;AAH6C,GAI7C;AACH,QAAMC,qBAAqB,GAAGL,mCAAmC,EAAjE;AACA,QAAMM,eAAe,GAAG,EACvB,GAAGD,qBADoB;AAEvBE,IAAAA,SAAS,EAAE,KAFY;AAGvBJ,IAAAA,WAHuB;AAIvBK,IAAAA,KAAK,EAAEN,QAAQ,CAACM,KAJO;AAKvBC,IAAAA,aAAa,EAAEP,QAAQ,CAACO,aALD;AAMvBC,IAAAA,gBAAgB,EAAER,QAAQ,CAACQ,gBANJ;AAOvBC,IAAAA,UAAU,EAAET,QAAQ,CAACS,UAPE;AAQvBC,IAAAA,aAAa,EAAEV,QAAQ,CAACU;AARD,GAAxB;AAUA,QAAMC,aAAa,4BAAGX,QAAQ,CAACU,aAAZ,yEAA6BV,QAAQ,CAACS,UAAzD;AAEA,SACC,cAAC,cAAD;AACC,IAAA,QAAQ,EAAGT,QAAQ,CAACY,QADrB;AAEC,IAAA,KAAK,EAAGZ,QAAQ,CAACM,KAFlB;AAGC,IAAA,UAAU,EAAGN,QAAQ,CAACa,UAHvB;AAIC,IAAA,gBAAgB,EAAGb,QAAQ,CAACc,gBAJ7B;AAKC,IAAA,cAAc,EAAGd,QAAQ,CAACe;AAL3B,KAMMb,UANN;AAOC,IAAA,SAAS,EAAC;AAPX,MASC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,yCADX;AAEC,IAAA,gBAAgB,EAAC,8DAFlB;AAGC,IAAA,YAAY,EAAG;AAAA,UAAE;AAAEc,QAAAA,MAAF;AAAUC,QAAAA;AAAV,OAAF;AAAA,aACd,cAAC,MAAD;AACC,QAAA,OAAO,EAAGA,QADX;AAEC,yBAAgBD,MAFjB;AAGC,QAAA,SAAS,EAAG5B,UAAU,CACrB,sDADqB,EAErB;AAAE,qBAAW4B;AAAb,SAFqB;AAHvB,SAQC,cAAC,MAAD;AAAQ,QAAA,OAAO,EAAC;AAAhB,SACC,cAAC,cAAD;AACC,QAAA,SAAS,EAAC,6DADX;AAEC,QAAA,UAAU,EAAGL;AAFd,QADD,EAKC,cAAC,QAAD,QAAYX,QAAQ,CAACM,KAArB,CALD,CARD,CADc;AAAA,KAHhB;AAqBC,IAAA,aAAa,EAAG,MACf,cAAC,oBAAD;AACC,MAAA,SAAS,EAAG,KADb;AAEC,MAAA,gCAAgC,MAFjC;AAGC,MAAA,iCAAiC,MAHlC;AAIC,MAAA,WAAW;AAJZ,OAKMF,eALN;AAtBF,IATD,CADD;AA2CA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tColorIndicator,\n\tDropdown,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ColorGradientControl from './control';\nimport useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';\n\nexport default function ToolsPanelColorDropdown( {\n\tsettings,\n\tenableAlpha,\n\t...otherProps\n} ) {\n\tconst colorGradientSettings = useMultipleOriginColorsAndGradients();\n\tconst controlSettings = {\n\t\t...colorGradientSettings,\n\t\tclearable: false,\n\t\tenableAlpha,\n\t\tlabel: settings.label,\n\t\tonColorChange: settings.onColorChange,\n\t\tonGradientChange: settings.onGradientChange,\n\t\tcolorValue: settings.colorValue,\n\t\tgradientValue: settings.gradientValue,\n\t};\n\tconst selectedColor = settings.gradientValue ?? settings.colorValue;\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\thasValue={ settings.hasValue }\n\t\t\tlabel={ settings.label }\n\t\t\tonDeselect={ settings.onDeselect }\n\t\t\tisShownByDefault={ settings.isShownByDefault }\n\t\t\tresetAllFilter={ settings.resetAllFilter }\n\t\t\t{ ...otherProps }\n\t\t\tclassName=\"block-editor-tools-panel-color-gradient-settings__item\"\n\t\t>\n\t\t\t<Dropdown\n\t\t\t\tclassName=\"block-editor-tools-panel-color-dropdown\"\n\t\t\t\tcontentClassName=\"block-editor-panel-color-gradient-settings__dropdown-content\"\n\t\t\t\trenderToggle={ ( { isOpen, onToggle } ) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ onToggle }\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-panel-color-gradient-settings__dropdown',\n\t\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t\t<ColorIndicator\n\t\t\t\t\t\t\t\tclassName=\"block-editor-panel-color-gradient-settings__color-indicator\"\n\t\t\t\t\t\t\t\tcolorValue={ selectedColor }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<FlexItem>{ settings.label }</FlexItem>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t\t\trenderContent={ () => (\n\t\t\t\t\t<ColorGradientControl\n\t\t\t\t\t\tshowTitle={ false }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\tenableAlpha\n\t\t\t\t\t\t{ ...controlSettings }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t/>\n\t\t</ToolsPanelItem>\n\t);\n}\n"]}

package/src/components/block-alignment-matrix-control/style.scss

@@ -1,10 +0,0 @@
-.block-editor-block-alignment-matrix-control__popover {
-	.components-popover__content {
-		min-width: 0;
-		width: auto;
-
-		> div {
-			padding: $grid-unit;
-		}
-	}
-}

package/src/components/colors-gradients/tools-panel-color-dropdown.js

@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	ColorIndicator,
-	Dropdown,
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import ColorGradientControl from './control';
-import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients';
-
-export default function ToolsPanelColorDropdown( {
-	settings,
-	enableAlpha,
-	...otherProps
-} ) {
-	const colorGradientSettings = useMultipleOriginColorsAndGradients();
-	const controlSettings = {
-		...colorGradientSettings,
-		clearable: false,
-		enableAlpha,
-		label: settings.label,
-		onColorChange: settings.onColorChange,
-		onGradientChange: settings.onGradientChange,
-		colorValue: settings.colorValue,
-		gradientValue: settings.gradientValue,
-	};
-	const selectedColor = settings.gradientValue ?? settings.colorValue;
-
-	return (
-		<ToolsPanelItem
-			hasValue={ settings.hasValue }
-			label={ settings.label }
-			onDeselect={ settings.onDeselect }
-			isShownByDefault={ settings.isShownByDefault }
-			resetAllFilter={ settings.resetAllFilter }
-			{ ...otherProps }
-			className="block-editor-tools-panel-color-gradient-settings__item"
-		>
-			<Dropdown
-				className="block-editor-tools-panel-color-dropdown"
-				contentClassName="block-editor-panel-color-gradient-settings__dropdown-content"
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<Button
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-						className={ classnames(
-							'block-editor-panel-color-gradient-settings__dropdown',
-							{ 'is-open': isOpen }
-						) }
-					>
-						<HStack justify="flex-start">
-							<ColorIndicator
-								className="block-editor-panel-color-gradient-settings__color-indicator"
-								colorValue={ selectedColor }
-							/>
-							<FlexItem>{ settings.label }</FlexItem>
-						</HStack>
-					</Button>
-				) }
-				renderContent={ () => (
-					<ColorGradientControl
-						showTitle={ false }
-						__experimentalHasMultipleOrigins
-						__experimentalIsRenderedInSidebar
-						enableAlpha
-						{ ...controlSettings }
-					/>
-				) }
-			/>
-		</ToolsPanelItem>
-	);
-}