Possible conflict with Web Stories plugin

[ktmn]

Think I found a conflict, see if anyone can reproduce.

Bug Description

Block editor crashes when AMP 2.0.0-beta3 and Web Stories 1.0.0-beta.1 are activated at the same time. Crash happens when I click the three dots in the top right corner of the editor, or on the block toolbar. Does not seem to happen when creating a new post, only when editing an existing one.

WP: 5.4.2 (also 5.4.3-alpha-48366 and 5.5-RC3-48781) Theme: Twenty Seventeen AMP template mode: standard

compose.js?ver=c4775e2aa9288586791e26a980eff851:616 Uncaught TypeError: First argument must be a String, HTMLElement, HTMLCollection, or NodeList
    at listen (compose.js?ver=c4775e2aa9288586791e26a980eff851:616)
    at Clipboard.listenClick (compose.js?ver=c4775e2aa9288586791e26a980eff851:1198)
    ...

components.js?ver=90861a4430fed183d94d6750cb7ae6f4:26799 Uncaught TypeError: Cannot read property 'destroy' of undefined
    at ClipboardButton.componentWillUnmount (components.js?ver=90861a4430fed183d94d6750cb7ae6f4:26799)
    at callComponentWillUnmountWithTimer (react-dom.js?ver=16.9.0:20004)
    ...

The above error occurred in the <ClipboardButton> component:
    in ClipboardButton (created by CopyContentMenuItem)
    in CopyContentMenuItem (created by WithState(CopyContentMenuItem))
    ...

Steps to reproduce

1. Default WP install, no plugins, any theme should work
2. Activate AMP 2.0.0-beta3 plugin
3. Activate Web Stories 1.0.0-beta.1 plugin
4. Edit existing page or post
5. Open "More tools and options" menu in top right corner or block toolbar
6. If still doesn't crash add a block or something, sometimes it crashes and outputs hundreds of errors a second, sometimes after you click on a block, maybe depends on editor content

[westonruter]

cc @swissspidy

[swissspidy]

I cannot reproduce this. How did you come to the conclusion it's a conflict with Web Stories?

[westonruter]

@ktmn Do you have any other plugins active? Please submit your Site Health info for providing the full context. You can use a private submission form if you need. Please ping once submitted.

[ktmn]

How did you come to the conclusion it's a conflict with Web Stories?

@swissspidy I had this happen in my dev env and deactivating AMP plugin fixed it. Then I added the AMP beta to my vanilla WP env to see if it's a bug and didn't have the error. So it must have been one of the plugins in my dev env. When I narrowed it down to Web Stories, I installed it also to the vanilla env and could reproduce the error - only when both plugins are active.

@westonruter Here's the site health (It's now updated to WP 5.5 release):

### wp-core ###

version: 5.5
site_language: en_US
user_language: en_US
timezone: +00:00
permalink: undefined
https_status: false
user_registration: 0
blog_public: 1
default_comment_status: open
multisite: false
user_count: 1
dotorg_communication: true

### wp-paths-sizes ###

wordpress_path: /mnt/c/www/wp-default/public_html
wordpress_size: 46.76 MB (49027571 bytes)
uploads_path: /mnt/c/www/wp-default/public_html/wp-content/uploads
uploads_size: 2.33 MB (2441535 bytes)
themes_path: /mnt/c/www/wp-default/public_html/wp-content/themes
themes_size: 10.51 MB (11021093 bytes)
plugins_path: /mnt/c/www/wp-default/public_html/wp-content/plugins
plugins_size: 14.96 MB (15690400 bytes)
database_size: 6.55 MB (6864896 bytes)
total_size: 81.11 MB (85045495 bytes)

### wp-active-theme ###

name: Twenty Seventeen (twentyseventeen)
version: 2.4
author: the WordPress team
author_website: https://wordpress.org/
parent_theme: none
theme_features: core-block-patterns, automatic-feed-links, title-tag, post-thumbnails, menus, html5, post-formats, custom-logo, customize-selective-refresh-widgets, editor-style, editor-styles, wp-block-styles, responsive-embeds, starter-content, custom-header, amp, widgets
theme_path: /mnt/c/www/wp-default/public_html/wp-content/themes/twentyseventeen
auto_update: Disabled

### wp-themes-inactive (9) ###

Twenty Eleven: version: 3.5, author: the WordPress team,Auto-updates disabled
Twenty Fifteen: version: 2.7, author: the WordPress team,Auto-updates disabled
Twenty Fourteen: version: 2.9, author: the WordPress team,Auto-updates disabled
Twenty Nineteen: version: 1.7, author: the WordPress team,Auto-updates disabled
Twenty Sixteen: version: 2.2, author: the WordPress team,Auto-updates disabled
Twenty Ten: version: 3.1, author: the WordPress team,Auto-updates disabled
Twenty Thirteen: version: 3.1, author: the WordPress team,Auto-updates disabled
Twenty Twelve: version: 3.2, author: the WordPress team,Auto-updates disabled
Twenty Twenty: version: 1.5, author: the WordPress team,Auto-updates disabled

### wp-plugins-active (3) ###

AMP: version: 2.0.0-beta3-20200808T045205Z-183be02c2, author: AMP Project Contributors, Auto-updates disabled
Web Stories: version: 1.0.0-beta.1, author: Google, Auto-updates disabled
WP Auto Login: version: 1.0.1, author: Ren Ventura, Auto-updates disabled

### wp-plugins-inactive (4) ###

Akismet Anti-Spam: version: 4.1.6, author: Automattic, Auto-updates disabled
Gutenberg: version: 8.7.1, author: Gutenberg Team, Auto-updates disabled
Monster Widget: version: 0.3, author: Automattic, Auto-updates disabled
WordPress Beta Tester: version: 2.2.12, author: Peter Westwood, Andy Fragen, Auto-updates disabled

### wp-media ###

image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1673
imagemagick_version: ImageMagick 6.8.9-9 Q16 x86_64 2018-09-28 http://www.imagemagick.org
file_uploads: File uploads is turned off
post_max_size: 256M
upload_max_filesize: 256M
max_effective_size: 256 MB
max_file_uploads: 20
imagick_limits: 
    imagick::RESOURCETYPE_AREA: 32 GB
    imagick::RESOURCETYPE_DISK: -1
    imagick::RESOURCETYPE_FILE: 6144
    imagick::RESOURCETYPE_MAP: 32 GB
    imagick::RESOURCETYPE_MEMORY: 16 GB
    imagick::RESOURCETYPE_THREAD: 12
gd_version: 2.2.5
ghostscript_version: 9.25

### wp-server ###

server_architecture: Linux 4.4.0-18362-Microsoft x86_64
httpd_software: Apache/2.4.18 (Ubuntu)
php_version: 7.2.22-1+ubuntu16.04.1+deb.sury.org+1 64bit
php_sapi: apache2handler
max_input_variables: 1000
time_limit: 90
memory_limit: 256M
max_input_time: 60
upload_max_size: 256M
php_post_max_size: 256M
curl_version: 7.47.0 OpenSSL/1.0.2g
suhosin: false
imagick_availability: true
pretty_permalinks: true

### wp-database ###

extension: mysqli
server_version: 5.7.26-0ubuntu0.16.04.1
client_version: mysqlnd 5.0.12-dev - 20150407 - $Id: 3591daad22de08524295e1bd073aceeff11e6579 $

### wp-constants ###

WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /mnt/c/www/wp-default/public_html/wp-content
WP_PLUGIN_DIR: /mnt/c/www/wp-default/public_html/wp-content/plugins
WP_MAX_MEMORY_LIMIT: 256M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: false
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_LOCAL_DEV: undefined
DB_CHARSET: utf8
DB_COLLATE: undefined

### wp-filesystem ###

wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable

### amp_wp ###

amp_mode_enabled: standard
amp_reader_theme: legacy
amp_templates_enabled: post, page, attachment, is_singular, is_home, is_archive, is_author, is_date, is_search, is_404, is_category, is_tag
amp_serve_all_templates: true
amp_css_transient_caching_disabled: false
amp_css_transient_caching_threshold: 5000 transients per day
amp_css_transient_caching_sampling_range: 14 days
amp_css_transient_caching_transient_count: 54
amp_css_transient_caching_time_series: 
    20200407: 0
    20200409: 45
    20200430: 45
    20200505: 45
    20200506: 53
    20200608: 0
    20200810: 0
    20200811: 15
amp_libxml_version: 2.9.9

Can reproduce in Firefox, Chrome, WP_DEBUG enabled/disabled, SCRIPT_DEBUG enabled/disabled. Even in Brave portable without any browser extensions, in incognito, so doesn't seem to be anything localstorage or extension related.

Since the JS error mentions clipboard, I do have a clipboard manager (Ditto), closing it didn't seem to help.

Any ideas what else to try?

[westonruter]

OK, I've been able to reproduce this issue.

The cause appears to be that in Web Stories 1.0.0-beta1 enqueues a script with the handle amp-story-player when in the editor. This script is registered in Web Stories pointing to the standalone script which provides a web component for use in a non-AMP page. However, in the AMP plugin v2.0.0-beta3, the validator spec has been updated to include support for the new amp-web-story AMP-component which gets registered with the amp-web-story hande. This is resulting in the AMP-component erroneously being printed on the edit post screen:

<script src='https://cdn.ampproject.org/v0/amp-story-player-0.1.js' id='amp-story-player-js' async custom-element="amp-story-player"></script>

This has been fixed in a recent PR to Web Stories: https://github.com/google/web-stories-wp/pull/3621.

With the main branch of Web Stories checked out, the edit post screen now has the following included:

<script src='https://cdn.ampproject.org/amp-story-player-v0.js?ver=v0' id='standalone-amp-story-player-js' async></script>

And I can click the three dots menu as much as I like and no error occurs.

@ktmn So, please pull down the latest from the main branch for Web Stories and do a fresh build. The issue should be fixed for you as well. There should be a beta2 of Web Stories available soon as well.