Skip to content

Breaks image and media blocks with Gutenberg 17.3.0 and 17.4.0 #7710

@cagrimmett

Description

@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

CleanShot 2024-01-04 at 10 38 17@2x

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

Metadata

Metadata

Assignees

Labels

BugSomething isn't workingChangeloggedWhether the issue/PR has been added to release notes.P0High priority

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions