MethodBackdropControls

Overview

Backdrop filter controls — blur, brightness, contrast, saturation, hue rotation, grayscale, invert and sepia — applied to whatever shows through a semi-transparent element, per breakpoint.

• File: lib/blocks/components/MethodBackdropControls.js
• Panel label: “Background Filters” by default; the Section block names it “Background Overlay Filters”
• Breakpoints: Any — each instance edits one tier of responsiveSettings; blocks place one at the base breakpoint and one in each responsive tab
• Settings key: responsiveSettings.{breakpoint}.backdrop

Props

Controls

Every filter is a ToolsPanelItem; nothing is stored until it is switched on. The stored value is the CSS function argument, so what you see in the input is what reaches the stylesheet.

Blur

• Settings key: backdrop.blur
• UI: UnitControl, px only, minimum 0
• On select: "0px"
• CSS: blur(…)

Brightness, Contrast, Saturation

• Settings keys: backdrop.brightness, backdrop.contrast, backdrop.saturate
• UI: UnitControl, % only, minimum 0
• On select: "100%" — the neutral value
• CSS: brightness(…), contrast(…), saturate(…)

Hue Rotate

• Settings key: backdrop.hueRotate
• UI: UnitControl, deg only, 0–360
• On select: "0deg"
• CSS: hue-rotate(…) — the one key that is renamed on output

Grayscale, Invert, Sepia

• Settings keys: backdrop.grayscale, backdrop.invert, backdrop.sepia
• UI: RangeControl, 0–1 in steps of 0.01, stored as a number
• On select: 0
• CSS: grayscale(…), invert(…), sepia(…)

ToolsPanel Behavior

• onSelect: writes the neutral starting value shown above into backdrop for the tier.
• onDeselect: deletes that one key. When the last key goes, the backdrop object itself is removed from the tier rather than left empty.
• Reset all: removes backdrop from the tier.
• The component writes only responsiveSettings[breakpoint].backdrop; every other key of the tier is spread through untouched.

CSS Output

method_get_block_responsive_styles() (through method_get_block_css_declarations() in lib/blocks.php) and MethodStyleTag both turn the object into one backdrop-filter declaration: each set key becomes name(value), joined with spaces, for the tier’s media query.

/* responsiveSettings.base.backdrop = { "blur": "6px", "saturate": "140%", "grayscale": 0.5 } */
#method-68f1b2c3a4d5e > .method-container-content {
    backdrop-filter: blur(6px) saturate(140%) grayscale(0.5);
}

The block decides which element receives it by listing backdrop in its CSS map: Container applies it to > .method-container-content, Section to its shade overlay > .method-section-content > .method-section-shade, so the filter acts on what shows through the overlay.

One difference between the two renderers: PHP skips a key whose value is empty(), so a range filter left at 0 is dropped on the page, while the editor only drops null, undefined and "" and will preview grayscale(0). Both are visually neutral.

Usage by Blocks

Changelog