GT Design Inspector

Read-only design inspector for WordPress block themes — see every design decision and where it comes from.

GT Design Inspector maps all design decisions of a block theme site onto one screen: colors, typography, spacing, and per-block styles — each value labeled with its origin layer:

It answers the two questions every agency and freelancer asks when taking over a client site: "Why does the site look like this?" and "Where do I fix it?" — without reading a single line of theme code.

The inspector is strictly read-only. It never changes styles.

▶ Try it now

Launch a throwaway WordPress site in your browser with the plugin already active — nothing to install:

Open demo in WordPress Playground

The demo lands directly on Tools → Design Inspector. The site runs entirely in your browser and is discarded when you close the tab.

Status: beta

This plugin is in active development, distributed on GitHub during the beta. Submission to the WordPress.org plugin directory is planned after WordPress 7.1 ships.

Found a bug or have feedback? Open an issue.

Requirements

• WordPress 6.8 or newer (features unlock progressively on 7.0 / 7.1)
• PHP 7.4 or newer
• A block theme (theme.json / Global Styles) — classic themes will show little to no data

Installation

From a release zip (recommended during beta):

1. Download the latest zip from Releases.
2. In wp-admin: Plugins → Add New Plugin → Upload Plugin → select the zip → Install Now → Activate.
3. Open Tools → Design Inspector.

From the repository (for testing main):

The built assets are committed, so a clone works as-is:

cd wp-content/plugins
git clone https://github.com/bph/gt-design-inspector.git
wp plugin activate gt-design-inspector

Usage notes

• The inspector lives under Tools → Design Inspector and is visible to all users with the edit_posts capability (contributors and up — subscribers are excluded).
• To restrict or widen access, filter the capability:

add_filter( 'gt_design_inspector_capability', fn() => 'manage_options' );

Development

git clone https://github.com/bph/gt-design-inspector.git
cd gt-design-inspector
npm install
npm run build     # production build
npm run start     # watch mode

The UI is built with the new WordPress Design System packages (@wordpress/ui, @wordpress/theme, @wordpress/admin-ui, @wordpress/dataviews), bundled via @wordpress/scripts. These packages are pre-1.0 and pinned; upgrade deliberately.

Note: build/ is committed on purpose — the Playground demo installs straight from this repo via a git:directory blueprint resource, so the compiled bundle must be in the tree. If you change anything under src/, run npm run build and commit the updated build/ output.

To test a local checkout in Playground (from the plugin directory):

npx @wp-playground/cli server --auto-mount

(or use the hosted demo link for the pushed main branch).

License

GPL-2.0-or-later