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.

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

Add support for AMP Dev Mode in Notes module #13450

Merged
merged 4 commits into from Oct 5, 2019

Conversation

@westonruter
Copy link
Collaborator

@westonruter westonruter commented Sep 8, 2019

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:

  • Likes (Note that the Like button does not yet work in AMP: #9555)
  • Calypsoify
  • Masterbar

Changes proposed in this Pull Request:

  • Add 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. Revert now-unnecessary change in #10945.

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.
@jetpackbot
Copy link

@jetpackbot jetpackbot commented Sep 8, 2019

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

);
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
Collaborator Author

@westonruter westonruter Sep 8, 2019

Choose a reason for hiding this comment

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

modules/notes.php Outdated Show resolved Hide resolved
@westonruter
Copy link
Collaborator Author

@westonruter westonruter commented Sep 10, 2019

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

@westonruter
Copy link
Collaborator Author

@westonruter westonruter commented Sep 25, 2019

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 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 Sep 25, 2019
@westonruter westonruter requested a review from as a code owner Sep 25, 2019
@westonruter
Copy link
Collaborator Author

@westonruter westonruter commented Sep 25, 2019

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

@westonruter
Copy link
Collaborator Author

@westonruter westonruter commented Sep 29, 2019

@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 Oct 1, 2019

issue resolved.

Copy link
Member

@jeherve jeherve left a comment

This looks good to me. 👍

westonruter added 3 commits Oct 2, 2019
* Use regular img for admin-bar stats on AMP pages thanks to dev mode
* Add data-ampdevmode attribute to inline style
@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 Oct 2, 2019
@westonruter westonruter removed their assignment Oct 2, 2019
@westonruter
Copy link
Collaborator Author

@westonruter westonruter commented Oct 2, 2019

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

jeherve
jeherve approved these changes Oct 2, 2019
@kraftbj kraftbj merged commit 6dfc387 into Automattic:master Oct 5, 2019
4 checks passed
jeherve added a commit that referenced this issue Oct 8, 2019
Follow up from #13450

In some cases, admin-bar styles may be dequeued (like when the Masterbar module is active).
kraftbj added a commit that referenced this issue Oct 9, 2019
* 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 issue Oct 23, 2019
jeherve added a commit that referenced this issue Oct 29, 2019
* 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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants