Skip to content

Bump @wordpress/block-editor, compose, and friends; migrate global-styles bridge - #111123

Merged
xavier-lc merged 13 commits into
trunkfrom
update/wordpress-block-editor-global-styles
May 28, 2026
Merged

xavier-lc merged 13 commits into
trunkfrom
update/wordpress-block-editor-global-styles

Conversation

@xavier-lc

@xavier-lc xavier-lc commented May 28, 2026 •

Copy link
Copy Markdown
Contributor

Fixes DOTCOM-17286

Part of #105909 — continues the WordPress monorepo bumps that started in #111100.

Proposed Changes

Three sequential commits:

  1. Bump @wordpress/block-editor, compose, block-library, format-library, icons, private-apis to their latest stable versions across all package.json files, with three yarn patches:
    • @wordpress/compose@8.0 — guards view = window default parameters in useViewportMatch / useMediaQuery so the hooks can be imported under SSR. Removal path known: useMediaQuery: support in-iframe queries by accepting Window instance WordPress/gutenberg#76446 is already merged upstream; this patch can be dropped once a compose release containing it ships.
    • @wordpress/block-editor@15.20 — (a) optional-chains the defaultView access in useTypingObserver's cleanup so an iframe unmount stops throwing Cannot read properties of null; (b) widens the exports field to surface ./build-module/components/iframe/get-compatibility-styles, which packages/verbum-block-editor reaches into. Upstream issue for (a) to be filed.
    • @wordpress/global-styles-ui@1.13 — widens the exports field only (no code changes) to surface ./build-module/hooks and ./build-module/context, used by the global-styles bridge migration in the following commit.
  2. Migrate packages/global-styles to the new global-styles-ui and -engine packages. Between block-editor 15.5 and 15.10, upstream moved the global-styles hooks/context/equality helpers out of @wordpress/block-editor's private APIs and into the new public packages. The Calypso-facing surface (useGlobalSetting, useGlobalStyle, useSafeGlobalStylesOutput, GlobalStylesContext, etc.) is unchanged.
  3. Verbum: register text formats via the @wordpress/format-library side-effect import instead of the deep default-formats import, which is no longer reachable through the package's exports field.

Why are these changes being made?

To keep Calypso current with upstream Gutenberg and unblock further consumers. Splitting from #111100 keeps each PR atomic — that one landed the intermediate-step bump that didn't touch global-styles, and this one finishes the work.

Testing Instructions

  1. yarn then yarn start.
  2. Open http://calypso.localhost:3000/theme/primarium (or any other theme with style variations). Verify:
    • Style variation thumbnails render (this is the original crash site — useSafeGlobalStylesOutput is exercised here).
    • Clicking Preview opens the design preview and renders the iframe content.
    • No console errors at any point.
  3. Open the Reader's quick-post flow (Reader → write a quick post). Verify the editor mounts, typing works without the toolbar blinking between keystrokes, and the text-formatting toolbar (bold, italic, link) is functional.

Pre-merge Checklist

  • Has the general commit checklist been followed? (PCYsg-hS-p2)
  • Have you written new tests for your changes?
  • Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
  • Have you checked for TypeScript, React or other console errors?
  • For UI changes, have you tested the affected components in dark mode?
  • Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
  • Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
  • Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
    • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
  • For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

Xavier Lozano Carreras added 3 commits May 28, 2026 11:31
… icons, private-apis

Bumps the WordPress monorepo packages used by Calypso to their latest stable
versions, completing the upgrade started in #111100:

- @wordpress/block-editor   15.13 → 15.20
- @wordpress/block-library    9.32 →  9.46
- @wordpress/format-library   5.32 →  5.47
- @wordpress/icons           10.27 → 13.2
- @wordpress/compose          7.45 →  8.0
- @wordpress/private-apis     1.46 →  1.47

Carries three yarn patches:

- @wordpress/compose 8.0 — guards `view = window` default parameters in
  `useViewportMatch` / `useMediaQuery` so the hooks can be imported under
  SSR. An upstream fix is already merged (WordPress/gutenberg#76446) and
  this patch can be dropped once a compose release containing it ships.

- @wordpress/block-editor 15.20 — (a) optional-chains the `defaultView`
  access in `useTypingObserver`'s cleanup so a typing-iframe unmount stops
  throwing `Cannot read properties of null`; (b) widens the package's
  `exports` field to surface `./build-module/components/iframe/get-compatibility-styles`,
  which `packages/verbum-block-editor` reaches into.

- @wordpress/global-styles-ui 1.13 — widens the `exports` field only (no
  code changes) to surface `./build-module/hooks` and `./build-module/context`,
  used by the global-styles bridge migration in the following commit.
Between block-editor 15.5 and 15.10, upstream moved the global-styles
hooks/context/equality helpers out of `@wordpress/block-editor`'s private
APIs and into the new public `@wordpress/global-styles-ui` and
`@wordpress/global-styles-engine` packages. Rewrites the gutenberg bridge
to consume the new APIs while keeping the surface exported to Calypso
consumers (`useGlobalSetting`, `useGlobalStyle`, `useSafeGlobalStylesOutput`,
`GlobalStylesContext`, etc.) unchanged.

- `useGlobalSetting` / `useGlobalStyle` now alias the public `useSetting` /
  `useStyle` hooks from `@wordpress/global-styles-ui`.
- `useSafeGlobalStylesOutput` is reimplemented over the engine: read the
  merged config from `GlobalStylesContext` and call
  `generateGlobalStyles( merged, getBlockTypes() )`, returning the same
  `[ stylesheets, settings ]` tuple shape that consumers expect.
- `areGlobalStyleConfigsEqual` was removed upstream; it's inlined here as
  two `fast-deep-equal` calls on the styles/settings slices, matching the
  pre-refactor behavior.
- TypeScript's `node` classic module resolution doesn't honor the
  `exports` field, so a small `.d.ts` shim redirects the deep imports to
  the package's own `build-types` declarations.
- `font-pairing-variations/preview.tsx` updates its cast to match the
  readonly-tuple return shape of the new `useGlobalSetting`.
…ct import

The deep `@wordpress/format-library/build-module/default-formats` import
verbum was using was hidden behind the package's `exports` field in 5.46+,
so it can no longer be reached. The package's public surface is the main
entry, which auto-registers all 15 built-in formats (bold, italic, link,
code, image, strikethrough, underline, textColor, subscript, superscript,
keyboard, unknown, language, math, nonBreakingSpace) via top-level side
effects. Replace the deep import with `import '@wordpress/format-library'`
and turn `loadTextFormatting` into a no-op that exists only to preserve
the public API of `@automattic/verbum-block-editor`.

The Reader quick-post caller no longer needs the `extraFormats` argument
(verbum already registers `heading`-compatible formats unconditionally),
so drop it.
@xavier-lc
xavier-lc requested review from a team and youknowriad as code owners May 28, 2026 09:33
@matticbot matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 28, 2026
@matticbot

Copy link
Copy Markdown
Contributor

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

  • agents-manager
  • blaze-dashboard
  • content-research
  • help-center
  • notifications
  • o2-blocks
  • odyssey-stats
  • wpcom-block-editor
  • wpcom-smart-dictation

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/wordpress-block-editor-global-styles on your sandbox.

Xavier Lozano Carreras added 8 commits May 28, 2026 11:49
The bump to `@wordpress/compose@8.0` in this PR removed the optional
chaining around `mediaQueryList?.matches` that 7.45's `useMediaQuery`
relied on. With 8.0, `view.matchMedia(query)` is assumed to return a real
`MediaQueryList`.

Calypso's test framework defines `global.matchMedia = jest.fn(query => ({
matches: false, ... }))` once in `test/client/setup-test-framework.js`.
This test's `beforeEach` was calling `jest.resetAllMocks()`, which wipes
the implementation of every `jest.fn()` — including the framework-level
matchMedia. The next call to `matchMedia(query)` then returned undefined,
and `StepContainerV2`'s `useViewportMatch` would crash trying to read
`.matches` on it.

Switch to `jest.clearAllMocks()` (clears call history but keeps mock
implementations), matching the sibling `playground-error.tsx` test in
the same directory.
The bump of `@wordpress/compose` from 7.45 to 8.0 in this PR added a
`useFocusOnMount.Mode` namespace export with a strict literal union type:
`boolean | 'firstElement' | 'firstInputElement'`. Previously the
namespace didn't exist, so `useFocusOnMount.Mode` resolved to `any` and
the `"container"` value used in three A4A popovers (introduced in
#111038) type-checked without complaint.

At runtime, `"container"` and `true` are equivalent — both fall through
to `setFocus(node)` on the popover wrapper in both 7.45 and 8.0, since
the implementation only special-cases `false`, `'firstElement'`, and
`'firstInputElement'`. Switching to the JSX prop shorthand `focusOnMount`
(which evaluates to `true`) preserves behavior — focus moves into the
popover wrapper, `onFocusOutside` keeps working, and "Learn more" links
inside are no longer auto-focused — while satisfying the narrowed type.
The helper wasn't removed upstream, just renamed and made public:
`@wordpress/block-editor`'s private `areGlobalStyleConfigsEqual` lives
in `@wordpress/global-styles-engine` as `areGlobalStylesEqual` now, with
an identical implementation (the same two `fast-deep-equal` calls on
the `styles` and `settings` slices).

Import the renamed helper instead of carrying our own copy. The single
call site casts via `Parameters< typeof areGlobalStyleConfigsEqual >[0]`
because Calypso's `GlobalStylesObject` is structurally compatible with
the engine's `GlobalStylesConfig` for these two slices but doesn't
satisfy the stricter TS signature.

Also drops the direct `fast-deep-equal` dep from
`packages/global-styles/package.json`, which is no longer used in the
package.
);

const useSafeGlobalStylesOutput = () => {
const useSafeGlobalStylesOutput = (): [ unknown[], Record< string, unknown > ] => {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Historical context for useSafeGlobalStylesOutput: it replaces the removed useGlobalStylesOutput hook that used to live in @wordpress/block-editor private APIs. The function preserves the same [ stylesheets, settings ] tuple shape downstream consumers were already using, and wraps the engine call in a try/catch that reports failures to Sentry instead of crashing the page.

@xavier-lc
xavier-lc merged commit 09c7431 into trunk May 28, 2026
14 checks passed
@xavier-lc
xavier-lc deleted the update/wordpress-block-editor-global-styles branch May 28, 2026 11:59
@github-actions github-actions Bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 28, 2026
@p-jackson p-jackson mentioned this pull request Jun 4, 2026
1 of 10 tasks
@alshakero alshakero mentioned this pull request Jun 25, 2026
1 of 10 tasks
@alshakero

Copy link
Copy Markdown
Member

Yo yo! Compose was released, and the patch is no longer needed #112001

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.

3 participants