diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
index 9c018f6c649c4..2fdd88fa4dd18 100644
--- a/packages/block-editor/src/hooks/color-panel.js
+++ b/packages/block-editor/src/hooks/color-panel.js
@@ -2,29 +2,31 @@
* WordPress dependencies
*/
import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
-import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
import ContrastChecker from '../components/contrast-checker';
-import InspectorControls from '../components/inspector-controls';
import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
+import ColorGradientControl from '../components/colors-gradients/control';
+import useCommonSingleMultipleSelects from '../components/colors-gradients/use-common-single-multiple-selects';
+import useSetting from '../components/use-setting';
function getComputedStyle( node ) {
return node.ownerDocument.defaultView.getComputedStyle( node );
}
export default function ColorPanel( {
- settings,
+ setting,
clientId,
enableContrastChecking = true,
- showTitle = true,
} ) {
const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
const [ detectedColor, setDetectedColor ] = useState();
const ref = useBlockRef( clientId );
+ const colorGradientSettings = useCommonSingleMultipleSelects();
+ colorGradientSettings.colors = useSetting( 'color.palette' );
+ colorGradientSettings.gradients = useSetting( 'color.gradients' );
useEffect( () => {
if ( ! enableContrastChecking ) {
@@ -54,22 +56,18 @@ export default function ColorPanel( {
} );
return (
-
-
- { enableContrastChecking && (
-
- ) }
-
-
+
+
+ { enableContrastChecking && (
+
+ ) }
+
);
}
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
index 6dc0fe991a2c6..6648c042028ed 100644
--- a/packages/block-editor/src/hooks/color.js
+++ b/packages/block-editor/src/hooks/color.js
@@ -12,6 +12,15 @@ import { getBlockSupport } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useRef, useEffect, useMemo, Platform } from '@wordpress/element';
import { createHigherOrderComponent } from '@wordpress/compose';
+import {
+ __experimentalItemGroup as ItemGroup,
+ __experimentalItem as Item,
+ __experimentalHStack as HStack,
+ FlexItem,
+ ColorIndicator,
+ PanelBody,
+ Dropdown,
+} from '@wordpress/components';
/**
* Internal dependencies
@@ -28,6 +37,7 @@ import {
} from '../components/gradients';
import { cleanEmptyObject } from './utils';
import ColorPanel from './color-panel';
+import InspectorControls from '../components/inspector-controls';
import useSetting from '../components/use-setting';
export const COLOR_SUPPORT_KEY = 'color';
@@ -294,6 +304,24 @@ export function ColorEdit( props ) {
} else if ( hasGradientColor ) {
gradientValue = style?.color?.gradient;
}
+ const backgroundValue = hasBackgroundColor
+ ? getColorObjectByAttributeValues(
+ allSolids,
+ backgroundColor,
+ style?.color?.background
+ ).color
+ : undefined;
+ const textColorValue = getColorObjectByAttributeValues(
+ allSolids,
+ textColor,
+ style?.color?.text
+ ).color;
+ const linkColorValue = hasLinkColor
+ ? getLinkColorFromAttributeValue(
+ allSolids,
+ style?.elements?.link?.color?.text
+ )
+ : undefined;
const onChangeColor = ( name ) => ( value ) => {
const colorObject = getColorObjectByColorValue( allSolids, value );
@@ -371,61 +399,132 @@ export function ColorEdit( props ) {
};
return (
-
+
+
+
+ { ( hasBackgroundColor || hasGradientColor ) && (
+ {
+ return (
+ -
+
+
+
+
+
+ { __( 'Background' ) }
+
+
+
+ );
+ } }
+ renderContent={ () => (
+
+ ) }
+ />
+ ) }
+ { hasTextColor && (
+ (
+ -
+
+
+
+
+ { __( 'Text' ) }
+
+
+ ) }
+ renderContent={ () => (
+
+ ) }
+ />
+ ) }
+ { hasLinkColor && (
+ (
+ -
+
+
+
+
+ { __( 'Links' ) }
+
+
+ ) }
+ renderContent={ () => (
+
+ ) }
+ />
+ ) }
+
+
+
);
}
diff --git a/packages/block-editor/src/hooks/color.scss b/packages/block-editor/src/hooks/color.scss
new file mode 100644
index 0000000000000..e7ff48d9b0643
--- /dev/null
+++ b/packages/block-editor/src/hooks/color.scss
@@ -0,0 +1,33 @@
+.block-editor__hooks-colors-panel {
+ .components-dropdown {
+ display: block;
+ }
+
+ // Allow horizontal overflow so the size-increasing color indicators don't cause a scrollbar.
+ .components-navigator-screen {
+ overflow-x: visible;
+ }
+
+ // @todo: this can be removed when https://github.com/WordPress/gutenberg/pull/37028 lands.
+ .component-color-indicator {
+ margin-left: 0;
+ display: block;
+ border-radius: 50%;
+ border: 0;
+ height: 24px;
+ width: 24px;
+ padding: 0;
+ background-image:
+ repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200),
+ repeating-linear-gradient(45deg, $gray-200 25%, transparent 25%, transparent 75%, $gray-200 75%, $gray-200);
+ background-position: 0 0, 25px 25px;
+ background-size: calc(2 * 5px) calc(2 * 5px);
+ }
+}
+
+@include break-medium() {
+ .block-editor__hooks-colors-panel__dropdown .components-popover__content {
+ margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 } !important;
+ margin-top: #{ -($grid-unit-60 + $grid-unit-15) } !important;
+ }
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index 6f20a3b1b2901..fae1c7053c8e6 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -57,6 +57,7 @@
@import "./hooks/border.scss";
@import "./hooks/dimensions.scss";
@import "./hooks/typography.scss";
+@import "./hooks/color.scss";
@import "./components/block-toolbar/style.scss";
@import "./components/inserter/style.scss";
diff --git a/packages/components/src/panel/style.scss b/packages/components/src/panel/style.scss
index 890a72c6add48..0c4fbc98da46f 100644
--- a/packages/components/src/panel/style.scss
+++ b/packages/components/src/panel/style.scss
@@ -28,6 +28,11 @@
&.is-opened {
padding: $grid-unit-20;
}
+
+ // Don't cascade the padding into nested panels.
+ .components-panel__body {
+ padding: 0;
+ }
}
.components-panel__header {