Calypsoify: Requiring the Calypsoify package in the Jetpack and Mu-wpcom plugins #37375

coder-karen · 2024-05-14T12:01:34Z

Fixes https://github.com/Automattic/vulcan/issues/320

Proposed changes:

This PR requires the newly created Calypsoify package in both the Jetpack plugin and the mu-wpcom plugin (but makes sure the class initialization in the mu-wpcom package only happens if a site is Atomic, as that mirrors the current behaviour on Simple sites (the Jetpack module assets are not loaded there)).
It also modifies the webpack.config.js file (simplified - JS dealt with by the main Jetpack config and in terms of CSS it's just compiling CSS from SCSS), imports the scss file in the js file (in 'src'), and changes how assets are registered by using the Assets package.
There have been some CSS and JS tweaks to fix things that have broken at some stage in the past - predominantly the option to toggle off the full-screen editor is now hidden if Calypsoify is enabled.
What has been fixed:
- Styles related to hiding the full-screen toggle option (via Options menu in post editor) if Calypsoified
What has been removed:
- Styles to hide full-screen option from site editor view modes (option no longer exists)
- Script to force full-screen for iframed site editor (can no longer be anything but that)
- The scripts relevant to the close button have been removed as it's only relevant for Jetpack sites, and we're removing Calypsoify from self-hosted Jetpack (Atomic sites have a nav-bar in place thanks to the ETK plugin, which overrides that button).
- The scripts relevant to the revision.php page have been removed as that was only relevant for Simple sites. Instead a change was made directly to admin-plugins to make sure the mods-gutenberg.js file there is loading correctly on the revisions page. Diff here: D149239-code
Additional info:
- The calypsoifyGutenberg variable defined in the main php file includes closeUrl, manageReusableBlocksUrl and createNewPostUrl. calypsoifyGutenberg is still needed for the posts navigation on Atomic sites - this is the closeUrl in particular, and it is added to the sidebar via the ETK plugin. Removing it here does affect the relevant link on Atomic sites. The other two variables - manageReusableBlocksUrl and createNewPostUrl' - appear to be used in /widgets.wp.com/wpcom-block-editor/calypso.editor.js. I'm not familiar with this and digging in would take considerably more time and is already out of the scope of this project, so for the sake of not breaking anything else I've left the calypsoifyGutenberg variable and associated functions intact.
- Why don't we get rid of the admin-plugins version of Calypsoify? Some of the code is WPcom specific (some in the JS file in admin-plugins). There are also small differences in the main php file so workarounds would need to be added in the mu-wpcom package version if possible. In short we could, but for now I'm opting to keep things as is on Simple. Should there ever be more work done on Calypsoify in the future maybe it would be worthwhile. There are also potential unknowns at this stage and more testing needed if removing the admin-plugins version.

Related diff: D149239-code

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

https://github.com/Automattic/vulcan/issues/320

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

No.

Testing instructions:

Jetpack self hosted and Atomic:

To test changes on a self hosted site and Atomic, apply this PR.
If applying the PR locally, make sure to build the assets with jetpack build packages/calypsoify --production, jetpack build packages/jetpack-mu-wpcom --productionandjetpack build plugins/mu-wpcom-plugin --production`.
If using the Jetpack Beta plugin to test, follow the steps in the generated comment below, remember to apply the PR both for the Jetpack plugin and the 'WordPress.com Features' plugin via the Beta tester UI. More info here too on WoA testing: PCYsg-Osp-p2
Visit the wp-admin post editor for a post (not using the Classic Editor), and add the calypsoify=1 param to the URL. Example: https://example.com/wp-admin/post.php?post=827&action=edit&calypsoify=1.
Confirm the Calypso stylesheet / scripts are loaded when the query param is added by checking the page source (see calypsoify_wpadminmods_js-css and calypsoify_wpadminmods_js-js-extra).
Click on the 'options' menu, confirm that you see no option to toggle Fullscreen mode off.
Go back to the post and remove the &calypsoify=1 from the URL, and refresh. Click on the 'options' menu, and you should see the option to toggle off Fullscreen mode. Click this, and refresh the page to confirm the change sticks.
Then, Calypsoify the URL and refresh the page again - the editor should now be full-screen, and the option to toggle off full-screen gone from the options menu.
Open up a revision for the post, and Calypsoify the URL ( for example /wp-admin/revision.php?revision=122&calypsoify=1). The revision page should now be full-screen (vs. not without Calypsoification).

Atomic-specific:

Additionally, on an Atomic test site, Calypsoify a post URL and then click on the site icon (top left). A sidebar should display (this is thanks to the ETK plugin). Hover over 'All posts' and the URL should the WordPress.com posts URL.
Do the same but without a Calypsoified post - the URL should be the wp-admin posts URL.

Simple site:

The changes added here should not affect Simple sites. The main thing to check is whether or not additional stylesheets or scripts are being loaded on Simple sites (using the steps to test this PR on Simple from the generated comment below) - checking the page source when Calypsoifying a (non-Classic-editor) post you shouldn't see duplications and assets should be coming from admin-plugins.

Note that more realistic way to test Calypsoification is to visit https://wordpress.com/block-editor/post/ and select a self hosted site.

Fixes related to the revisions page and CSS on Simple (copying the changes made here which also is relevant on Simple) can be tested here: D149239-code

github-actions · 2024-05-14T12:02:28Z

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 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.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for June 4, 2024 (scheduled code freeze on June 3, 2024).

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

Mu Wpcom plugin:

Next scheduled release: June 4, 2024.
Scheduled code freeze: May 27, 2024.

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

github-actions · 2024-05-14T12:02:36Z

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 update/calypsoify-load-package 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 update/calypsoify-load-package

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/calypsoify-load-package

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

…ad-package

…, to utilize Jetpack and helper methods

anomiex · 2024-05-16T13:34:00Z

projects/packages/calypsoify/src/class-jetpack-calypsoify.php

+			'../dist/index.js',
+			__FILE__,
+			array(
+				'jquery',


I think you meant like this here

Suggested change

'jquery',

'dependencies' => array( 'jquery' ),

OTOH, if you were to add an import jQuery from 'jquery'; to the JS file, then it would show up in the index.asset.php file and you could omit specifying it here.

But if you're going to update the script, even better would probably be to replace the $( 'some selector' ) with document.querySelector() or document.querySelectorAll(), and then the .attr() calls with direct accesses to .href and .target, so we can avoid requiring jquery at all. 🙂 And probably also replace the uses of wp.data with import { dispatch, select } from '@wordpress/data';.

Good idea :)

anomiex · 2024-05-16T13:43:35Z

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -97,6 +99,11 @@ public static function load_features() {
 		if ( class_exists( 'Automattic\Jetpack\Scheduled_Updates' ) ) {
 			Scheduled_Updates::init();
 		}
+
+		// Gets autoloaded from the Scheduled_Updates package.
+		if ( class_exists( 'Automattic\Jetpack\Calypsoify\Jetpack_Calypsoify' ) ) {


This works the same but IMO is more readable.

Suggested change

if ( class_exists( 'Automattic\Jetpack\Calypsoify\Jetpack_Calypsoify' ) ) {

if ( class_exists( Jetpack_Calypsoify::class ) ) {

Although... when wouldn't the class exist, since the package is being required in composer.json?

Good point, I just followed the previous process, but then I see the one above does not check for the class (\Marketplace_Products_Updater::init();). Will change that.

projects/packages/calypsoify/src/js/mods-gutenberg.js

anomiex · 2024-05-16T15:59:24Z

projects/packages/calypsoify/src/js/mods-gutenberg.js

+$( 'body.revision-php a' ).each( function () {
+	var href = $( this ).getAttribute( 'href' );
+	if ( href ) {
+		$( this ).setAttribute( 'href', href.replace( '&classic-editor', '' ) );
+	}


Missed the jquery uses down here. Something like this should work.

Suggested change

$( 'body.revision-php a' ).each( function () {

var href = $( this ).getAttribute( 'href' );

if ( href ) {

$( this ).setAttribute( 'href', href.replace( '&classic-editor', '' ) );

}

for ( const node of document.querySelectorAll( 'body.revision-php a' ) ) {

const href = node.getAttribute( 'href' );

if ( href ) {

node.setAttribute( 'href', href.replace( '&classic-editor', '' ) );

}

This no longer worked anyway as we needed to check if the page had loaded properly first, so has been rewritten.

anomiex · 2024-05-16T16:00:18Z

projects/packages/jetpack-mu-wpcom/src/class-jetpack-mu-wpcom.php

@@ -94,16 +92,12 @@ public static function load_features() {

 		// Initializers, if needed.
 		\Marketplace_Products_Updater::init();
+		\Jetpack_Calypsoify::get_instance();


Either bring back the use and drop the \, or do \Automattic\Jetpack\Calypsoify\Jetpack_Calypsoify here.

projects/packages/calypsoify/src/js/mods-gutenberg.js

anomiex · 2024-05-16T16:40:35Z

projects/packages/calypsoify/src/js/mods-gutenberg.js

-	} );
+var editPostHeaderInception = setInterval( function () {
+	var closeButton = document.querySelector( '.edit-post-fullscreen-mode-close__toolbar a' );
+	if ( closeButton ) {


Suggested change

if ( closeButton ) {

if ( ! closeButton ) {

…or remove code where no longer needed

…ng needed

fgiannar

On Simple:

Same styles seem to be coming from 2 different places:

wp-content/admin-plugins/calypsoify/style-gutenberg.css?m=1676281014i&ver=0.2.1
wp-content/mu-plugins/jetpack-mu-wpcom-plugin/moon/vendor/automattic/jetpack-calypsoify/dist/index.css?m=1716281754i&minify=false&ver=b40fe4e9b3851a31e12d

js is also duplicated:

Without being sandboxed: When appending &calypsoify=1 I still see the Fullscreen mode option:

Script is loaded once, however it looks like styles are not loaded?

Is the desired behaviour for Simple sites the one we see without being sandboxed?

coder-karen · 2024-05-21T13:59:51Z

@fgiannar thanks for highlighting that! That is interesting - when Sandboxed the assets do load, even just on trunk with no additional changes. But when sandboxed, they don't.

What I've noticed is that when sandboxed, admin-plugins is used, but it isn't in production. There is probably some documentation somewhere around that, I can look into. Also, the mu-wpcom changes are the only ones used on Simple sites (not the package required via Jetpack).

As for the duplicated scripts, that was because of the package being loaded via mu-wpcom plugin as well as the admin-plugin.

In short, this is what I think I should do:

Make any CSS tweaks that affect Simple directly in admin-plugins.
Make sure the mu-plugins package version is not loaded on Simple.

coder-karen · 2024-05-22T14:46:01Z

I've edited the PR description with more info and removed Simple testing steps - I did add the CSS tweak directly to the admin-plugins version as well, in the linked diff. I realized that on Simple the module from Jetpack was not being loaded at all previously, so it left two options: Either remove admin-plugins/calypsoify, or ensure the package version is only loaded on Atomic sites. To keep things more in parity with how they were I've opted for leaving the admin-plugins version and made sure the mu-wpcom package only initialized the Calypsoify class if a site is Atomic.

There are also some differences between the two - JS relevant only to Simple in the admin-plugins version, and some minor PHP relevant to Simple too. I imagine it could probably be done (moving to mu-wpcom package version), but that would also require even more research to see what other side effects there may be. I think initializing the package version only in Atomic makes sense just now.

fgiannar

Great work, Karen! Many thanks!

Left a few inline comments. Other than that I tested the functionality on self-hosted, WoA and Simple and everything works as described 👍

fgiannar · 2024-05-23T10:02:13Z

projects/packages/calypsoify/.phan/baseline.php

    // PhanTypeMismatchPropertyDefault : 1 occurrence

    // Currently, file_suppressions and directory_suppressions are the only supported suppressions
    'file_suppressions' => [
-        'src/class-jetpack-calypsoify.php' => ['PhanTypeMismatchArgumentProbablyReal', 'PhanTypeMismatchPropertyDefault'],
+        'src/class-jetpack-calypsoify.php' => ['PhanTypeMismatchPropertyDefault'],


I believe we can get rid of this entire file by fixing the issue in class-jetpack-calypsoify.php line 23 by replacing with @var object with @var self|false

Nice, thanks!

projects/packages/calypsoify/src/class-jetpack-calypsoify.php

projects/packages/calypsoify/.gitattributes

…ad-package

fgiannar

LGTM 👍

…vent hiding additional menu item

coder-karen · 2024-05-24T07:22:19Z

projects/packages/calypsoify/src/scss/style-gutenberg.scss

+  .interface-more-menu-dropdown__content .components-dropdown-menu__menu:first-child .components-menu-group:first-child .components-button:last-of-type,
+  .more-menu-dropdown__content .components-dropdown-menu__menu:first-child .components-menu-group:first-child .components-button:last-of-type {


This prevents an issue with other dropdown menu items being hidden when Calypsoified (for example 'Mobile' when clicking the Preview icon). See D149786-code for more context.
Two different selectors are used because .interface-more-menu-dropdown__content is the correct classname in WordPress core (also used in Jetpack), but .more-menu-dropdown__content is what is used on Atomic and Simple. Keeping the core version for additional safety.

fgiannar

Thanks for the CSS hotfix 👍

coder-karen · 2024-05-24T12:57:28Z

Flagging this Slack thread - p1716540893951409/1716452544.422759-slack-C05PV073SG3 - some testing discrepancies noticed this morning related to the WordPress.com post editor URLs (WordPress.com vs wp-admin URLs from the WordPress.com posts page if this branch is checked out, vs not). It looks as though this was localized to existing test sites, not replicable elsewhere, but noting it here too.

coder-karen added 3 commits May 14, 2024 11:20

Requiring the Calypsoify package in the Jetpack plugin

9333d30

Require the Calypsoify package in the mu-wpcom package

96f5b0a

changelog

8b86496

coder-karen self-assigned this May 14, 2024

coder-karen added the [Status] In Progress label May 14, 2024

github-actions bot added [Feature] Calypsoify [Package] Calypsoify [Package] Jetpack mu wpcom WordPress.com Features [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] mu wpcom jetpack-mu-wpcom plugin labels May 14, 2024

coder-karen added 6 commits May 14, 2024 13:32

Merge remote-tracking branch 'origin/trunk' into update/calypsoify-lo…

c13d049

…ad-package

Updating package versions

a016abf

Merge branch 'trunk' into update/calypsoify-load-package

d0de60e

Updating package versions

47e2b15

Modify webpack config and asset enqueue method (using Assets package)…

85b76de

…, to utilize Jetpack and helper methods

Updating versions and adding array key ti fix failing test

bd0f318

anomiex reviewed May 16, 2024

View reviewed changes

coder-karen added 2 commits May 16, 2024 16:26

Update composer.lock and remove class check in wpcom.

ae803f7

Remove jquery from the Calypsoify JS file

0a9e1de

anomiex reviewed May 16, 2024

View reviewed changes

projects/packages/calypsoify/src/js/mods-gutenberg.js Outdated Show resolved Hide resolved

coder-karen added 2 commits May 16, 2024 17:11

JS fixes and package declration fix - based on review suggestions

1c07fae

Update phan baseline

e233613

anomiex reviewed May 16, 2024

View reviewed changes

coder-karen added 4 commits May 17, 2024 14:46

Updating styles and scripts to use correct classes and JS functions, …

23b5a05

…or remove code where no longer needed

Updating .gitattributes so changes will be included in production too

e3debc0

Updating package.json and webpack config due to less dependencies bei…

e1e09b0

…ng needed

Fixing merge conflicts

1922e77

fgiannar reviewed May 21, 2024

View reviewed changes

coder-karen added [Status] In Progress and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels May 21, 2024

coder-karen added 2 commits May 22, 2024 15:00

Resolve merge conflict

9bc48c5

Only load the Calypsoify features on Atomic sites

2fd32b0

coder-karen added 2 commits May 22, 2024 15:46

Merge branch 'trunk' into update/calypsoify-load-package

22ebfc2

Updating lock file

9f52782

coder-karen added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels May 22, 2024

fgiannar reviewed May 23, 2024

View reviewed changes

projects/packages/calypsoify/.gitattributes Outdated Show resolved Hide resolved

coder-karen added 3 commits May 23, 2024 11:43

Update variable declaration, and remove phan files as a result

ef786cb

Code cleanup based on reviews - EOF newline, removing a class call

4d59e5e

Merge remote-tracking branch 'origin/trunk' into update/calypsoify-lo…

8432a9c

…ad-package

fgiannar previously approved these changes May 23, 2024

View reviewed changes

Adding back skeleton phan files to satisfy linter

2efda9f

coder-karen dismissed fgiannar’s stale review via 2efda9f May 23, 2024 11:32

coder-karen added 2 commits May 24, 2024 08:17

Adding a more specific CSS selector for hiding fullscreen toggle, pre…

1ae9223

…vent hiding additional menu item

Merge branch 'trunk' into update/calypsoify-load-package

18dde0d

coder-karen commented May 24, 2024

View reviewed changes

coder-karen requested a review from fgiannar May 24, 2024 07:39

fgiannar approved these changes May 24, 2024

View reviewed changes

fgiannar added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from Crew. Label will be renamed soon. labels May 24, 2024

coder-karen merged commit 88511a9 into trunk May 24, 2024
73 checks passed

coder-karen deleted the update/calypsoify-load-package branch May 24, 2024 12:58

github-actions bot removed the [Status] Ready to Merge Go ahead, you can push that green button! label May 24, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Calypsoify: Requiring the Calypsoify package in the Jetpack and Mu-wpcom plugins #37375

Calypsoify: Requiring the Calypsoify package in the Jetpack and Mu-wpcom plugins #37375

coder-karen commented May 14, 2024 •

edited

github-actions bot commented May 14, 2024

github-actions bot commented May 14, 2024 •

edited

anomiex May 16, 2024

coder-karen May 16, 2024

anomiex May 16, 2024

coder-karen May 16, 2024 •

edited

anomiex May 16, 2024

coder-karen May 17, 2024

anomiex May 16, 2024 •

edited

anomiex May 16, 2024

fgiannar left a comment

coder-karen commented May 21, 2024

coder-karen commented May 22, 2024

fgiannar left a comment

fgiannar May 23, 2024

coder-karen May 23, 2024

fgiannar left a comment

coder-karen May 24, 2024

fgiannar left a comment

coder-karen commented May 24, 2024

	if ( class_exists( 'Automattic\Jetpack\Calypsoify\Jetpack_Calypsoify' ) ) {
	if ( class_exists( Jetpack_Calypsoify::class ) ) {

		.interface-more-menu-dropdown__content .components-dropdown-menu__menu:first-child .components-menu-group:first-child .components-button:last-of-type,
		.more-menu-dropdown__content .components-dropdown-menu__menu:first-child .components-menu-group:first-child .components-button:last-of-type {

Calypsoify: Requiring the Calypsoify package in the Jetpack and Mu-wpcom plugins #37375

Calypsoify: Requiring the Calypsoify package in the Jetpack and Mu-wpcom plugins #37375

Conversation

coder-karen commented May 14, 2024 • edited

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 May 14, 2024

github-actions bot commented May 14, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coder-karen May 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anomiex May 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fgiannar left a comment

Choose a reason for hiding this comment

coder-karen commented May 21, 2024

coder-karen commented May 22, 2024

fgiannar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fgiannar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fgiannar left a comment

Choose a reason for hiding this comment

coder-karen commented May 24, 2024

coder-karen commented May 14, 2024 •

edited

github-actions bot commented May 14, 2024 •

edited

coder-karen May 16, 2024 •

edited

anomiex May 16, 2024 •

edited