Skip to content

Introduce admin bar integration on AMP pages #438

@westonruter

Description

@westonruter

Feature Description

Currently the full admin bar integration is disabled on AMP pages:

$admin_bar_callback = function() {
if ( ! $this->is_active() ) {
return;
}
// Enqueue fonts.
$this->assets->enqueue_fonts();
// Enqueue styles.
$this->assets->enqueue_asset( 'googlesitekit_adminbar_css' );
if ( $this->is_amp() ) {
return;
}
// Enqueue scripts.
$this->assets->enqueue_asset( 'googlesitekit_adminbar_loader' );
};

However, thanks to a new AMP “dev mode” capability, there is now a proper way to include invalid AMP markup on an otherwise valid AMP page. When the html element has a data-ampdevmode attribute, then any element which also has this same attribute will have its validation errors suppressed. See ampproject/amphtml#20974 and ampproject/amp-wp#3084. In dev mode, the AMP validator extension will not complain about validation errors: ampproject/amphtml#24176.

This is exactly what the AMP plugin has needed to prevent the admin bar from getting excluded due to the additional CSS that the admin bar requires. For details on that, see ampproject/amp-wp#1921.

This opens up opportunities for Site Kit as well. As long as the googlesitekit_adminbar_loader script and its dependencies get the data-ampdevmode attribute added to it, then they will not get removed by the sanitizer and the admin bar on AMP pages can be just as interactive as on non-AMP pages.


Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • When AMP dev mode is enabled (via AMP plugin >= 1.4's amp_is_dev_mode()), the admin bar menu of Site Kit should expand in the frontend for an AMP request just like it does for a non-AMP request. Clicking on the menu should not take you to the admin like it does in AMP without dev mode.

Implementation Brief

Changelog entry

  • Add support for displaying the full Site Kit admin bar menu with stats also for AMP requests, by leveraging AMP's dev mode feature.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P1Medium priorityType: EnhancementImprovement of an existing feature

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions