Skip to content
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.

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

Fix drop zone indicators for non blocks #25986

Merged
merged 4 commits into from
Oct 22, 2020

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Oct 9, 2020

Description

#25317 ensured that when the user presses the escape key, the drop zone indicator for blocks is hidden.

The change had an unwanted side effects, drop zone indicators were only shown for blocks after that PR was merged. When dragging files or HTML, drop zone indicators were no longer shown because the change specifically checked for isDraggingBlocks.

This PR removes the isDraggingBlocks check, and implements separate handling for the escape key in the DropZone provider.

While using the escape key works for blocks, it doesn't for files or HTML. I'm still looking into that, but it might be desirable to merge this fix for a regression, as it's still an improvement over what we had prior to #25317.

How has this been tested?

Blocks

  1. Drag a block into the editor canvas
  2. Drop indicators should be displayed
  3. Press escape
  4. The drag event should be cancelled and the drop indicators shouldn't be displayed.

Files

  1. Drag a file into the editor canvas
  2. Drop indicators should be displayed
  3. Press escape
  4. The drag event should be cancelled and the drop indicators shouldn't be displayed. (note: this currently isn't working)

HTML

  1. Drag HTML into the editor canvas (usually the easiest way to do this is to drag a link from one window into another).
  2. Drop indicators should be displayed
  3. Press escape
  4. The drag event should be cancelled and the drop indicators shouldn't be displayed. (note: this currently isn't working)

Types of changes

Bug fix (non-breaking change which fixes an issue)

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.

@talldan talldan added [Type] Regression Related to a regression in the latest release [Feature] Drag and Drop Drag and drop functionality when working with blocks labels Oct 9, 2020
@talldan talldan self-assigned this Oct 9, 2020
@github-actions
Copy link

github-actions bot commented Oct 9, 2020

Size Change: +6 B (0%)

Total Size: 1.19 MB

Filename Size Change
build/block-editor/index.js 130 kB -18 B (0%)
build/components/index.js 169 kB +24 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.52 kB 0 B
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/index.js 8.55 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-editor/style-rtl.css 11 kB 0 B
build/block-editor/style.css 11 kB 0 B
build/block-library/editor-rtl.css 8.65 kB 0 B
build/block-library/editor.css 8.65 kB 0 B
build/block-library/index.js 145 kB 0 B
build/block-library/style-rtl.css 7.66 kB 0 B
build/block-library/style.css 7.66 kB 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 47.6 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 9.43 kB 0 B
build/core-data/index.js 12 kB 0 B
build/data-controls/index.js 685 B 0 B
build/data/index.js 8.6 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.42 kB 0 B
build/edit-navigation/index.js 10.6 kB 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 0 B
build/edit-post/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.29 kB 0 B
build/edit-post/style.css 6.28 kB 0 B
build/edit-site/index.js 21.3 kB 0 B
build/edit-site/style-rtl.css 3.8 kB 0 B
build/edit-site/style.css 3.81 kB 0 B
build/edit-widgets/index.js 21.2 kB 0 B
build/edit-widgets/style-rtl.css 3.02 kB 0 B
build/edit-widgets/style.css 3.02 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.5 kB 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/element/index.js 4.45 kB 0 B
build/escape-html/index.js 734 B 0 B
build/format-library/index.js 7.49 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 1.74 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.54 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/index.js 3.02 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.13 kB 0 B
build/notices/index.js 1.69 kB 0 B
build/nux/index.js 3.27 kB 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/primitives/index.js 1.34 kB 0 B
build/priority-queue/index.js 790 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13 kB 0 B
build/server-side-render/index.js 2.6 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.74 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

As a quick sanity test check, this is working really well for me:

test

Thanks for this!

@talldan
Copy link
Contributor Author

talldan commented Oct 12, 2020

I haven't been able to solve the issue with using Escape when dragging files or HTML from outside the browser window, but that wasn't introduced by this PR, it's always been broken. I've made a separate issue here for it - #26013. This PR at least retains the fix from #25317 for anything dragged within the browser window.

In the meantime I think it's worth getting this merged to fix the visibility of the drop zone indicators.

@talldan talldan added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 22, 2020
Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@talldan talldan merged commit 55bf7ec into master Oct 22, 2020
@talldan talldan deleted the fix/drop-zone-indicators-for-non-blocks branch October 22, 2020 03:19
@github-actions github-actions bot added this to the Gutenberg 9.3 milestone Oct 22, 2020
tellthemachines pushed a commit that referenced this pull request Oct 26, 2020
* Remove isDraggingBlocks check

* Clean up drag and drop data if the user presses escape when dragging

* Add comment to ensure avoidance of dragend

* Switch to using dragend
@tellthemachines tellthemachines mentioned this pull request Oct 26, 2020
6 tasks
tellthemachines added a commit that referenced this pull request Oct 27, 2020
* Fix drop zone indicators for non blocks (#25986)

* Remove isDraggingBlocks check

* Clean up drag and drop data if the user presses escape when dragging

* Add comment to ensure avoidance of dragend

* Switch to using dragend

* Fix archives block render function (#26309)

* Code block: preserve indentation on paste (#26347)

* Turn off autocomplete for token input. (#26427)

* Fix parent post selector: ensure initial value available, search performed, all results shown. (#26397)

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>

* [RNMobile] Fix CI issues during `npm ci` (#26455)

* Run mobile tests on master

* Debug CI

* Revert "Debug CI"

This reverts commit dec1ebe.

* Update react-native-screens ref, pin @react-navigation/native version

* Pin @react-navigation/core,router versions

* Fix composer test failures due to invalid lock (#26472)

* Fix gallery block undo issue (#26377)

* Mark change in attributes when gallery mounts as not persistant

* Fix typo

* Fix package lock changes

* Fix some Twenty Twenty One related e2e test failures (#26341)

* Account for unknown number of controls in block inspector

* Ensure selection is on-screen by using a group block instead of cover, which takes up less space on screen

* Fix typewriter test

* Use correct name for patterns test

* Revert change to .wp-env.json

* Fix multi-entity side editor saving test

* Remove blank line

* insert paragraph instead of tempalte part (#26371)

* Fix autosave e2e tests (#26416)

* Update how block to render is tracked (#26356)

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
Co-authored-by: Riad Benguella <benguella@gmail.com>
Co-authored-by: Ella van Durpe <wp@iseulde.com>
Co-authored-by: Adam Silverstein <adamsilverstein@earthboundhosting.com>
Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Ceyhun Ozugur <ceyhunozugur@gmail.com>
Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com>
Co-authored-by: Addison Stavlo <Stavz01@gmail.com>
Co-authored-by: O André <nosolosw@users.noreply.github.com>
@youknowriad youknowriad removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Drag and Drop Drag and drop functionality when working with blocks [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants