Skip to content

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

Merged
bph merged 6 commits into
trunkfrom
add/expand-typography-controls
Apr 29, 2026
Merged

Add setting to expand typography controls in the block inspector#824
bph merged 6 commits into
trunkfrom
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-28 at 16 02 26 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
bph added 2 commits April 24, 2026 17:03
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.
Match the layout pattern used by save-panel and create-panel so the
checkbox aligns with the screen header instead of sitting flush against
the left edge.
@bph
Copy link
Copy Markdown
Contributor Author

bph commented Apr 28, 2026

Switched the panel's outer wrapper from to + — the same pattern used by save-panel.js and
create-panel.js. This gives the checkbox the proper horizontal padding so it lines up with the "Editor preferences" header instead of sitting flush against the left edge.

Before

Screenshot 2026-04-24 at 11 17 20

After

Screenshot 2026-04-28 at 16 02 26

Match the pattern used by the create and save panels so the user gets a
blocking confirmation before the editor reloads, instead of a snackbar
that disappears with the page.
@bph
Copy link
Copy Markdown
Contributor Author

bph commented Apr 28, 2026

Also updated the handling of the reload to use prior method of alert box display on the top.
Screenshot 2026-04-28 at 16 39 51

Fit text is supported by Heading and Paragraph but is registered as its
own ToolsPanelItem outside TypographyPanel, so it ignores
__experimentalDefaultControls and stays behind the ellipsis. The
'expand all' wording was therefore inaccurate.
@bph
Copy link
Copy Markdown
Contributor Author

bph commented Apr 28, 2026

Note on the "Fit text" gap: only the Heading and Paragraph blocks declare typography.fitText support, and FitTextControl is registered as its own ToolsPanelItem outside TypographyPanel — it does not read __experimentalDefaultControls, so the existing mapping table cannot reach it. To keep the copy accurate I narrowed the label/help to refer to the typography panel rather than promising "all" controls (commit 7140ed3). Reaching Fit text would require a separate editor.BlockEdit filter that wraps Heading/Paragraph to inject isShownByDefault, which felt out of proportion for two blocks and one toggle — happy to add it as a follow-up if reviewers prefer.

Preserves any keys a block already set on its typography defaults that
are outside our mapping table — e.g., a future or third-party control
key we don't know about. Our computed values still win for keys we do
know, which is the point of the opt-in preference.
@bph bph changed the title Add setting to expand all typography controls in the block inspector Add setting to expand typography controls in the block inspector Apr 28, 2026
Copy link
Copy Markdown
Member

@mikachan mikachan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good to me! Code changes look good. I think we can bring this in so we can test it out 🙌

@bph bph merged commit ab4271d into trunk Apr 29, 2026
13 checks passed
@bph bph deleted the add/expand-typography-controls branch April 29, 2026 10:13
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

2 participants