MethodStyleTag
Overview
Generates scoped <style> elements for live editor preview by converting block attributes and responsive settings into CSS, with full support for media queries.
- File:
lib/blocks/components/MethodStyleTag.jsx - Type: Utility component (renders a
<style>element, no visible UI)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
clientId | string | (required) | The block’s WordPress clientId; used as data-method-id on the style tag |
attributes | object | (required) | The block’s full attributes object |
selectorMap | object | (required) | Maps CSS selectors to arrays of property keys to generate |
excludeBase | boolean | false | When true, skips base breakpoint CSS (used by Core Extensions) |
How It Works
MethodStyleTag is the bridge between block attributes and live editor styling. It renders a <style> element whose innerHTML is rebuilt via useEffect whenever attributes changes.
Selector Map
The selectorMap is an object where keys are CSS selectors and values are arrays of property keys to resolve:
JavaScript
const cssMap = {
[`#block-${clientId}`]: ['borderRadius', 'margin-top', 'margin-bottom', 'boxShadow'],
[`#block-${clientId} > .content`]: ['textColor', 'bgColor', 'padding-top', 'padding-bottom'],
[`#block-${clientId} a`]: ['linkColor'],
};CSS Generation Pipeline
- Base styles (unless
excludeBase): ProcessesresponsiveSettings.baseand top‑level color attributes - Mobile styles: Wrapped in
@media(max-width: {mobile_max}) - Tablet styles: Wrapped in
@media(min-width: {tablet_min}) and (max-width: {tablet_max}) - Wide styles: Wrapped in
@media(min-width: {wide_min})
Breakpoint values come from window.methodGlobalData.breakpoints.
Property Key Reference
The component supports a comprehensive set of property keys that map attribute data to CSS output:
Spacing Properties
| Key | Source | CSS Output |
|---|---|---|
padding-top | settings.padding.top | padding-top: {value} |
padding-bottom | settings.padding.bottom | padding-bottom: {value} |
padding-left | settings.padding.left | padding-left: {value} |
padding-right | settings.padding.right | padding-right: {value} |
margin-top | settings.margin.top | margin-top: {value} |
margin-bottom | settings.margin.bottom | margin-bottom: {value} |
margin-left | settings.margin.left | margin-left: {value} (skipped if starts with 0) |
margin-right | settings.margin.right | margin-right: {value} (skipped if starts with 0) |
gap | settings.gap | row-gap from .top; column-gap from .left/.right |
gapAsVars | settings.gap | --bs-gutter-y from .top; --bs-gutter-x from .left/.right |
Typography Properties
| Key | Source | CSS Output |
|---|---|---|
fontSize | settings.fontSize | font-size: {value} |
lineHeight | settings.lineHeight | line-height: {value} |
textAlign | settings.textAlign | text-align: {value} |
Color Properties (base breakpoint only)
| Key | Source | CSS Output |
|---|---|---|
textColor | attributes.textColor | color: {value} |
linkColor | attributes.linkColor | color: {value} |
bgColor | attributes.bgGradient \|\| attributes.bgColor | background: {value} |
bgShade | attributes.bgShadeGradient \|\| attributes.bgShadeColor | background: {value} |
Dimension Controls
| Key | Source | CSS Output |
|---|---|---|
height | settings.height | height: {value} (skipped if starts with 0) |
minHeight | settings.minHeight | min-height: {value} (skipped if starts with 0) |
width | settings.width | width: {value} (skipped if starts with 0) |
minWidth | settings.minWidth | min-width: {value} (skipped if starts with 0) |
Border Properties
| Key | Source | CSS Output |
|---|---|---|
border | settings.border | Uniform: border: {width} {style} {color}. Per‑side: individual border-top, etc. |
borderRadius | settings.borderRadius | Object: per‑corner properties. String: single border-radius |
Layout Properties
| Key | Source | CSS Output |
|---|---|---|
alignItems | settings.alignItems | align-items: {value} |
justifyContent | settings.justifyContent | justify-content: {value} |
flexDirection | settings.flexDirection | flex-direction: {value} (defaults to row) |
order | settings.order | order: {value} (skipped if starts with 0) |
Background Properties (base or customBg breakpoints)
| Key | Source | CSS Output |
|---|---|---|
bgImg | attributes.bgImg[settings.bgImgSize].url | background-image: url(...) |
bgPosition | settings.bgImgAlign + offsets | background-position: {x} {xOffset} {y} {yOffset} |
bgSize | settings.bgDisplaySize | background-size: cover\|contain\|{w} {h} |
bgRepeat | settings.bgRepeat | background-repeat: {value} (defaults to no-repeat) |
Special Properties
| Key | Source | CSS Output |
|---|---|---|
boxShadow | settings.shadows array | box-shadow: {layer1}, {layer2}, ... (base only) |
aspectRatio | settings.aspectUses + sub‑keys | Height mode: height + padding-top: 0. Percentage mode: padding-top + height: 0 |
equalDimensions | settings.dimensions | width: {value}; height: {value} |
Usage
Every Method block that uses responsive styling includes a MethodStyleTag:
JavaScript
<MethodStyleTag
clientId={clientId}
attributes={attributes}
selectorMap={cssMap}
/>Core Extensions pass excludeBase={true} to avoid conflicting with WordPress core’s own base styling.