WP Manifestindependent plugin directory
manifest / editor / basic-responsive-controls

Basic Responsive Controls

Responsive typography controls for the WordPress block editor.

by philhoyt · github.com/philhoyt/basic-responsive-controls · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/philhoyt/basic-responsive-controls/archive/refs/heads/main.zip

Readme

Basic Responsive Controls

A WordPress plugin that adds breakpoint-specific typography controls to the block editor. When previewing in Tablet or Mobile mode, dedicated controls appear for font size, text alignment, line height, and letter spacing — independently set per breakpoint.

On the frontend, scoped inline CSS is injected with the block output using media queries. No separate stylesheet required.

Features

  • Font size — independent values for tablet (max-width: 782px) and mobile (max-width: 480px). Supports all theme font size presets and custom CSS values (clamp(), rem, em, px, etc.).
  • Text alignment — per-breakpoint alignment (left, center, right, justify) via a toolbar control, visible only in Tablet or Mobile preview mode.
  • Line height — per-breakpoint line height using WordPress's native line height control.
  • Letter spacing — per-breakpoint letter spacing using WordPress's letter spacing control.
  • Reset controls — reset any individual breakpoint value, or reset all responsive settings at once from Desktop mode.
  • Live editor preview — changes are immediately reflected in the editor canvas.
  • Per-block scoped output — each block gets its own class and style rule; no global stylesheet.
  • No external JavaScript dependencies.

Supported Blocks

Block Font Size Text Align Line Height Letter Spacing
core/heading ✓ ✓ ✓ ✓
core/paragraph ✓ ✓ ✓ ✓

Requirements

  • WordPress 6.3+
  • PHP 7.4+

Installation

  1. Download the latest basic-responsive-controls.zip from the releases page.
  2. Go to Plugins > Add New Plugin > Upload Plugin and upload the zip file.
  3. Activate through the Plugins screen.
  4. Add a Heading or Paragraph block, switch to Tablet or Mobile preview mode, and open the Typography panel in the block inspector.

How It Works

Editor: A Higher-Order Component wraps supported block edit components. In Tablet or Mobile preview mode it renders breakpoint-specific controls for font size, line height, and letter spacing in the Typography panel, and a text alignment picker in the block toolbar. Changes are applied as inline styles to the block element in the editor canvas for immediate preview.

Frontend: A render_block filter adds a unique scoping class (phbrc-{id}) to the block's outermost element and prepends a `

Read the full README on GitHub →