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
• Uses context: postId, postType (for the featured-image background)

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

responsiveSettings Structure

{
  "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, featuredImageSize, backdrop (a filter map for the shade overlay, see MethodBackdropControls) and boxShadow; zIndex and overflow at the base breakpoint, from Additional Options.

Control Sets

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

Hooks

Data & Dependencies

• Vegas: inc/vegas/vegas-global.js (as a module) and vegas.min.css are enqueued for the slideshow background; the render prints the slides as data-vegas-slides on .method-section-bgimg and the slideshow fades between images on a 10-second interval.
• Featured image: with useFeaturedImage the render reads postId from block context and prints get_the_post_thumbnail() at the base featuredImageSize as the jarallax-img, or resolves it per breakpoint through method_get_block_responsive_styles(); the editor preview uses the FeaturedImage component.
• 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:

<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>

The link color is applied with a:not(.method-theme-button), so Theme Buttons inside a section keep their own colors; zIndex and overflow are emitted on the wrapper, and backdrop as backdrop-filter on .method-section-shade.

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.

Changelog