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.

Sign up for GitHub

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

Jump to bottom

Add support for AMP Dev Mode in Notes module #13450

Merged
merged 4 commits into from
Oct 5, 2019
Merged

Add support for AMP Dev Mode in Notes module #13450

merged 4 commits into from
Oct 5, 2019

Conversation

westonruter
Copy link
Contributor

@westonruter westonruter commented Sep 8, 2019 •
edited
Loading

As noted in ampproject/amp-wp#1921, AMP now supports a dev mode (ampproject/amphtml#20974, ampproject/amp-wp#3187) which allows a document to mark certain elements as being excluded for AMP validation. This is exactly what the AMP plugin has needed to allow the admin bar without fighting against the 50KB CSS limit. It also opens up the door to using scripts on AMP pages to add interactivity to the admin bar without worrying about AMP compatibility. This is exactly what Jetpack has needed for its admin bar integration on AMP pages (e.g. Stats and Notes).

This PR begins to implement support for that. Any markup that is being added by Jetpack to the frontend which is used by an authenticated user for administration should be amended with the data-ampdevmode attribute to each element. The elements in the admin bar items will get this automatically, so the primary concern is the script, link, and style elements that are output to extend on the frontend admin bar.

For more information on this, see Integrating with AMP Dev Mode in WordPress.

Part of #9730. This revisits/reverts aspects of #10945.

Support implemented in these modules:

Before:

Screen Shot 2019-10-02 at 09 02 04

Screen Shot 2019-10-02 at 09 02 24

After:

Screen Shot 2019-10-02 at 09 00 13

Screen Shot 2019-10-02 at 08 59 22

Notice the Notes admin menu item is not broken any longer after the changes are applied.

To revisit later:

Changes proposed in this Pull Request:

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

  • Existing

Testing instructions:

  • Install and activate the AMP plugin v1.3.
  • Check out this branch.
  • There should not be validation errors from the Stats or Notes modules.

Proposed changelog entry for your changes:

  • Added support for AMP Dev Mode in Notes module, eliminating the need to deactivate the module to prevent AMP validation errors in Standard/Transitional modes of the AMP plugin.

@westonruter westonruter mentioned this pull request Sep 8, 2019
Merged
17 tasks
@jetpackbot
Copy link

jetpackbot commented Sep 8, 2019 •
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: November 5, 2019.
Scheduled code freeze: October 29, 2019

Generated by 🚫 dangerJS against 27f2494

@claudiulodro claudiulodro added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Status] Proposal labels Sep 8, 2019
@westonruter westonruter mentioned this pull request Sep 8, 2019
Merged
westonruter
westonruter commented Sep 8, 2019
View reviewed changes
modules/stats.php
);
if ( Jetpack_AMP_Support::is_amp_request() ) {
$menu['title'] = "<amp-img src='$img_src_2x' width=112 height=24 layout=fixed alt='$alt' title='$title'></amp-img>";
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Originally in https://github.com/Automattic/jetpack/pull/10945/files#diff-f3b7c7c56cbf7524138248379aa9b949R991

Now unnecessary.

@jeherve jeherve added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it AMP labels Sep 9, 2019
jeherve
jeherve previously requested changes Sep 9, 2019
View reviewed changes
modules/notes.php Outdated Show resolved Hide resolved
@westonruter
Copy link
Contributor Author

westonruter commented Sep 10, 2019 •
edited
Loading

FYI: I've attached a build of the AMP plugin with a link the PR description at ampproject/amp-wp#3187

@westonruter westonruter mentioned this pull request Sep 11, 2019
Open
@westonruter westonruter mentioned this pull request Sep 19, 2019
Closed
@westonruter
Copy link
Contributor Author

Here's a writeup of Dev Mode in the AMP plugin and how to integrate with it: https://weston.ruter.net/2019/09/24/integrating-with-amp-dev-mode-in-wordpress/

@jeherve
Copy link
Member

jeherve commented Sep 25, 2019

If this is ready for review, could you mark the PR as such? It's currently set to draft.

Thanks!

@westonruter westonruter marked this pull request as ready for review September 25, 2019 14:02
@westonruter westonruter requested a review from a team September 25, 2019 14:02
@westonruter
Copy link
Contributor Author

(It was draft because there are some outstanding questions regarding Likes, Calypsoify, and Masterbar.)

@westonruter
Copy link
Contributor Author

@jeherve Perhaps we should just deal with those modules later. Having support for Notes (and Stats) would be a good win.

@kraftbj kraftbj dismissed jeherve’s stale review October 1, 2019 21:42

issue resolved.

jeherve
jeherve previously approved these changes Oct 2, 2019
View reviewed changes
Copy link
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 looks good to me. 👍

@jeherve jeherve added [Status] Ready to Merge Go ahead, you can push that green button! and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Oct 2, 2019
@jeherve jeherve added this to the 7.9 milestone Oct 2, 2019
@jeherve jeherve added [Feature] Notifications [Feature] Stats Data Feature that enables users to track their site's traffic and gain insights on popular content. and removed [Status] Proposal labels Oct 2, 2019
@westonruter
Add AMP dev mode support for stats in admin bar
de66747 
* Use regular img for admin-bar stats on AMP pages thanks to dev mode
* Add data-ampdevmode attribute to inline style
@westonruter
Add AMP dev mode support for Notes modules
b8d660a
@westonruter
Use array() syntax instead of []
5ebedfd
@westonruter westonruter changed the title Add support for AMP dev mode Add support for AMP Dev Mode in Notes module Oct 2, 2019
@westonruter westonruter force-pushed the add/amp-dev-mode-support branch from d5762d1 to 27f2494 Compare October 2, 2019 16:04
@westonruter westonruter removed their assignment Oct 2, 2019
@westonruter
Copy link
Contributor Author

@jeherve I've updated the PR description based on the changes being proposed now. This should be good to merge.

@westonruter westonruter mentioned this pull request Oct 2, 2019
Open
@kraftbj kraftbj merged commit 6dfc387 into Automattic:master Oct 5, 2019
@matticbot matticbot added [Status] Needs Changelog and removed [Status] Ready to Merge Go ahead, you can push that green button! labels Oct 5, 2019
jeherve added a commit that referenced this pull request Oct 8, 2019
@jeherve
Notifications: do not rely on admin-bar styles
95a61f4 
Follow up from #13450

In some cases, admin-bar styles may be dequeued (like when the Masterbar module is active).
@jeherve jeherve mentioned this pull request Oct 8, 2019
Merged
kraftbj pushed a commit that referenced this pull request Oct 9, 2019
@jeherve @kraftbj
Notifications: do not rely on admin-bar styles (#13690)
cd17208 
* Notifications: do not rely on admin-bar styles

Follow up from #13450

In some cases, admin-bar styles may be dequeued (like when the Masterbar module is active).

* Stop dequeuing style when we need it (when notes is active)

This also adds the dependency back:
#13690 (comment)
jeherve added a commit that referenced this pull request Oct 23, 2019
@jeherve
Changelog: add #13450
3007085
jeherve added a commit that referenced this pull request Oct 29, 2019
@jeherve
7.9: Changelog (#13608)
6cd1621 
* 7.9: Changelog

* Update version number

* Update stable tag and tested up to

* Changelog: add #13530

* changelog: add #13578

* Changelog: add #13598

* Changelog: add entry for numerous block preview changes

* Changelog: add #13599

* changelog: add #13541

* Changelog: add #13542

* Changelog: add #13331

* Changelog: add #13558

* Changelog: add #13409

* Changelog: add #13582

* Changelog: add #13600

* Changelog: add #13601

* Changelog: add #13595

* Changelog: add #12695

* Changelog: add #13009

* Changelog: add #13649

* Changelog: add #13450

* Changelog: add #13507

* Changelog: add #13658

* Changelog: add #13687

* changelog: add #13683

* Changelog: add #9323

* Changelog: add #13681

* Fix typos in readme

* Add link to WordPress Beta Tester plugin

* Changelog: add #13630

* Changelog: add #13695

* Changelog: add #13659

* Changelog: add #13716

* Changelog: add #13664

* Changelog: add #13682

* Changelog: add #13362

* Changelog: add #13563

* Add testing list for #13563

* Changelog: add #13735

* Changelog: add #13752

* Changelog: add #13624

* Changelog: add #13756

* Changelog: add #13745

* Changelog: add #13728

* Changelog: add #13779

* Changelog: add #13699

* Changelog: add #13804

* Changelog: add #13761

* Changelog: add #13637

* Changelog: add #13517

* Changelog: add #13521

* Changelog: add #13729

* Testing list: add testing instructions for #13729

* Changelog: add sync changes

* Changelog: add #13807

* Changelog: add #13654

* Changelog: add #13795

* Changelog: add #13801

* Changelog: add #13818

* Changelog: add #13725

* Changelog: add #13831

* Changelog: add #13516

* Testing list: add Twenty Twenty instructions

* Changelog: add #13799

* Changelog: add #13805

* Changelog: add #13688

* Changelog: add #13830
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

Assignees
No one assigned
Labels
AMP [Feature] Notifications [Feature] Stats Data Feature that enables users to track their site's traffic and gain insights on popular content. [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it
Projects
None yet
Milestone
7.9
Development

Successfully merging this pull request may close these issues.
6 participants
@westonruter @jetpackbot @jeherve @kraftbj @claudiulodro @matticbot