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' );
        }
    };

    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 -->
            ...

    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})"

    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'"

    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>',
            ...