Help Center: Display help icon on the view mode of the site editor #93362

arthur791004 · 2024-08-08T07:32:20Z

Related to #92985

Proposed Changes

Display the help center on the view mode of the site editor

help-center-on-editor-sidebar.mov

Why are these changes being made?

It's helpful to display the help center when people land on the view mode of the site editor

Testing Instructions

cd into apps/help-center.
run yarn dev --sync.
Sandbox your site and widgets.wp.com.
Go to the Site Editor
Make sure the Help Center icon shows on the top of sidebar
Make sure you can open & close the Help Center by clicking the icon
Switch to the edit mode and back
Make sure the Help Center icon is still there
Go to the Post Editor
Make sure the Help Center icon shows as before

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

github-actions · 2024-08-08T07:32:34Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-115944

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-115944&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-115944&env=a8c-for-agencies

matticbot · 2024-08-08T07:38:29Z

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

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

help-center

To test WordPress.com changes, run install-plugin.sh $pluginSlug feat/help-center-editor-sidebar on your sandbox.

matticbot · 2024-08-08T07:39:40Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

alshakero

Thanks for working on this! Can we add some styles to the button when it has the class is-active (i.e the HC is open)?

Also, I'm not sure if we need to force updating.

alshakero · 2024-08-08T12:00:42Z

apps/help-center/help-center-gutenberg.js

+		// Force to re-render to ensure the sidebar is available.
+		if ( canvasMode === 'view' ) {
+			forceUpdate();
+		}


Isn't setShowHelpCenter( false ); sufficient to re-render here?

It doesn't work if it's closed

You're right, I misunderstood this effect.

arthur791004 · 2024-08-08T12:39:53Z

Can we add some styles to the button when it has the class is-active (i.e the HC is open)?

But the behavior will be different from the search icon and that's why I didn't add the active style.

alshakero · 2024-08-08T12:48:39Z

But the behavior will be different from the search icon and that's why I didn't add the active style.

Yes, but the search icon is not a toggle, just a button. Whereas the Help Center button is a toggle and it would be consistent with the UX in the editor.

Screen.Recording.2024-08-08.at.14.48.13.mov

arthur791004 · 2024-08-08T13:51:02Z

Updated! The background color will depend on the current theme. I'm AFK tomorrow so feel free to take over the PR 🙂

alshakero

Tested in Site Editor and Post editor. All work great.

…93362)

andrewserong · 2024-08-28T02:40:26Z

apps/help-center/help-center-gutenberg-disconnected.js

@@ -15,12 +22,23 @@ function HelpCenterContent() {
 				href="https://wordpress.com/help"
 				icon={ <HelpIcon /> }
 				label="Help"
-				size="compact"
+				size={ canvasMode === 'edit' ? 'compact' : undefined }


I just noticed that it looks like the button is no longer sized to compact in the post editor's header bar at the top right:

I think in that case it should still be size="compact". Is there another way to skip the compact sizing when it's required so that the buttons in the post editor header can line up?

I've logged this in a separate issue over in #93976. I couldn't find an existing issue for it, so apologies if that's a double up!

Oops...the canvas mode seems to be unavailable in the post editor. Will check it later 👍

Yes, the canvas mode only exists conceptually with the site editor for now.

Will check it later 👍

Feel free to add me as a reviewer if you open a PR for it!

Help Center: Display help icon on the view mode of the editor

09fb0bd

arthur791004 marked this pull request as ready for review August 8, 2024 07:32

arthur791004 requested a review from a team August 8, 2024 07:33

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 8, 2024

arthur791004 self-assigned this Aug 8, 2024

arthur791004 mentioned this pull request Aug 8, 2024

Site Editor doesn't have any help icon/Help Center area #92985

Closed

alshakero requested changes Aug 8, 2024

View reviewed changes

Add active styles

3aea096

alshakero approved these changes Aug 8, 2024

View reviewed changes

alshakero merged commit 046711f into trunk Aug 8, 2024
11 checks passed

alshakero deleted the feat/help-center-editor-sidebar branch August 8, 2024 14:23

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 8, 2024

gabrielcaires pushed a commit that referenced this pull request Aug 8, 2024

Help Center: Display help icon on the view mode of the site editor (#…

55144d5

…93362)

andrewserong mentioned this pull request Aug 28, 2024

Help Center: The help center icon is larger than the others in the post editor header #93976

Closed

andrewserong reviewed Aug 28, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Help Center: Display help icon on the view mode of the site editor #93362

Help Center: Display help icon on the view mode of the site editor #93362

arthur791004 commented Aug 8, 2024

github-actions bot commented Aug 8, 2024 •

edited by matticbot

Loading

matticbot commented Aug 8, 2024 •

edited

Loading

matticbot commented Aug 8, 2024

alshakero left a comment

alshakero Aug 8, 2024

arthur791004 Aug 8, 2024

alshakero Aug 8, 2024

arthur791004 commented Aug 8, 2024

alshakero commented Aug 8, 2024

arthur791004 commented Aug 8, 2024 •

edited

Loading

alshakero left a comment •

edited

Loading

andrewserong Aug 28, 2024

arthur791004 Aug 28, 2024

andrewserong Aug 28, 2024

Help Center: Display help icon on the view mode of the site editor #93362

Help Center: Display help icon on the view mode of the site editor #93362

Conversation

arthur791004 commented Aug 8, 2024

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

github-actions bot commented Aug 8, 2024 • edited by matticbot Loading

matticbot commented Aug 8, 2024 • edited Loading

matticbot commented Aug 8, 2024

alshakero left a comment

Choose a reason for hiding this comment

alshakero Aug 8, 2024

Choose a reason for hiding this comment

arthur791004 Aug 8, 2024

Choose a reason for hiding this comment

alshakero Aug 8, 2024

Choose a reason for hiding this comment

arthur791004 commented Aug 8, 2024

alshakero commented Aug 8, 2024

arthur791004 commented Aug 8, 2024 • edited Loading

alshakero left a comment • edited Loading

Choose a reason for hiding this comment

andrewserong Aug 28, 2024

Choose a reason for hiding this comment

arthur791004 Aug 28, 2024

Choose a reason for hiding this comment

andrewserong Aug 28, 2024

Choose a reason for hiding this comment

github-actions bot commented Aug 8, 2024 •

edited by matticbot

Loading

matticbot commented Aug 8, 2024 •

edited

Loading

arthur791004 commented Aug 8, 2024 •

edited

Loading

alshakero left a comment •

edited

Loading