Skip to content

Reinitialize the iframe after the parent block is moved around#21916

Merged
adamziel merged 2 commits intomasterfrom
fix/youtube-block-hidden-after-move
Apr 30, 2020
Merged

Reinitialize the iframe after the parent block is moved around#21916
adamziel merged 2 commits intomasterfrom
fix/youtube-block-hidden-after-move

Conversation

@adamziel
Copy link
Copy Markdown
Contributor

@adamziel adamziel commented Apr 27, 2020

Description

As reported in #6146, YouTube block becomes blank when the block is moved down (reordered). The root cause of this issue is the fact that browsers tend to reload the iframe if it's moved around in the DOM Tree, and the fact that React does not correctly dispatch the onLoad event in that case (see facebook/react#18752).

This PR changes the way we register the iframe sandbox initialization callback from onLoad= to iframe.addEventListener. This skips the React event dispatching machinery and keeps the code running.

Before:
before

After:
after

Fixes #6146

How has this been tested?

Tested locally

Types of changes

Non-breaking changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@adamziel adamziel added [Type] Bug An existing feature does not function as intended Needs Testing Needs further testing to be confirmed. [Feature] Drag and Drop Drag and drop functionality when working with blocks [Block] Embed Affects the Embed Block labels Apr 27, 2020
@adamziel adamziel self-assigned this Apr 27, 2020
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 27, 2020

Size Change: -705 B (0%)

Total Size: 816 kB

Filename Size Change
build/block-directory/index.js 6.23 kB -1 B
build/block-editor/index.js 106 kB +128 B (0%)
build/block-editor/style-rtl.css 10.2 kB +2 B (0%)
build/block-editor/style.css 10.2 kB +2 B (0%)
build/block-library/editor-rtl.css 7.03 kB -26 B (0%)
build/block-library/editor.css 7.03 kB -26 B (0%)
build/block-library/index.js 114 kB +1.28 kB (1%)
build/blocks/index.js 48.1 kB -1 B
build/components/index.js 179 kB +43 B (0%)
build/components/style-rtl.css 16.9 kB -8 B (0%)
build/components/style.css 16.9 kB -8 B (0%)
build/compose/index.js 6.66 kB +2 B (0%)
build/data/index.js 8.44 kB +13 B (0%)
build/edit-post/index.js 27.6 kB -188 B (0%)
build/edit-post/style-rtl.css 12.2 kB -121 B (0%)
build/edit-post/style.css 12.2 kB -122 B (1%)
build/edit-site/index.js 10.9 kB -126 B (1%)
build/edit-site/style-rtl.css 5.11 kB -151 B (2%)
build/edit-site/style.css 5.11 kB -147 B (2%)
build/edit-widgets/index.js 7.5 kB -831 B (11%) 👏
build/edit-widgets/style-rtl.css 4.67 kB -336 B (7%)
build/edit-widgets/style.css 4.66 kB -338 B (7%)
build/editor/index.js 43.6 kB +244 B (0%)
build/keyboard-shortcuts/index.js 2.51 kB -2 B (0%)
build/list-reusable-blocks/index.js 3.12 kB +1 B
build/media-utils/index.js 5.29 kB +1 B
build/plugins/index.js 2.67 kB -1 B
build/redux-routine/index.js 2.85 kB +9 B (0%)
build/rich-text/index.js 14.8 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.08 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 761 B 0 B
build/block-library/style-rtl.css 7.14 kB 0 B
build/block-library/style.css 7.14 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.54 kB 0 B
build/edit-navigation/style-rtl.css 485 B 0 B
build/edit-navigation/style.css 485 B 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/style-rtl.css 3.27 kB 0 B
build/editor/style.css 3.27 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.63 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

Copy link
Copy Markdown
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good and problem is fixed

@adamziel adamziel merged commit ed06638 into master Apr 30, 2020
@adamziel adamziel deleted the fix/youtube-block-hidden-after-move branch April 30, 2020 08:36
@github-actions github-actions bot added this to the Gutenberg 8.1 milestone Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Embed Affects the Embed Block [Feature] Drag and Drop Drag and drop functionality when working with blocks Needs Testing Needs further testing to be confirmed. [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

YouTube Block Hidden after Move

2 participants