Skip to content

Backport ToolsPanel SCSS Module migration to WordPress 7.1 - #80800

Merged
ciampo merged 1 commit into
wp/7.1from
codex/backport-80445-wp-7-1
Jul 28, 2026
Merged

Backport ToolsPanel SCSS Module migration to WordPress 7.1#80800
ciampo merged 1 commit into
wp/7.1from
codex/backport-80445-wp-7-1

Conversation

@ciampo

@ciampo ciampo commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Backport of #80445 to WordPress 7.1.

What?

Backports the complete ToolsPanel migration from Emotion to an SCSS Module and the fix for the header heading typography regression.

Why?

The View migration exposed a stylesheet insertion-order conflict in ToolsPanel. The fix merged after the WordPress 7.1 branch split and needs to be applied to the beta branch separately.

How?

Cherry-picks the exact merged commit from #80445. The only manual conflict resolution creates a wp/7.1 Unreleased breaking-change section containing only the ToolsPanel entry and keeps the corresponding bug-fix entry in that release section.

Testing Instructions

Storybook

  1. Open Components / ToolsPanel / Default.
  2. Confirm the heading matches the After screenshot: compact inherited font size, emphasized weight, normal line height, and no extra margin.
  3. Confirm the border, padding, two-column layout, and control spacing are unchanged.
  4. Open the options menu, show or hide Scale, change values, and use Reset all.

Editor

  1. Insert or select a Group block and open its Dimensions panel.
  2. Confirm the corrected heading typography and expected control spacing.
  3. Show or hide an optional control, change a value, and reset it.

Testing Instructions for Keyboard

Open the options menu with Enter or Space, navigate with the arrow keys, and dismiss it with Escape. Confirm focus remains visible and returns to the options button.

Screenshots or screencast

Emphasis on the heading regression, which is fixed by this backport.

Before After
Screenshot 2026-07-18 at 18 32 31 Screenshot 2026-07-18 at 18 45 54

Use of AI Tools

Codex was used to prepare and verify the backport, resolve the release-branch changelog conflict, and draft this PR description.

* ToolsPanel: Preserve heading typography

* Components: Add ToolsPanel changelog entry

* ToolsPanel: Migrate styles to an SCSS Module

* ToolsPanel: Preserve grid spacing from context

* ToolsPanel: Document Emotion migration

* ToolsPanel: Address style review feedback

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
@github-actions github-actions Bot added the [Package] Components /packages/components label Jul 28, 2026
@ciampo ciampo self-assigned this Jul 28, 2026
@ciampo
ciampo requested a review from t-hamano July 28, 2026 18:10
@ciampo
ciampo marked this pull request as ready for review July 28, 2026 18:10
@ciampo
ciampo requested review from a team and ajitbohra as code owners July 28, 2026 18:10
@github-actions

github-actions Bot commented Jul 28, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ciampo ciampo added the [Type] Bug An existing feature does not function as intended label Jul 28, 2026
@github-actions

Copy link
Copy Markdown

Size Change: +928 B (+0.01%)

Total Size: 7.74 MB

📦 View Changed
Filename Size Change
build/scripts/components/index.min.js 272 kB +928 B (+0.34%)

compressed-size-action

@aaronrobertshaw aaronrobertshaw left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for this @ciampo 👍

✅ Code changes match #80445
✅ ToolsPanel renders in Storybook as advertised in After screenshot
✅ Panel looks correct in block editor

Image Image

LGTM 🚢

@ciampo
ciampo merged commit 20bfd99 into wp/7.1 Jul 28, 2026
59 of 65 checks passed
@ciampo
ciampo deleted the codex/backport-80445-wp-7-1 branch July 28, 2026 18:53
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Jul 29, 2026
This updates the pinned commit hash of the Gutenberg repository from `4997026b75c922d8a6f77a03d72ed7cad04c7073` to `fd715a6833679d098d9fee84b642f8f1bc27341b`.

A full list of changes included in this commit can be found on GitHub: 
WordPress/gutenberg@4997026...fd715a6

- Update view config API versioning (WordPress/gutenberg#80319)
- Perf Tests: Fix 'Selecting blocks' metric reporting 0 ms (WordPress/gutenberg#80524)
- Notes: Register the inline note format at import time (WordPress/gutenberg#80576)
- Media: Stop forcing crossorigin on IMG tags in media templates (WordPress/gutenberg#80532)
- GradientPicker: select by slug so two presets sharing a gradient keep their identity (WordPress/gutenberg#80554)
- Media Editor: Show a loading state while the cropped file loads (WordPress/gutenberg#80460)
- Remove default paragraph from tab-panel template (WordPress/gutenberg#80565)
- Global Styles: Resolve link element styles in block inspector controls for blocks that are links (WordPress/gutenberg#80607)
- Media REST API: Backport sideload from url path upload size check (WordPress/gutenberg#80659)
- Rich text: remove tabIndex from editable elements again to fix shift+click selection (WordPress/gutenberg#80651)
- Gallery: make dynamic mode conversion a single undo level (WordPress/gutenberg#80665)
- Background image control: Remove duplicated focus ring (WordPress/gutenberg#80671)
- Detach core's note mention kses filter in the baseline strip test (WordPress/gutenberg#80656)
- wp-build: sync the page template preload field list with core-data (WordPress/gutenberg#80648)
- Read the contentEditable attribute in ownsSelection, not isContentEditable (WordPress/gutenberg#80549)
- Writing flow: extend block selections with shift+arrow when there is no native selection (WordPress/gutenberg#80687)
- Notes: Capture the target block before saving a block-level note (WordPress/gutenberg#80690)
- Theme JSON: Level block-level preset class specificity with :where() (WordPress/gutenberg#80657)
- Notes: Sync the sidebar selection to the inline marker under the caret (WordPress/gutenberg#80610)
- Writing flow: use isMultiSelecting for shift+click (WordPress/gutenberg#80286) (WordPress/gutenberg#80726)
- Block supports: Return from layout support before resolving global settings (WordPress/gutenberg#80771)
- Notes: Report save success consistently from note actions (WordPress/gutenberg#80748)
- Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what will happen (WordPress/gutenberg#80727) (WordPress/gutenberg#80774)
- ToolsPanel: Migrate styles to an SCSS Module (WordPress/gutenberg#80445) (WordPress/gutenberg#80800)
- Add a responsiveEditingEnabled editor setting to hide the Responsive styles option (WordPress/gutenberg#80814)
- iOS: remove jumping hack, add typewriter (WordPress/gutenberg#74596)
- Writing flow: stop the page scrolling on caret moves within blocks taller than the viewport (WordPress/gutenberg#80708)
- Global Styles: Put the inheritance UI behind a Gutenberg experiment (… (WordPress/gutenberg#80818)
- Notes: Cancel in-flight hover highlight when focus leaves a note thread (WordPress/gutenberg#80752)
- Block Editor: Try to fix typing performance regression (WordPress/gutenberg#80507)
- List Block: Preserve ordered type on indent (WordPress/gutenberg#75353)
- Make editableRoot a private block setting Symbol, not a public support (WordPress/gutenberg#80820)
- Fix cursor position during forward delete of empty blocks (WordPress/gutenberg#80827)
- Navigation: Fixes `aria-expanded` not updating on hover submenu inside overlay (WordPress/gutenberg#80828)
- Remove redundant @jest-environment jsdom pragma and lint against it (WordPress/gutenberg#80676)
- View config: reject shape-mismatched merges, define empty-array semantics, strip nulls from appended members (WordPress/gutenberg#80829)
- Editor: leave undo to the browser in fields that handle their own undo (WordPress/gutenberg#80768)
- Fix: New route-based admin pages are empty when no JS (WordPress/gutenberg#80839)

Props wildworks.
See #65529.

git-svn-id: https://develop.svn.wordpress.org/trunk@62896 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Jul 29, 2026
This updates the pinned commit hash of the Gutenberg repository from `4997026b75c922d8a6f77a03d72ed7cad04c7073` to `fd715a6833679d098d9fee84b642f8f1bc27341b`.

A full list of changes included in this commit can be found on GitHub: 
WordPress/gutenberg@4997026...fd715a6

- Update view config API versioning (WordPress/gutenberg#80319)
- Perf Tests: Fix 'Selecting blocks' metric reporting 0 ms (WordPress/gutenberg#80524)
- Notes: Register the inline note format at import time (WordPress/gutenberg#80576)
- Media: Stop forcing crossorigin on IMG tags in media templates (WordPress/gutenberg#80532)
- GradientPicker: select by slug so two presets sharing a gradient keep their identity (WordPress/gutenberg#80554)
- Media Editor: Show a loading state while the cropped file loads (WordPress/gutenberg#80460)
- Remove default paragraph from tab-panel template (WordPress/gutenberg#80565)
- Global Styles: Resolve link element styles in block inspector controls for blocks that are links (WordPress/gutenberg#80607)
- Media REST API: Backport sideload from url path upload size check (WordPress/gutenberg#80659)
- Rich text: remove tabIndex from editable elements again to fix shift+click selection (WordPress/gutenberg#80651)
- Gallery: make dynamic mode conversion a single undo level (WordPress/gutenberg#80665)
- Background image control: Remove duplicated focus ring (WordPress/gutenberg#80671)
- Detach core's note mention kses filter in the baseline strip test (WordPress/gutenberg#80656)
- wp-build: sync the page template preload field list with core-data (WordPress/gutenberg#80648)
- Read the contentEditable attribute in ownsSelection, not isContentEditable (WordPress/gutenberg#80549)
- Writing flow: extend block selections with shift+arrow when there is no native selection (WordPress/gutenberg#80687)
- Notes: Capture the target block before saving a block-level note (WordPress/gutenberg#80690)
- Theme JSON: Level block-level preset class specificity with :where() (WordPress/gutenberg#80657)
- Notes: Sync the sidebar selection to the inline marker under the caret (WordPress/gutenberg#80610)
- Writing flow: use isMultiSelecting for shift+click (WordPress/gutenberg#80286) (WordPress/gutenberg#80726)
- Block supports: Return from layout support before resolving global settings (WordPress/gutenberg#80771)
- Notes: Report save success consistently from note actions (WordPress/gutenberg#80748)
- Dynamic Gallery: Rename toolbar button to Detach and add a modal explaining what will happen (WordPress/gutenberg#80727) (WordPress/gutenberg#80774)
- ToolsPanel: Migrate styles to an SCSS Module (WordPress/gutenberg#80445) (WordPress/gutenberg#80800)
- Add a responsiveEditingEnabled editor setting to hide the Responsive styles option (WordPress/gutenberg#80814)
- iOS: remove jumping hack, add typewriter (WordPress/gutenberg#74596)
- Writing flow: stop the page scrolling on caret moves within blocks taller than the viewport (WordPress/gutenberg#80708)
- Global Styles: Put the inheritance UI behind a Gutenberg experiment (… (WordPress/gutenberg#80818)
- Notes: Cancel in-flight hover highlight when focus leaves a note thread (WordPress/gutenberg#80752)
- Block Editor: Try to fix typing performance regression (WordPress/gutenberg#80507)
- List Block: Preserve ordered type on indent (WordPress/gutenberg#75353)
- Make editableRoot a private block setting Symbol, not a public support (WordPress/gutenberg#80820)
- Fix cursor position during forward delete of empty blocks (WordPress/gutenberg#80827)
- Navigation: Fixes `aria-expanded` not updating on hover submenu inside overlay (WordPress/gutenberg#80828)
- Remove redundant @jest-environment jsdom pragma and lint against it (WordPress/gutenberg#80676)
- View config: reject shape-mismatched merges, define empty-array semantics, strip nulls from appended members (WordPress/gutenberg#80829)
- Editor: leave undo to the browser in fields that handle their own undo (WordPress/gutenberg#80768)
- Fix: New route-based admin pages are empty when no JS (WordPress/gutenberg#80839)

Props wildworks.
See #65529.
Built from https://develop.svn.wordpress.org/trunk@62896


git-svn-id: http://core.svn.wordpress.org/trunk@62163 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Components /packages/components [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants