Skip to content

Add setting to expand all typography controls in the block inspector#824

Open
bph wants to merge 2 commits intotrunkfrom
add/expand-typography-controls
Open

Add setting to expand all typography controls in the block inspector#824
bph wants to merge 2 commits intotrunkfrom
add/expand-typography-controls

Conversation

@bph
Copy link
Copy Markdown
Contributor

@bph bph commented Apr 24, 2026

Summary

Adds an opt-in Editor preferences panel in the Create Block Theme sidebar with a single toggle that expands every typography control in the block inspector by default, instead of hiding them behind the ToolsPanel ellipsis menu. Intended for theme authors iterating on typography.

Fixes #823.

Why

Adjusting typography in the Site Editor takes two steps per control today: open the ellipsis menu, enable the control, then set the value. For theme authors iterating across many blocks and elements, this adds up. The issue has more context (#823), including the related upstream discussions in gutenberg#41376 and gutenberg#41544.

The narrow scope here — plugin-only, reversible by toggling off or deactivating CBT.

New files

  • src/editor-enhancements/expand-typography-controls.js — mapping table, pure expandTypographyDefaults(), and a blocks.registerBlockType filter that populates __experimentalDefaultControls based on the typography supports the block already declares.
  • src/editor-sidebar/editor-preferences-panel.js — new panel with a single CheckboxControl. Toggle writes the preference, fires createInfoNotice('Applying…'), and reloads the editor.
  • src/test/expand-typography-controls.test.js — 13 unit tests for the pure mapping function (null/undefined, each support key, fontAppearance merge, falsy filtering, full shape, key preservation) plus one mapping-table sanity check.

Modified

  • src/plugin-sidebar.js — side-effect import of the filter at the top (so it registers before block registration), cog icon, menu item under /editor-preferences, new NavigatorScreen.
  • readme.txt — one bullet under Description.

Design decisions

  • Typography only for v1. Defer spacing / border / dimensions to a follow-up based on feedback.
  • Reload on toggle. blocks.registerBlockType only fires at registration time. Auto-reload matches the pattern already used.
  • CBT sidebar, not the core Preferences modal. The preference scope is create-block-theme, same store as existing save-panel preferences. It really is only helpful while authoring a theme.
  • Site Editor only. CBT's sidebar bundle is gated to $pagenow === 'site-editor.php' in includes/class-create-block-theme-editor-tools.php:19, so the filter doesn't load in the post editor. The help text notes this. Broader coverage (splitting the filter into its own unconditionally-enqueued script) is a plausible v2.

Mapping source

Verified against gutenberg/packages/block-editor/src/components/global-styles/typography-panel.js on trunk. fontWeight and fontStyle collapse into a single fontAppearance control. If the __experimental* keys rename in core, only expand-typography-controls.js needs to change.

Open questions for reviewers

From issue #823:

  1. Typography-only v1, or broader? (spacing, dimensions, border)
  2. Reload vs live apply. We chose reload for the reasons above; open to reconsidering if reviewers feel strongly.
  3. Visible in-editor indicator that expansion is active — helpful, or noise?
  4. Site Editor only. Should this also work in the post editor? Would require splitting the filter module out of the `site-editor.php`-gated sidebar bundle.

Test plan

  • Site Editor manual: toggle OFF baseline for Paragraph, Heading, Group, Cover, Quote
  • Site Editor manual: toggle ON → reload → all declared typography controls visible on the above
  • Third-party block: Jetpack Contact Form's Label block — all typography controls expanded, no crash, no invented controls
  • Toggle OFF → reload → controls revert
  • Deactivate CBT → default Gutenberg behavior returns
  • Preference persists across browser reloads and sessions

A Claude-assisted PR.

Here are a few visusal:

Video:

Screen.Recording.2026-04-24.at.11.19.26.mov
Screenshot 2026-04-24 at 11 17 09 Screenshot 2026-04-24 at 11 17 20 Screenshot 2026-04-24 at 11 17 48

Adds an opt-in "Editor preferences" panel in the Create Block Theme
sidebar with a single toggle that expands every typography control in
the block inspector by default, instead of hiding them behind the
ToolsPanel ellipsis menu. Intended for theme authors iterating on
typography.

- New blocks.registerBlockType filter populates
  __experimentalDefaultControls on supports.typography based on the
  controls the block already declares. Mapping verified against
  gutenberg/packages/block-editor/src/components/global-styles/
  typography-panel.js.
- Preference stored in @wordpress/preferences under scope
  create-block-theme, key expandAllTypographyControls.
- Toggle auto-reloads the editor in both directions, matching the
  existing save/reset/variation reload pattern in CBT.
- Applies in the Site Editor only (CBT's sidebar bundle is gated to
  site-editor.php); help text notes this.

Fixes #823
@bph bph requested review from mikachan and scruffian April 24, 2026 10:39
@bph bph self-assigned this Apr 24, 2026
@bph bph requested a review from MaggieCabrera April 24, 2026 10:40
@bph bph marked this pull request as ready for review April 24, 2026 10:42
The eslint-import-resolver-typescript used by @wordpress/eslint-plugin
v24 fails to resolve @wordpress/hooks specifically, while other
@wordpress/* packages that are likewise externalized at build time
(data, preferences, notices, i18n) resolve fine. Suppress the rule on
the single affected import with a comment explaining why.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Setting to show all typography (and other) controls by default while authoring a theme

1 participant