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

Refactor block drop event handlers into a single hook to support drag and drop in List View #24649

Merged
merged 6 commits into from
Aug 21, 2020

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Aug 19, 2020

Description

Separated from #23952.

Moves the code for handling block drop events into a separate react hook. This is required for #23952, as it'll allow List View to use the same drop event logic.

How has this been tested?

  • Try dragging and dropping blocks in the editor, everything should behave the same
  • Try dragging a file (e.g. an image file) into the editor, an image block should be created in the correct location
  • Try dragging some HTML (e.g. a link from another website) into the editor, a paragraph block with a link in it should be created.

Types of changes

Non-breaking refactor.

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] Task Issues or PRs that have been broken down into an individual action to take [Feature] Drag and Drop Drag and drop functionality when working with blocks labels Aug 19, 2020
@talldan talldan self-assigned this Aug 19, 2020
@github-actions
Copy link

github-actions bot commented Aug 19, 2020

Size Change: +525 B (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 126 kB +90 B (0%)
build/block-library/index.js 133 kB +556 B (0%)
build/block-library/style-rtl.css 7.42 kB -58 B (0%)
build/block-library/style.css 7.43 kB -59 B (0%)
build/edit-post/style-rtl.css 5.61 kB -3 B (0%)
build/edit-post/style.css 5.61 kB -3 B (0%)
build/keycodes/index.js 1.94 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.44 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.96 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 8.36 kB 0 B
build/block-library/editor.css 8.36 kB 0 B
build/block-library/theme-rtl.css 729 B 0 B
build/block-library/theme.css 730 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/blocks/index.js 47.6 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.7 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.68 kB 0 B
build/core-data/index.js 11.8 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 5.38 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.47 kB 0 B
build/edit-navigation/index.js 11 kB 0 B
build/edit-navigation/style-rtl.css 1.12 kB 0 B
build/edit-navigation/style.css 1.12 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-site/index.js 17 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 11.8 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45.3 kB 0 B
build/editor/style-rtl.css 3.8 kB 0 B
build/editor/style.css 3.79 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.71 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 2.13 kB 0 B
build/html-entities/index.js 621 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/list-reusable-blocks/index.js 3.11 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.33 kB 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 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 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.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Tested with blocks and files and it works well in the editor; not sure how to test an HTML drop though.

);
} );

it( 'adjusts the index blocks are dropped at when moved down under the same root block', () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm, is this too much of an implementation detail to be worth testing?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

e2e tests would definitely be better here, but there aren't any at the moment and they'd take a bit of investment.

This particular code has been buggy before (#24183), so a test seems beneficial.

} );

it( 'does nothing if the block has no matching file transforms', () => {
findTransform.mockImplementation( () => {} );
Copy link
Contributor

Choose a reason for hiding this comment

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

Why do we need to mock findTransform again here? And could we use noop defined at the top of the file?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm, I suppose not strictly required since jest.fn() also returns nothing, though I feel like having this line helps demonstrate that it's performing the inverse of the following test.

I switched it over to use noop and also added some comments.

@talldan
Copy link
Contributor Author

talldan commented Aug 20, 2020

not sure how to test an HTML drop though.

@tellthemachines The easiest test I've found is to drag a link from another website. I'll update the testing instructions.

Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Re-tested, HTML drop is working fine!

@noisysocks noisysocks merged commit b8ccf80 into master Aug 21, 2020
@noisysocks noisysocks deleted the refactor/block-drop-event-handlers-into-hook branch August 21, 2020 01:39
@github-actions github-actions bot added this to the Gutenberg 8.9 milestone Aug 21, 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] Task Issues or PRs that have been broken down into an individual action to take
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants