Enqueuing Scripts And Using amp-bind

AMP doesn’t allow <script> tags, other than <script type="application/json"> (like in amp-bind). So this plugin will remove enqueued JavaScript files on AMP pages.

Using amp-bind can be an alternative to this. Here’s an example of how to replace these lines of JavaScript from the ‘underscores’ theme with amp-bind:

button.onclick = function() {
    if ( -1 !== container.className.indexOf( 'toggled' ) ) {
        container.className = container.className.replace( ' toggled', '' );
        button.setAttribute( 'aria-expanded', 'false' );
        menu.setAttribute( 'aria-expanded', 'false' );
    } else {
        container.className += ' toggled';
        button.setAttribute( 'aria-expanded', 'true' );
        menu.setAttribute( 'aria-expanded', 'true' );
    }
};Code language: PHP (php)

That snippets operates on the following lines from header.php. When the <button> is clicked, it toggles the aria-expanded attributes and a class.

<nav id="site-navigation" class="main-navigation"> <!-- container in JS file -->
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button> <!-- button in JS file -->
    <?php
    wp_nav_menu( array(
        'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', <!-- menu in JS file -->
        ...Code language: PHP (php)

The comments after the elements above show which JS variables refer to them. The items_wrap argument is added, as this needs to be able to change the <ul> element.

We can set an on attribute for the <button>:

on="tap:AMP.setState({primaryMenuExpanded: !primaryMenuExpanded})"Code language: PHP (php)

This will toggle the primaryMenuExpanded state. And the container, button, and menu will update based on that.

The aria-expanded attributes update based on the state:

[aria-expanded]="primaryMenuExpanded? 'true' : 'false'"Code language: PHP (php)

The final markup is:

<nav id="site-navigation" class="main-navigation" [class]="primaryMenuExpanded ? 'toggle main-navigation' : 'main-navigation'">
    <button on="tap:AMP.setState({primaryMenuExpanded: !primaryMenuExpanded})" class="menu-toggle" aria-controls="primary-menu" aria-expanded="false" [aria-expanded]="primaryMenuExpanded ? 'true' : 'false'"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
    <?php
    wp_nav_menu( array(
        'items_wrap' => '<ul [aria-expanded]="primaryMenuExpanded ? \'true\' : \'false\'" id="%1$s" class="%2$s">%3$s</ul>',
        ...Code language: PHP (php)