Skip to content

Block Editor: Typewriter: Skip entire component for IE #20485

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
aduth merged 1 commit into from
Feb 27, 2020
Merged

Block Editor: Typewriter: Skip entire component for IE #20485

aduth merged 1 commit into from
Feb 27, 2020

Conversation

@aduth
Copy link
Member

@aduth aduth commented Feb 26, 2020

Fixes Trac#49516
Related: #16460

This pull request seeks to resolve an error that occurs in the Typewriter component when used in Internet Explorer. Notably, the Typewriter component was written to intentionally bypass itself in Internet Explorer:

gutenberg/packages/block-editor/src/components/typewriter/index.js

Lines 238 to 243 in d026d5b

render() {
// There are some issues with Internet Explorer, which are probably not
// worth spending time on. Let's disable it.
if ( isIE ) {
return this.props.children;
}

However, event handlers for scroll and resize were still added when the component mounted:

gutenberg/packages/block-editor/src/components/typewriter/index.js

Lines 35 to 40 in d026d5b

componentDidMount() {
// When the user scrolls or resizes, the scroll position should be
// reset.
window.addEventListener( 'scroll', this.onScrollResize, true );
window.addEventListener( 'resize', this.onScrollResize, true );
}

These event handlers eventually try to reference the ref of the div that is only rendered in non-IE environments:

gutenberg/packages/block-editor/src/components/typewriter/index.js

Line 100 in d026d5b

this.ref.current.contains( document.activeElement ) &&

Thus, an error occurs.

With these changes, the entire component is bypassed in Internet Explorer, preventing any event handlers from being attached.

Testing Instructions:

Repeat steps to reproduce from Trac#49516.

Notably, I was able to reproduce this when scrolling in the editor in Internet Explorer.

@aduth aduth added [Type] Bug An existing feature does not function as intended Browser Issues Issues or PRs that are related to browser specific problems [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Feb 26, 2020
@github-actions
Copy link

github-actions bot commented Feb 26, 2020

Size Change: +2 B (0%)

Total Size: 866 kB

Filename Size Change
build/block-editor/index.js 104 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.01 kB 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/style-rtl.css 10.5 kB 0 B
build/block-editor/style.css 10.5 kB 0 B
build/block-library/editor-rtl.css 7.66 kB 0 B
build/block-library/editor.css 7.66 kB 0 B
build/block-library/index.js 116 kB 0 B
build/block-library/style-rtl.css 7.49 kB 0 B
build/block-library/style.css 7.5 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.6 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 5.76 kB 0 B
build/core-data/index.js 10.5 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.22 kB 0 B
build/date/index.js 5.37 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.06 kB 0 B
build/edit-post/index.js 90.9 kB 0 B
build/edit-post/style-rtl.css 8.59 kB 0 B
build/edit-post/style.css 8.58 kB 0 B
build/edit-site/index.js 4.62 kB 0 B
build/edit-site/style-rtl.css 2.51 kB 0 B
build/edit-site/style.css 2.51 kB 0 B
build/edit-widgets/index.js 4.41 kB 0 B
build/edit-widgets/style-rtl.css 2.59 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 325 B 0 B
build/editor/editor-styles.css 327 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 4.01 kB 0 B
build/editor/style.css 4 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.6 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 1.92 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.48 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.68 kB 0 B
build/list-reusable-blocks/index.js 2.99 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/media-utils/index.js 4.85 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.02 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 879 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.3 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

youknowriad
youknowriad approved these changes Feb 27, 2020
View reviewed changes
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

I didn't test but it seems logical.

@ellatrix
Copy link
Member

ellatrix commented Feb 27, 2020

Thanks for fixing this!

@aduth aduth merged commit 64a93e2 into master Feb 27, 2020
@aduth aduth deleted the fix/trac-49516-ie-typewriter-scroll-error branch February 27, 2020 17:41
@github-actions github-actions bot added this to the Gutenberg 7.7 milestone Feb 27, 2020
@aduth aduth added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Feb 28, 2020
@aduth
Copy link
Member Author

aduth commented Mar 2, 2020

@jorgefilipecosta Just to note, when this is cherry-picked for 5.4 RC, the following Trac ticket can be flagged as fixed:

https://core.trac.wordpress.org/ticket/49516

jorgefilipecosta pushed a commit that referenced this pull request Mar 2, 2020
@aduth @jorgefilipecosta
Block Editor: Typewriter: Skip entire component for IE (#20485)
072e296
@jorgefilipecosta jorgefilipecosta mentioned this pull request Mar 2, 2020
Merged
jorgefilipecosta pushed a commit that referenced this pull request Mar 2, 2020
@aduth @jorgefilipecosta
Block Editor: Typewriter: Skip entire component for IE (#20485)
d9b66e0
@jorgefilipecosta jorgefilipecosta removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Mar 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@youknowriad youknowriad youknowriad approved these changes

@ellatrix ellatrix Awaiting requested review from ellatrix

Assignees

No one assigned

Labels

Browser Issues Issues or PRs that are related to browser specific problems [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 7.7

Development

Successfully merging this pull request may close these issues.

5 participants

@aduth @ellatrix @youknowriad @jorgefilipecosta