Component & Hook Reference

 
 
 
 

Documentation for the shared control sets, components, and hooks in lib/blocks/components and lib/blocks/hooks.

These reusable React components form Method’s block design system. They are imported by individual blocks to provide consistent, breakpoint‑aware Inspector panel controls. All components read from and write to the shared responsiveSettings attribute structure, and most use WordPress’s ToolsPanel / ToolsPanelItem pattern for opt‑in controls with per‑item reset.

Control Set Components

 
 

MethodAddtControls

Additional controls to include as needed.

 
 

MethodAlignmentControls

Flex alignment, justification, and direction

 
 

MethodSpacingControls

Padding, margin, and gap with BoxControl

 
 

MethodTypographyControls

Font size, line height, and text alignment

 
 

MethodColorControls

Text, link, background, and shade color/gradient pickers

 
 

MethodBackgroundControls

Image/video background with parallax, position, size, and repeat

 
 

MethodBorderControls

Border and border‑radius

 
 

MethodShadowControl

Multi‑layer box shadow editor

 
 

MethodDimensionControls

Width, height, min dimensions, and MatchHeight groups

 
 

MethodAspectRatio

Aspect ratio, fixed height, and percentage sizing

Utility Components

MethodStyleTag

Generates scoped <style> elements for live editor preview

MethodResponsiveTabs

Tabbed UI for mobile/tablet/wide breakpoint overrides

MethodOptInControl

Add/remove pattern for optional responsive controls

MethodLinkToolbar

Block toolbar link popover with search

Hooks

useResponsiveSetter

Curried setter for responsiveSettings breakpoint keys