Draft moving Cover overlay color and opacity controls to color panel

WordPress · May 17, 2022 · 700c423 · 700c423
1 parent 78375e9
commit 700c423
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -51,6 +51,7 @@ export { default as __experimentalTextTransformControl } from './text-transform-
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
+export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,

diff --git a/packages/block-library/src/cover/edit/inspector-controls.js b/packages/block-library/src/cover/edit/inspector-controls.js
@@ -21,8 +21,9 @@ import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSetting,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -138,6 +139,9 @@ export default function CoverInspectorControls( {
 			: [ coverRef.current.style, 'backgroundPosition' ];
 		styleOfRef[ property ] = mediaPosition( value );
 	};
+
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
 		<>
 			<InspectorControls>
@@ -220,20 +224,47 @@ export default function CoverInspectorControls( {
 						</PanelRow>
 					</PanelBody>
 				) }
-				<PanelColorGradientSettings
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins
+					__experimentalIsItemGroup={ false }
 					__experimentalIsRenderedInSidebar
-					title={ __( 'Overlay' ) }
-					initialOpen={ true }
 					settings={ [
 						{
 							colorValue: overlayColor.color,
 							gradientValue,
+							label: __( 'Overlay' ),
 							onColorChange: setOverlayColor,
 							onGradientChange: setGradient,
-							label: __( 'Color' ),
+							isShownByDefault: true,
+							hasValue: () =>
+								!! overlayColor.color || !! gradientValue,
+							onDeselect: () => {
+								setOverlayColor( undefined );
+								setGradient( undefined );
+							},
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
 						},
 					] }
+					panelId={ clientId }
+					enableAlpha={ true }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => !! dimRatio }
+					label={ __( 'Opacity' ) }
+					onDeselect={ () =>
+						setAttributes( { dimRatio: undefined } )
+					}
+					resetAllFilter={ () => ( { dimRatio: undefined } ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
 					<RangeControl
 						label={ __( 'Opacity' ) }
@@ -248,7 +279,7 @@ export default function CoverInspectorControls( {
 						step={ 10 }
 						required
 					/>
-				</PanelColorGradientSettings>
+				</ToolsPanelItem>
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="dimensions">
 				<ToolsPanelItem

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -98,3 +98,7 @@
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
 	background-attachment: scroll;
 }
+
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+	margin-top: $grid-unit-30;
+}