Skip to content

Widgets: Migrate front-end jQuery code to vanilla JS#14910

Merged
jeherve merged 2 commits intomasterfrom
update/widgets-vanilla-js-fe
Mar 17, 2020
Merged

Widgets: Migrate front-end jQuery code to vanilla JS#14910
jeherve merged 2 commits intomasterfrom
update/widgets-vanilla-js-fe

Conversation

@dero
Copy link
Copy Markdown
Contributor

@dero dero commented Mar 6, 2020

These pieces of the codebase have been reviewed:

  • /modules/widget-visibility
  • /modulels/widgets/*

These widgets are using jQuery in some capacity:

  • social-icons: In the admin context only.
  • simple-payments: In the admin context only.
  • contact-info: In the admin context only.
  • search: Ordering + filters functionality on the front-end + admin context.
  • eu-cookie-law: In the admin context only. (Frontend handled by @kienstra in https://github.com/Automattic/jetpack/pull/14753/files)
  • milestone: Dynamic countdown on the front-end + admin context.
  • gravatar-profile: In the admin context only.
  • gallery: FE + admin context, but not addressed, because the widget is not available in WP 4.9+ (superseded by the core gallery widget).
  • rsslinks: In the admin context only.
  • customizer-utils: In the admin context only.
  • twitter-timeline: In the admin context only.
  • `widget-visibility: feature: In the admin context only.

The two widgets in bold have been converted to vanilla JS. Others are either not relevant anymore (gallery) or use jQuery in the admin context only, which was not in scope for this PR.

It doesn't seem like a good use of development time to rewrite the admin jQuery scripts because jQuery is arguably going to remain to be loaded in the admin context for a long time. However if this assumption is incorrect and we want to fully strip all jQuery code, please let me know.

Fixes #14864

Changes proposed in this Pull Request:

  • Rewrite the FE jQuery code to vanilla JS in the search and milestone widgets.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

  • This is an update to the existing extra Jetpack widgets.

Testing instructions:

  • Go to WP Admin > Jetpack > Settings > Writing.
  • Enable "Make extra widgets available for use on your site including subscription forms and Twitter streams".
  • Add the Search (Jetpack) and Milestone (Jetpack) widgets to the website.
  • Test the added plugins
    • Search widget: Make sure that when the "Sort by" select box value is changed, the page is automatically refreshed and new sorting rules are applied.
    • Search widget: Make sure the category filters that appear after any initial search work as intended.
    • Milestone widget: Set the milestone to happen in the next minute.
    • Milestone widget: On the front-end, observe the live countdown, i.e. the seconds are updated live and when the timer hits 0, the milestone message is displayed.
      • Note: Please be aware of an existing issue with twentytwenty (and potentially other themes) and pick a there that exposes the widget ID. Failing to do that will lead to the widget not updating on the front-end.

Tested in:

  • Chrome 80 (Ubuntu).
  • IE 11 (Win 10).

Proposed changelog entry for your changes:

  • Rewritten the front-end jQuery code of the Search and Milestone widgets into vanilla JS.

@dero dero requested a review from a team March 6, 2020 15:47
@jetpackbot
Copy link
Copy Markdown
Collaborator

jetpackbot commented Mar 6, 2020 •
edited
Loading

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: April 7, 2020.
Scheduled code freeze: March 31, 2020

Generated by 🚫 dangerJS against 6e50664

@dero dero force-pushed the update/widgets-vanilla-js-fe branch from 568ea08 to 6e50664 Compare March 6, 2020 15:54
@dero
Copy link
Copy Markdown
Contributor Author

dero commented Mar 6, 2020

@kienstra Could you please review this when you have a moment?

kienstra
kienstra approved these changes Mar 10, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@kienstra kienstra left a comment

Choose a reason for hiding this comment

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

Looks good!

Hi @dero,
This looks really good.

The only point I made isn't related to this diff.

modules/widgets/milestone/milestone.js
var widget = document.getElementById( args.id ),
id = args.id,
refresh = args.refresh * 1000;

Copy link
Copy Markdown
Contributor

@kienstra kienstra Mar 9, 2020

Choose a reason for hiding this comment

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

This isn't about your work, but a general comment about the widget. This diff didn't cause the issue.

What do you think about exiting here if ! widget ?

if ( ! widget ) {
        return;
}

It looks like in Twenty Twenty, widgets don't have an id:

widget-ids-here

...so the var widget = document.getElementById( args.id ) will be null.

Though maybe this isn't a problem in other themes. For example, Twenty Sixteen works fine:

ids-widget

Copy link
Copy Markdown
Contributor Author

@dero dero Mar 10, 2020

Choose a reason for hiding this comment

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

@kienstra You're absolutely right, Ryan, and I've noticed that issue as well and opened a separate #14904 a couple days ago - didn't want to mix a bug fix with optimization in one PR.

Copy link
Copy Markdown
Contributor

@kienstra kienstra Mar 10, 2020

Choose a reason for hiding this comment

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

Ah, nice! You're ahead of the game, sorry for missing that issue.

modules/widgets/milestone/milestone.js
success: function( result ) {
$widget.find( '.milestone-countdown' ).replaceWith( result.message );
refresh = result.refresh * 1000;
xhr.onload = function() {
Copy link
Copy Markdown
Contributor

@kienstra kienstra Mar 9, 2020

Choose a reason for hiding this comment

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

Nice use of xhr instead of $.ajax, this worked well when stepping through this in the browser.

modules/widgets/search.php
jetpackSearchModuleSorting();
} else {
document.addEventListener( 'DOMContentLoaded', jetpackSearchModuleSorting );
}
Copy link
Copy Markdown
Contributor

@kienstra kienstra Mar 10, 2020

Choose a reason for hiding this comment

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

Nice alternative to jQuery( document ).ready()

modules/widgets/search.php
orderBy.value = values[0];
order.value = values[1];

form.submit();
Copy link
Copy Markdown
Contributor

@kienstra kienstra Mar 10, 2020

Choose a reason for hiding this comment

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

This select works as expected:

form-do

@jeherve jeherve added this to the 8.4 milestone Mar 11, 2020
leogermani
leogermani approved these changes Mar 16, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@leogermani leogermani left a comment

Choose a reason for hiding this comment

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

PR Looks good to me!

I've tested all the scenarios described and everything worked as expected. I also looked at the code. All good.

I've opened #15009 to suggest an improvement to the widget. It's not related to this PR, but I found this out while testing it.

@matticbot
Copy link
Copy Markdown
Contributor

matticbot commented Mar 17, 2020

Caution: This PR has changes that must be merged to WordPress.com
Hello dero! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D40431-code before merging this PR. Thank you!

@jeherve jeherve self-assigned this Mar 17, 2020
@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review This PR is ready for review. labels Mar 17, 2020
jeherve
jeherve approved these changes Mar 17, 2020
View reviewed changes
Copy link
Copy Markdown
Member

@jeherve jeherve left a comment

Choose a reason for hiding this comment

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

This tests well for me. Merging.

@jeherve jeherve merged commit 726d10b into master Mar 17, 2020
@jeherve jeherve deleted the update/widgets-vanilla-js-fe branch March 17, 2020 12:04
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Mar 17, 2020
jeherve added a commit that referenced this pull request Mar 20, 2020
@jeherve
Changelog: add #14910
2d4df84
jeherve added a commit that referenced this pull request Mar 31, 2020
@jeherve
8.4 Changelog (#15075)
0eb0b35 
* Initial changelog entry

* Changelog: add #14904

* Changelog: add #14910

* Changelog: add #14913

* Changelog: add #14916

* Changelog: add #14922

* Changelog: add #14924

* Changelog: add #14925

* Changelog: add #14928

* Changelog: add #14840

* Changelog: add #14841

* Changelog: add #14842

* Changelog: add #14826

* Changelog: add #14835

* Changelog: add #14859

* Changelog: add #14884

* Changelog: add #14888

* Changelog: add #14817

* Changelog: add #14814

* Changelog: add #14819

* Changelog;: add #14797

* Changelog: add #14798

* Changelog: add #14802

* Changelog: add #13676

* Changelog: add #13744

* Changelog: add #13777

* Changelog: add #14446

* Changelog: add #14739

* Changelog: add #14770

* Changelog: add #14784

* Changelog: add #14897

* Changelog: add #14898

* Changelog: add #14968

* Changelog: add #14985

* Changelog: add #15044

* Changelog: add #15052

* Update to remove Podcast since it remains in Beta

* Changelog: add #14803

* Changelog: add #15028

* Changelog: add #15065

* Changelog:add #14886

* Changelog: add #15118

* Changelog: add #14990

* Changelog: add #14528

* Changelog: add #15120

* Changelog: add #15126

* Changelog: add #15049

* Chanegelog: add #14852

* Changelog: add #15090

* Changelog: add #15138

* Changelog: add #15124

* Changelog:add #15055

* Changelog: add #15017

* Changelog: add #15109

* Changelog: add #15145

* Changelog:add #15096

* Changelog:add #15153

* Changelog: add #15133

* Changelog: add #14960

* Changelog: add #15127

* Changelog: add #15056

* Copy current changelog to changelog archive.

* Clarify changelog description
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jeherve jeherve jeherve approved these changes

@leogermani leogermani leogermani approved these changes

+1 more reviewer

@kienstra kienstra kienstra approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@jeherve jeherve

Labels

[Feature] Extra Sidebar Widgets [Focus] Performance Touches WP.com Files

Projects

None yet

Milestone

8.4

Development

Successfully merging this pull request may close these issues.

Extra Widgets: Update to not require jQuery

6 participants

@dero @jetpackbot @matticbot @jeherve @leogermani @kienstra