Skip to content

Fix: Masterbar Horizon crash from string icon in createInterpolateElement#109905

Merged
p-jackson merged 1 commit intotrunkfrom
fix/masterbar-wordpress-icon-horizon-crash
Apr 9, 2026
Merged

Fix: Masterbar Horizon crash from string icon in createInterpolateElement#109905
p-jackson merged 1 commit intotrunkfrom
fix/masterbar-wordpress-icon-horizon-crash

Conversation

@p-jackson
Copy link
Copy Markdown
Member

@p-jackson p-jackson commented Apr 9, 2026

Proposed Changes

  • In MasterbarLoggedIn, wrap the result of wordpressIcon() in a Gridicon when it returns a string, mirroring the approach used in client/layout/masterbar/item.tsx (line 102).

Rather than a broken button label, we now have this. It doesn't look great. But it wasn't working at all before.

CleanShot 2026-04-09 at 16 43 06@2x

Why are these changes being made?

  • On Horizon, wordpressIcon() returns the string 'my-sites-horizon' instead of an SVG element. Since Masterbar: migrate from localize HOC to @wordpress/i18n #109489 migrated this code from i18n-calypso's translate() (with components) to @wordpress/element's createInterpolateElement, that string crashes the render: createInterpolateElement requires every value in the conversion map to be a React element, while the old translate() was forgiving and accepted strings. The bug was arguably latent before — the code only ever happened to pass elements — but the stricter API surfaced it on Horizon.
  • The same string-or-element pattern exists in item.tsx, which already handles it with typeof icon !== 'string' ? icon : <Gridicon icon={ icon } size={ 24 } />. This PR uses the same shape for consistency.

Testing Instructions

  • Load the masterbar against Horizon (hostname === 'horizon.wordpress.com') and confirm it renders without crashing and the WordPress.com account icon shows.
  • Load on a non-Horizon environment and confirm the SVG icon still renders.

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?
  • 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?
  • 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)?
  • 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)?

Wrap string icons in Gridicon, matching item.tsx approach.
@p-jackson p-jackson self-assigned this Apr 9, 2026
@p-jackson p-jackson requested a review from a team April 9, 2026 04:53
@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 Apr 9, 2026
@p-jackson p-jackson marked this pull request as ready for review April 9, 2026 04:54
@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

  • help-center
  • notifications
  • wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/masterbar-wordpress-icon-horizon-crash on your sandbox.

@p-jackson p-jackson merged commit 03f2807 into trunk Apr 9, 2026
18 of 19 checks passed
@p-jackson p-jackson deleted the fix/masterbar-wordpress-icon-horizon-crash branch April 9, 2026 06:47
@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 Apr 9, 2026
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