Container

Overview

A highly versatile content block for building everything from simple wrappers to complex callouts and link blocks, with extensive controls for styling, layout, and interactivity.

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

Usage

The Container block is a general‑purpose wrapper that can function as a styled content card, a clickable link block, a hero unit with a background image/video, or a simple colored box. It shares much of the Section block’s background media system but adds optional link wrapping — when a link is set, the entire container renders as an <a> tag instead of a <div>.

Insert a Container, add inner content, and use the Inspector controls to configure background images, overlay shades, spacing, borders, shadows, colors, and responsive overrides. Use the block toolbar’s link control to make the entire container clickable.

Attributes

responsiveSettings Structure

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

Beyond the keys every breakpoint-aware block shares (spacing, typography, dimensions, border, background image settings, alignItems), the Container reads overflow and zIndex (base, from Additional Options), mh (base, the MatchHeight group, printed as data-mh), aspectRatioX / aspectRatioY (emitted as aspect-ratio on the content element) and backdrop (a filter map emitted as backdrop-filter; see MethodBackdropControls).

Control Sets

Data & Dependencies

• Jarallax: Both jarallax.min.js and jarallax-video.min.js are enqueued via method_container_enqueue_assets. Editor initialization uses the same retry‑based useEffect pattern as the Section block.
• Link behavior: When link.url is set, both editor and frontend render the block root as an <a> tag. The Color Controls panel adapts to hide the linkColor option (since the entire block becomes the link). The link color is applied with a:not(.method-theme-button), so Theme Buttons inside the container keep their own colors.
• MatchHeight: a base mh group name is printed as data-mh on .method-container-content, which the theme’s matchHeight script reads to equalise containers that share a group.

Frontend Rendering

<!-- Without link -->
<div class="method-container" id="method-{id}">
  <div class="method-container-content {jarallax?}">
    {jarallax-img?}
    <div class="method-container-bgimg"> </div>
    <div class="method-container-shade"> </div>
    {inner block content}
  </div>
</div>

<!-- With link -->
<a target="_self|_blank" href="{url}" class="method-container" id="method-{id}">
  <!-- same inner structure -->
</a>

Filters

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

Changelog