Image
 
 
 
 

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

AttributeTypeDefaultDescription
bgVideostring—Video URL for Jarallax background video
useParallaxbooleanfalseEnables parallax scrolling on the background image
textColorstring—Text color value
linkColorstring—Link color value (hidden when container is itself a link)
bgColorstring—Background color value
bgGradientstring—Background gradient value
bgShadeColorstring—Shade/overlay color
bgShadeGradientstring—Shade/overlay gradient
bgImgobject{ id: "" }Background image object with size variants
bgSizestring—Background image CSS size
bgImgAlignstring"center center"Background image CSS position
linkobject—Link object with url, opensInNewTab properties
responsiveSettingsobject(see below)Per‑breakpoint settings

responsiveSettings Structure

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

Control Sets

ComponentPanelBreakpointsNotes
MethodAlignmentControlsAlignmentbase, mobile, tablet, widealignItems only; labeled “Content Vertical Alignment”
MethodSpacingControlsSpacingbase, mobile, tablet, widePadding (all 4 sides) + Margin (all 4 sides)
MethodDimensionControlsDimensionsbase, mobile, tablet, wideheight, minHeight, mhGroup
MethodTypographyControlsTypographybase, mobile, tablet, wide—
MethodBorderControlsBorderbase, mobile, tablet, wide—
MethodShadowControlShadowbase only—
MethodBackgroundControlsBackground Mediabase, mobile, tablet, wideincludeVideo enabled on base
MethodColorControlsColorsglobalWhen linked: textColor, bgColor, bgShadeColor. When unlinked: adds linkColor
MethodLinkToolbarToolbar—Block toolbar link popover
MethodResponsiveTabsResponsivemobile, tablet, wideWraps per‑breakpoint controls
MethodStyleTag——Scoped editor <style>

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

Frontend Rendering

HTML
<!-- 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.