MU WPCOM: dashboard: add site links/preview #41106

ellatrix · 2025-01-15T22:35:49Z

See Automattic/wp-calypso#95386

Proposed changes:

Change "Site Management Tools" something more similar to the site preview and links found in My Home.
The widget has been added to the second column ("side"), so users can find it in the same place.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Enable the Classic style admin and go to the dashboard.

github-actions · 2025-01-15T22:36:40Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the add/site-widget branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack-mu-wpcom-plugin add/site-widget

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-01-15T22:36:43Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Mu Wpcom plugin:

Next scheduled release: WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Wpcomsh plugin:

Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

...s/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php

youknowriad · 2025-01-22T13:57:36Z

.../jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js

 	return (
 		<>
+			<div className="wpcom_site_preview_wrapper">
+				<div className="wpcom_site_preview">
+					<iframe


What's preventing interactions with the iframe, should we add "inert" or something

It has pointer-events: none atm

I wonder if that's enough a11y wise (you might have screen readers read the content of the iframes in different ways).

Added aria-hidden

Isn't aria-hidden + pointer events none + tabIndex="-1" together equivalent to "inert" ?

I'm ok with the current code, just trying to understand.

I guess you're right, let's add inert. I think the only practical difference is that inert does not allow manual focus on the element, which in the case we don't want to do.

Changed to inert 👍

youknowriad · 2025-01-22T13:59:37Z

.../jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-site-management-widget/index.js

+					<a className="button-secondary" href={ `https://wordpress.com/overview/${ siteDomain }` }>
+						{ __( 'Hosting Overview', 'jetpack-mu-wpcom' ) }
+					</a>
+					<a className="button-secondary" href={ `site-editor.php` }>


This assumes the site editor is always available, which is not the case depending on the theme.

It's interesting that the button is always the same in My Home though:

https://github.com/Automattic/wp-calypso/blob/ce9621540e79b86a6a995a09b2f4eefaf47e6f32/client/my-sites/customer-home/cards/features/site-preview/index.tsx#L74-L78

But it points to /site-editor/[domain]?canvas=edit.

I checked Atomic, and there's just no link for non block themes. So I added a condition.

ellatrix added the [Type] Task label Jan 15, 2025

github-actions bot added [mu wpcom Feature] Wpcom Dashboard Widgets [Package] Jetpack mu wpcom WordPress.com Features [Status] In Progress labels Jan 15, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jan 15, 2025

ellatrix force-pushed the add/site-widget branch from abbc757 to bf206eb Compare January 16, 2025 20:52

github-actions bot added [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Wpcomsh labels Jan 16, 2025

ellatrix added 3 commits January 22, 2025 14:27

MU WPCOM: dashboard: add site links/preview

7018a23

changelog

c3c6a83

Add hosting overview button

6189deb

ellatrix force-pushed the add/site-widget branch from bf206eb to 6189deb Compare January 22, 2025 13:35

ellatrix marked this pull request as ready for review January 22, 2025 13:35

youknowriad reviewed Jan 22, 2025

View reviewed changes

...s/packages/jetpack-mu-wpcom/src/features/wpcom-dashboard-widgets/wpcom-dashboard-widgets.php Outdated Show resolved Hide resolved

youknowriad reviewed Jan 22, 2025

View reviewed changes

ellatrix mentioned this pull request Jan 26, 2025

Untangle My Home Automattic/wp-calypso#95386

Open

ellatrix added 3 commits January 27, 2025 13:43

Conditionally add Edit Site link

f0cd3e8

Fix mobile

e821349

Add aria-hidden

1a8c97a

youknowriad previously approved these changes Jan 27, 2025

View reviewed changes

Use inert

dc8b2c3

ellatrix dismissed youknowriad’s stale review via dc8b2c3 January 27, 2025 13:12

ellatrix merged commit 8656e93 into trunk Jan 27, 2025
60 checks passed

ellatrix deleted the add/site-widget branch January 27, 2025 13:28

github-actions bot removed [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! [Status] In Progress labels Jan 27, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MU WPCOM: dashboard: add site links/preview #41106

MU WPCOM: dashboard: add site links/preview #41106

ellatrix commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

youknowriad Jan 22, 2025

ellatrix Jan 22, 2025

youknowriad Jan 27, 2025

ellatrix Jan 27, 2025

youknowriad Jan 27, 2025

ellatrix Jan 27, 2025

ellatrix Jan 27, 2025

youknowriad Jan 22, 2025

ellatrix Jan 22, 2025

ellatrix Jan 22, 2025

ellatrix Jan 27, 2025

MU WPCOM: dashboard: add site links/preview #41106

MU WPCOM: dashboard: add site links/preview #41106

Conversation

ellatrix commented Jan 15, 2025 • edited Loading

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Jan 15, 2025 • edited Loading

github-actions bot commented Jan 15, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ellatrix commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited

Loading