Breaks image and media blocks with Gutenberg 17.3.0 and 17.4.0

[cagrimmett]

Bug Description

With Gutenberg 17.3.0 and above activated alongside AMP, the Image, Gallery, and Media & Text blocks do not work in the editor. They show "This block has encountered an error and cannot be previewed."

Related console error:

react-dom.min.js?ver=18:1 TypeError: Cannot read properties of undefined (reading 'off')
    at new <anonymous> (amp-block-editor.js?ver=58945a960ba3c840b940:3:522)
    at ut (react-dom.min.js?ver=18:1:39330)
    at br (react-dom.min.js?ver=18:1:56687)
    at $s (react-dom.min.js?ver=18:1:121525)
    at Sl (react-dom.min.js?ver=18:1:88649)
    at kl (react-dom.min.js?ver=18:1:88577)
    at bl (react-dom.min.js?ver=18:1:88440)
    at sl (react-dom.min.js?ver=18:1:85264)
    at dl (react-dom.min.js?ver=18:1:85651)
    at Nn (react-dom.min.js?ver=18:1:32464)

Relevant block from amp-block-editor.js:

constructor(...e) {
      super(...e),
      "editor-post-featured-image__media-modal" === this.props.modalClass ? (this.initFeaturedImage = this.initFeaturedImage.bind(this),
      this.initFeaturedImage()) : (this.frame.off("open", this.onOpen),
      this.frame.on("open", super.onOpen.bind(this)))
  }

Expected Behaviour

The core blocks should work as expected

Screenshots

PHP Version

8.2

Plugin Version

2.5.1

AMP plugin template mode

Standard

WordPress Version

6.4.2

Site Health

No response

Gutenberg Version

17.3.0 and above

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

[westonruter]

Related source code:

amp-wp/assets/src/block-editor/components/with-media-library-notice.js

Lines 51 to 67 in 7e0768d

	constructor(...args) {
	super(...args);
	// @todo This should be a different event.
	// This class should only be present in the MediaUpload for the Featured Image.
	if (
	'editor-post-featured-image__media-modal' ===
	this.props.modalClass
	) {
	this.initFeaturedImage = this.initFeaturedImage.bind(this);
	this.initFeaturedImage();
	} else {
	// Restore the original`onOpen` callback as it will be overridden by the parent class.
	this.frame.off('open', this.onOpen);
	this.frame.on('open', super.onOpen.bind(this));
	}
	}

[westonruter]

@thelovekesh If this turns out to be a challenge to fix for compatibility with the latest Gutenberg, I think we should just eliminate the with-media-library-notice component entirely. I don't think the notice is particularly useful for users.

[pavanpatil1]

Verified the fix and it is working fine with and without the Gutenberg, as well as with earlier versions of WordPress.

• With WordPress 5.3 it is not showing the feature image notice as MediaUpload component is not supported.
• With WordPress 5.9 it is showing the correct notice regarding to the feature image with and without Gutenberg plugin.
• With the Latest WordPress the notice is visible and other block editor functionality is also working fine.

Also, It is not breaking any other functionality in the Block editor.