Section

Overview

A full‑width content wrapper with robust styling and layout controls, designed to define major sections of a page.

Block name: method/section
Category: method-layout-blocks
Supports: align (wide, full)
Render type: Dynamic (PHP render_callback)
Inner blocks: Yes — accepts any blocks

Usage

The Section block is the primary structural building block for full‑width page layouts. It outputs a <div> wrapper with layered background support (color, image, shade overlay), optional parallax and video backgrounds via Jarallax, and inner content that can optionally be constrained to the theme’s content width.

Insert a Section block, set it to Full Width alignment, and begin adding content inside it. Use the Inspector panel to configure spacing, background media, colors, dimensions, and responsive overrides.

When a Section is set to Full Width alignment, an Unconstrain Content toggle becomes available. When disabled (default), inner content respects WordPress’s constrained layout (is-layout-constrained with has-global-padding). When enabled, inner content stretches edge‑to‑edge.

Attributes

Attribute	Type	Default	Description
`unconstrained`	`boolean`	`false`	When `true`, disables constrained layout on full‑width sections
`bgVideo`	`string`	—	Video URL for Jarallax background video (YouTube, Vimeo, or direct)
`useParallax`	`boolean`	`false`	Enables Jarallax parallax scrolling on the background image
`textColor`	`string`	—	Text color value
`linkColor`	`string`	—	Link color value
`bgColor`	`string`	—	Background color or gradient value
`bgGradient`	`string`	—	Background gradient value
`bgShadeColor`	`string`	—	Shade/overlay color value
`bgShadeGradient`	`string`	—	Shade/overlay gradient value
`bgImg`	`object`	`{ id: "" }`	Background image object containing size variants with URLs
`bgSize`	`string`	—	Background image CSS size (`cover`, `contain`, etc.)
`bgImgAlign`	`string`	`"center center"`	Background image CSS position
`responsiveSettings`	`object`	(see below)	Per‑breakpoint settings for spacing, typography, dimensions, etc.

responsiveSettings Structure

JSON

{
  "base":   { "enabled": true },
  "mobile": { "enabled": false, "customBg": false },
  "tablet": { "enabled": false, "customBg": false },
  "wide":   { "enabled": false, "customBg": false }
}

{
  "base":   { "enabled": true },
  "mobile": { "enabled": false, "customBg": false },
  "tablet": { "enabled": false, "customBg": false },
  "wide":   { "enabled": false, "customBg": false }
}

Each breakpoint can contain keys for padding, margin, fontSize, lineHeight, textAlign, height, minHeight, alignItems, border, borderRadius, bgImg, bgPosition, bgSize, bgRepeat, and boxShadow.

Control Sets

The Section block uses the following shared control components from lib/blocks/components:

Component	Panel	Breakpoints	Notes
`MethodAlignmentControls`	Alignment	base, mobile, tablet, wide	`alignItems` only; labeled “Content Vertical Alignment”
`MethodSpacingControls`	Spacing	base, mobile, tablet, wide	Padding (all 4 sides) + Margin (all 4 sides)
`MethodDimensionControls`	Dimensions	base, mobile, tablet, wide	`height`, `minHeight`, `mhGroup`
`MethodTypographyControls`	Typography	base only	—
`MethodBorderControls`	Border	base, mobile, tablet, wide	—
`MethodShadowControl`	Shadow	base only	—
`MethodBackgroundControls`	Background Media	base, mobile, tablet, wide	`includeVideo` enabled on base
`MethodColorControls`	Colors	global	`textColor`, `linkColor`, `bgColor`, `bgShadeColor`
`MethodResponsiveTabs`	Responsive	mobile, tablet, wide	Wraps per‑breakpoint controls
`MethodStyleTag`	—	—	Generates scoped `<style>` for editor preview

Hooks

Hook	Type	Arguments
`useResponsiveSetter`	React hook	`(attributes, setAttributes)` — returns breakpoint‑aware setter function
`useMergeRefs`	WP Compose hook	Merges `blockProps.ref` with Jarallax ref to preserve toolbar functionality

Data & Dependencies

Jarallax: Both jarallax.min.js and jarallax-video.min.js are enqueued on all pages via method_section_enqueue_assets. Jarallax is initialized in the editor via a useEffect with retry logic (up to 20 attempts at 150ms intervals).
CSS Collector: Frontend CSS is generated by method_get_block_responsive_styles() and collected via method_collect_css(), which consolidates per‑block <style> tags into a single output.

Frontend Rendering

The PHP render callback generates a unique ID (uniqid('method-')), builds a CSS selector map, passes it through Method’s responsive style system, and outputs:

HTML

<div class="method-section" id="method-{id}">
  <div class="method-section-content {jarallax?}">
    {jarallax-img?}
    <div class="method-section-bgimg"> </div>
    <div class="method-section-shade"> </div>
    <div class="method-section-content-inner {constrained-classes?}">
      {inner block content}
    </div>
  </div>
</div>

<div class="method-section" id="method-{id}">
  <div class="method-section-content {jarallax?}">
    {jarallax-img?}
    <div class="method-section-bgimg"> </div>
    <div class="method-section-shade"> </div>
    <div class="method-section-content-inner {constrained-classes?}">
      {inner block content}
    </div>
  </div>
</div>

When useParallax or bgVideo is set, the background image is rendered as an <img class="jarallax-img"> element instead of a CSS background-image. The method-section-content div gains a jarallax class and data-jarallax / data-video-src attributes.

Filters

This block does not currently expose dedicated PHP filters. Customization is achieved through CSS targeting the generated #method-{id} selectors.