MethodResponsiveTabs

 
 
 
 

Overview

Tabbed UI panel for mobile, tablet, and ultrawide breakpoint overrides with per‑breakpoint enable toggles.

  • File: lib/blocks/components/MethodResponsive.js
  • Panel label: “Responsive Behavior”
  • Panel default state: Closed (initialOpen={false})

Props

PropTypeDefaultDescription
attributesobject(required)The block’s full attributes object
setAttributesfunction(required)WordPress setAttributes function
renderControlsobject{}Object with keys mobile, tablet, wide containing React elements to render for each tab

Behavior

MethodResponsiveTabs provides the standard UI for Method’s responsive override system. It renders a TabPanel inside a PanelBody with three tabs — one for each non‑base breakpoint.

Tab Configuration

TabTitleIconHelp Text
Mobile“Mobile”smartphone0 - {mobile_max}
Tablet“Tablet”tablet{tablet_min} - {tablet_max}
Ultrawide“Ultrawide”desktop{wide_min}+

Breakpoint values are read from window.methodGlobalData.breakpoints.

Enable/Disable Toggle

Each tab renders a ToggleControl at the top:

  • Label: "{Tab Title} overrides enabled" / "{Tab Title} overrides disabled"
  • Help: Shows the breakpoint range (e.g., "0 - 767px")
  • Attribute: responsiveSettings.{breakpoint}.enabled

When the toggle is off, the tab’s custom controls are hidden. When toggled on, the renderControls[tab.name] content is rendered below.

Tab Styling

Tabs with enabled: true receive additional CSS classes (tab-enabled, tab-enabled-{breakpoint}) for visual indication in the editor UI.

Pattern

The typical usage pattern passes breakpoint‑specific instances of Method’s control components:

HTML
<MethodResponsiveTabs
  attributes={attributes}
  setAttributes={setAttributes}
  renderControls={{
    mobile: (
      <>
        <MethodSpacingControls breakpoint="mobile" ... />
        <MethodTypographyControls breakpoint="mobile" ... />
      </>
    ),
    tablet: (
      <>
        <MethodSpacingControls breakpoint="tablet" ... />
        <MethodTypographyControls breakpoint="tablet" ... />
      </>
    ),
    wide: (
      <>
        <MethodSpacingControls breakpoint="wide" ... />
        <MethodTypographyControls breakpoint="wide" ... />
      </>
    ),
  }}
/>

Usage

Used by every Method block that supports responsive overrides. The base breakpoint controls live outside MethodResponsiveTabs in the block’s main Inspector; only the override breakpoints live inside the tabs.