Jetpack: Notifications: Twenty Twenty theme JS blocks notifications menu from displaying properly (release candidate)

[lancewillett]

Steps to reproduce the issue

1. Activate default theme "Twenty Twenty"
2. Activate Jetpack beta tester plugin, and use "Release Candidate"
3. Go to front-end of site
4. In toolbar, try to open the notifications panel
5. When inspecting, note that the iframe wpnt-notes-iframe2 has an added width attribute of 0px (possibly added by the Twenty Twenty theme JS)

What I expected

For the notifications panel to open as expected.

What happened instead

The notifications panel does not open.

Screenshots

[lancewillett]

This bug reported by @m on ma.tt originally.

I'm able to replicate on a Jurassic Ninja site, as well as my own Jetpack sites — after enabling the Twenty Twenty default theme.

[lancewillett]

I narrowed it down to this bit of code in Twenty Twenty:

It seems to be too greedy, changing the notifications iframe width to 0px so it can't be toggled on.

However — probably the notifications client loaded via Jetpack should account for this and make sure its own iframe element is visible and not hidden.

/*  -----------------------------------------------------------------------------------------------
    Intrinsic Ratio Embeds
--------------------------------------------------------------------------------------------------- */

twentytwenty.intrinsicRatioVideos = {

    init: function() {
        this.makeFit();

        window.addEventListener( 'resize', function() {
            this.makeFit();
        }.bind( this ) );
    },

    makeFit: function() {
        document.querySelectorAll( 'iframe, object, video' ).forEach( function( video ) {
            var ratio, iTargetWidth,
                container = video.parentNode;

            // Skip videos we want to ignore
            if ( video.classList.contains( 'intrinsic-ignore' ) || video.parentNode.classList.contains( 'intrinsic-ignore' ) ) {
                return true;
            }

            if ( ! video.dataset.origwidth ) {
                // Get the video element proportions
                video.setAttribute( 'data-origwidth', video.width );
                video.setAttribute( 'data-origheight', video.height );
            }

            iTargetWidth = container.offsetWidth;

            // Get ratio from proportions
            ratio = iTargetWidth / video.dataset.origwidth;

            // Scale based on ratio, thus retaining proportions
            video.style.width = iTargetWidth + 'px';
            video.style.height = ( video.dataset.origheight * ratio ) + 'px';
        } );
    }

}; // twentytwenty.instrinsicRatioVideos

[jeherve]

I created 49030-core to suggest a change that would solve the issue in Core.

Until then, #14263 should be a good bandaid in Jetpack.