Responsive Settings

Disclaimer

This extension is currently under active development and is not ready for production use. Parts of this documentation may be incomplete, outdated, or subject to change without notice.

Responsive Settings adds device-specific editing to the Gutenberg block editor.

Desktop is the base layer. Tablet and Mobile store only differences as overrides.

Features

• Device-aware editing workflow (Desktop / Tablet / Mobile)
• Dedicated “Overrides” sidebar in the editor
• Per-setting override summaries
• One-click removal of individual overrides
• List View indicator for blocks containing responsive data
• Automatic setting availability based on supported block types

Requirements

• WordPress 5.8+
• PHP 8.2+

Installation

1. Copy this plugin to /wp-content/plugins/responsive-settings.
2. Activate Responsive Settings in the WordPress admin.

Quick Start

1. Open the block editor.
2. Select a block.
3. Open the Overrides sidebar.
4. Switch preview to Tablet or Mobile.
5. Edit supported block settings.

Only changed values are saved in attributes.responsive.

Built-in Settings

• spacing
• layout
• typography
• alignment
• color
• border

Project Structure

• app/ — PHP core (registration, validation, rendering)
• sources/ — editor-side JavaScript/SCSS
• settings/ — setting definitions (setting.json) and CSS generators (css.php)

Define a Custom Responsive Setting

Create a folder:

settings/{setting-key}/

with at least:

• setting.json
• css.php

Optional files:

• custom editor interceptor script (declared via interceptor)
• editor stylesheet (declared via editorStyle, defaults to editor.css)

setting.json example

{
  "key": "shadow",
  "label": "Shadow",
  "description": "Responsive shadow overrides",
  "blockSupports": ["*"],
  "properties": ["style.shadow"],
  "propertyLabels": {
    "style.shadow": "Shadow"
  },
  "badge": {
    "mode": "both",
    "targets": ["style.shadow"]
  },
  "css": "css.php",
  "interceptor": "interceptor.js",
  "editorStyle": "editor.css"
}

Notes:

• properties accepts dot paths (for example style.spacing.padding).
• Dot paths are normalized automatically for editor mapping.
• blockSupports: ["*"] applies to all core blocks.

css.php example

css.php must return a callable.

<?php

return function( $data, $block_name = '', $block_context = [] ) {
	if ( ! is_array( $data ) || empty( $data['shadow'] ) ) {
		return '';
	}

	return '    box-shadow: ' . esc_attr( $data['shadow'] ) . ";\n";
};

Arguments:

1. $data — setting data for the current device
2. $block_name — current block name
3. $block_context — contextual data for rendering

Runtime JS API

The plugin exposes a browser API:

• window.responsiveSettingsApi.registerSetting(key, config)
• window.responsiveSettingsApi.registerInterceptor(key, callback)

Use this only when you need runtime integrations outside the folder-based settings/ registration.

Development

Install dependencies:

npm install

Available scripts:

• npm run start — watch/dev build
• npm run build — production build
• npm run make:zip — package plugin zip

Version

Current version: 0.1.0