Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shadow Help Center styles in wp-admin and Gutenberg #93628

Merged
merged 15 commits into from
Aug 30, 2024

Conversation

alshakero
Copy link
Member

@alshakero alshakero commented Aug 16, 2024

Proposed Changes

This wraps the Help Center in a shadow root to prevent styles from leaking in and out of the Help Center.

Why are these changes being made?

The Help Center styles can break a few things and be broken by a few things because the Help Center runs in many places under several environments.

Testing Instructions

  1. In apps/help-center run yarn dev --sync.
  2. Test in wp-admin/post-new.php and wp-admin.
  3. Make sure every route of the Help Center is well-styled.

Next

Once this is live. We can merge this

@matticbot
Copy link
Contributor

matticbot commented Aug 16, 2024

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~240 bytes added 📈 [gzipped])

name                               parsed_size           gzip_size
async-load-automattic-help-center       +627 B  (+0.1%)     +240 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

@matticbot
Copy link
Contributor

matticbot commented Aug 16, 2024

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

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

  • blaze-dashboard
  • command-palette-wp-admin
  • help-center
  • notifications
  • odyssey-stats
  • whats-new

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/help-center-in-shadow on your sandbox.

@alshakero alshakero marked this pull request as ready for review August 16, 2024 15:39
@alshakero alshakero requested a review from a team as a code owner August 16, 2024 15:39
@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 Aug 16, 2024
@alshakero alshakero changed the title Shadow Help Center styles in wp-admin Shadow Help Center styles in wp-admin and Gutenberg Aug 16, 2024
@alshakero alshakero marked this pull request as draft August 16, 2024 15:43
@alshakero
Copy link
Member Author

alshakero commented Aug 16, 2024

Since styles are shadowed now, we lost the styles of the Help Button.

Fixed.

@alshakero alshakero marked this pull request as ready for review August 28, 2024 10:17
Copy link
Contributor

@escapemanuele escapemanuele left a comment

Choose a reason for hiding this comment

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

image

I see this in /wp-admin

@escapemanuele escapemanuele requested review from escapemanuele and a team August 29, 2024 10:11
Copy link
Contributor

@renancarvalho renancarvalho left a comment

Choose a reason for hiding this comment

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

Great changes!
I have tested many routes desktop, mobile, wp-admin. All worked fine. Haven't seen anything off or wrong.
🚀

@escapemanuele escapemanuele requested a review from a team August 30, 2024 10:46
Copy link
Contributor

@escapemanuele escapemanuele left a comment

Choose a reason for hiding this comment

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

Tested wp-admin and the editor and I didn't find any issue!

@alshakero alshakero merged commit a0a8bf7 into trunk Aug 30, 2024
12 checks passed
@alshakero alshakero deleted the fix/help-center-in-shadow branch August 30, 2024 14:31
@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 Aug 30, 2024
rafaelgallani added a commit that referenced this pull request Aug 30, 2024
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.

4 participants