MethodColorControls
Overview
Color and gradient pickers for text, links, backgrounds, and shade overlays, using WordPress’s native PanelColorGradientSettings.
- File:
lib/blocks/components/MethodColorControls.js - Panel label: “Color Settings” (customizable via
titleprop)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
attributes | object | (required) | The block’s full attributes object |
setAttributes | function | (required) | WordPress setAttributes function |
title | string | 'Color Settings' | Panel heading text |
include | string[] | ['textColor', 'linkColor', 'linkHoverColor', 'linkActiveColor', 'bgColor', 'bgShadeColor'] | Which color controls to render |
Controls
Unlike other Method components, MethodColorControls does not use responsiveSettings. This is due to limitations with the PanelColorGradientSettings component and may change in future releases.
Color values are stored as top‑level block attributes and apply globally (not per‑breakpoint).
| Control Key | Attribute(s) | Supports Gradient | Label |
|---|---|---|---|
textColor | textColor | No | “Text” |
linkColor | linkColor | No | “Link” |
linkHoverColor | linkHoverColor | No | “Link (Hover)” |
linkActiveColor | linkActiveColor | No | “Link (Active)” |
bgColor | bgColor, bgGradient | Yes | “Background” |
bgShadeColor | bgShadeColor, bgShadeGradient | Yes | “Background Shade” |
Gradient Support
The bgColor and bgShadeColor controls expose both solid color and gradient pickers. When a gradient is selected, it’s stored in the companion *Gradient attribute (e.g., bgGradient), and MethodStyleTag prioritizes the gradient over the solid color when generating CSS.
Alpha Support
All color pickers have enableAlpha={true}, allowing transparency values.
Rendering
The component uses PanelColorGradientSettings from @wordpress/block-editor with __experimentalIsRenderedInSidebar={true} for proper Inspector integration.
Usage by Blocks
| Block | Included Controls | Notes |
|---|---|---|
| Section | textColor, linkColor, bgColor, bgShadeColor | Full set |
| Container | textColor, bgColor, bgShadeColor + conditional linkColor | linkColor hidden when block is itself a link |
| Advanced Grid Column | textColor, linkColor | — |
| Breadcrumb | textColor, linkColor | — |
| Button | textColor, bgColor | — |
| Fitted Image | bgColor, bgShadeColor | — |
| Social Nav | Dynamic based on style variant | linkColor always; bgColor for enclosed; textColor for with‑text |
| Swiper Gallery | bgColor, bgShadeColor | — |