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

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/philhoyt/basic-responsive-controls/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/philhoyt/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 `