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

Support drag-and-drop for submenus of navigation blocks #24479

Merged
merged 4 commits into from
Aug 20, 2020

Conversation

kevin940726
Copy link
Member

@kevin940726 kevin940726 commented Aug 11, 2020

Description

Close #23874, enable drag-and-drop for submenus in navigation block.

How has this been tested?

  1. Create a new post with navigation blocks
  2. Add a few links with submenus
  3. Drag and drop a few links/submenus around

Currently only manually testing are available.

Screenshots

Drag and drop GIF

Types of changes

New feature

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.

@kevin940726 kevin940726 added the [Block] Navigation Affects the Navigation Block label Aug 11, 2020
@github-actions
Copy link

github-actions bot commented Aug 11, 2020

Size Change: +3.89 kB (0%)

Total Size: 1.16 MB

Filename Size Change
build/block-editor/index.js 125 kB +213 B (0%)
build/block-editor/style-rtl.css 10.7 kB +36 B (0%)
build/block-editor/style.css 10.7 kB +34 B (0%)
build/block-library/editor-rtl.css 8.42 kB +833 B (9%) 🔍
build/block-library/editor.css 8.42 kB +832 B (9%) 🔍
build/block-library/index.js 132 kB +31 B (0%)
build/block-library/style-rtl.css 7.49 kB -278 B (3%)
build/block-library/style.css 7.49 kB -279 B (3%)
build/blocks/index.js 48.4 kB +1 B
build/components/index.js 200 kB +73 B (0%)
build/core-data/index.js 11.8 kB -4 B (0%)
build/edit-post/index.js 304 kB -5 B (0%)
build/edit-post/style-rtl.css 5.63 kB +19 B (0%)
build/edit-post/style.css 5.63 kB +19 B (0%)
build/edit-widgets/index.js 11.7 kB +2.36 kB (20%) 🚨
build/url/index.js 4.06 kB +1 B
ℹ️ 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.97 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 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/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/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.45 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 3.23 kB 0 B
build/edit-navigation/index.js 10.9 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 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/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.72 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/keycodes/index.js 1.94 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.71 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 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

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Only a partial review, I'll try to get to the rest tomorrow 😄

packages/block-library/src/navigation-link/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation-link/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation-link/edit.js Outdated Show resolved Hide resolved
@kevin940726 kevin940726 marked this pull request as ready for review August 13, 2020 09:27
@kevin940726 kevin940726 changed the title [WIP] Support drag-and-drop for submenus of navigation blocks Support drag-and-drop for submenus of navigation blocks Aug 13, 2020
@noisysocks noisysocks added the Needs Design Feedback Needs general design feedback. label Aug 20, 2020
@noisysocks
Copy link
Member

It's not ideal that you have to drag the block movers which are so far away form the menu item. Perhaps we need to re-evaluate our use of InnerBlocks's captureToolbars? Or add a drag handle to the menu item? cc. @shaunandrews for advice.

Nonetheless, I tested this locally and it looks smooth! Nice job. One thing I noticed though is that this only works in the Navigation block when inserted into a post or page and not in the Navigation screen that's in Gutenberg → Navigation (beta). Could we fix that?

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Looks good, thanks for working on this! Apologies it took a little while to get around to re-reviewing.

Would be great to make a few final changes as per the comments before merging.

@@ -657,6 +666,8 @@

.is-dragging-components-draggable & {
opacity: 0;
// Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details.
Copy link
Contributor

@talldan talldan Aug 20, 2020

Choose a reason for hiding this comment

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

It might be good to explain in the comment why the toolbar/popover needs to be hidden, mentioning that it obscures drag events if it remains in position overlapping preceding blocks.

@@ -628,6 +628,15 @@
}
}

// Hide the popover block editor list while dragging.
// Using a hacky animation to delay hiding the element so that dragging can still work.
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe mention that if the element is hidden immediately, dragging won't work, and this is why a delay is required.

Comment on lines +52 to +60
body.is-dragging-components-draggable &.is-dragging-within {
> .wp-block-navigation__container {
opacity: 1;
visibility: visible;
}
}
}

body.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
Copy link
Contributor

Choose a reason for hiding this comment

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

Let's drop the body part of the selector if possible, usually just class names are used.

@@ -159,7 +160,8 @@ function BlockListBlock( {
'is-focused':
isFocusMode && ( isSelected || isAncestorOfSelectedBlock ),
'is-focus-mode': isFocusMode,
'has-child-selected': isAncestorOfSelectedBlock,
// Don't select child while dragging.
'has-child-selected': isAncestorOfSelectedBlock && ! isDragging,
Copy link
Contributor

Choose a reason for hiding this comment

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

Not sure the comments here add much, I think we could either remove them or add some more detail on why those classes aren't applied when dragging.

@talldan
Copy link
Contributor

talldan commented Aug 20, 2020

Nonetheless, I tested this locally and it looks smooth! Nice job. One thing I noticed though is that this only works in the Navigation block when inserted into a post or page and not in the Navigation screen that's in Gutenberg → Navigation (beta). Could we fix that?

@noisysocks I think this is just removing the one line here:
https://github.com/WordPress/gutenberg/blob/master/packages/edit-navigation/src/components/navigation-editor/block-editor-area.js#L113

I think that can be done in a separate PR.

But even then, the nav page still uses a 'top toolbar' style toolbar, we'd have to drop that as otherwise it looks similar to the captureToolbars option. Some background here - #21340.

@draganescu draganescu merged commit 748c632 into master Aug 20, 2020
@draganescu draganescu deleted the update/navigation-block-submenu-dnd branch August 20, 2020 09:30
@github-actions github-actions bot added this to the Gutenberg 8.9 milestone Aug 20, 2020
@draganescu
Copy link
Contributor

Oups! Again, I see green I click. So @kevin940726 said he'll update this in a separate PR to address feedback from @noisysocks and @talldan 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Navigation Affects the Navigation Block Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for dropping while dragging into hidden areas
4 participants