MethodShadowControl

Overview

Multi‑layer box shadow editor with per‑layer controls for offset, blur, spread, color, and inset.

File: lib/blocks/components/MethodShadowControl.jsx
Panel label: “Shadow”
Base breakpoint only — this component returns null for non‑base breakpoints.

Prop	Type	Default	Description
`breakpoint`	`string`	(required)	Must be `base`; returns `null` otherwise
`attributes`	`object`	(required)	The block’s full `attributes` object
`setAttributes`	`function`	(required)	WordPress `setAttributes` function

Each shadow layer has the following properties:

Property	Type	Default	Range	Description
`x`	`number`	`0`	`-125` to `125`	Horizontal offset in pixels
`y`	`number`	`4`	`-125` to `125`	Vertical offset in pixels
`blur`	`number`	`8`	`0` to `200`	Blur radius in pixels
`spread`	`number`	`0`	`-64` to `64`	Spread radius in pixels
`color`	`string`	`'rgba(0,0,0,0.15)'`	—	Shadow color (supports alpha via ColorPicker)
`inset`	`boolean`	`false`	—	Whether the shadow is inset

Each property is controlled by its own RangeControl (with labeled marks) or a ColorPicker. The inset toggle is a CheckboxControl.

Add Shadow Layer: A “Add Shadow Layer” button appends a new layer with default values.
Remove: Each layer (when more than one exists) shows a “Remove” button.
Last layer removal: When the last layer is removed, the shadows key is deleted entirely from the breakpoint settings.
Multiple layers: Shadow layers are rendered with visual dividers between them and “Shadow {n}” labels.

MethodStyleTag processes the shadows array into a comma‑separated box-shadow CSS value:

CSS

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15), inset 2px 2px 4px 0px rgba(0,0,0,0.1);

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15), inset 2px 2px 4px 0px rgba(0,0,0,0.1);

Box Shadow onSelect: Initializes shadows to a single‑element array with default values
Box Shadow onDeselect: Removes the shadows key entirely
resetAll: Same as onDeselect