Drop indicator: show around dragged block and show above selected block for file drop #31896
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Size Change: +104 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
ellatrix
added
the
[Feature] Drag and Drop
ellatrix
changed the title
ellatrix
force-pushed
the
fix/indicator-drop-file-selected-block
branch
from
9bcf4d0 to
8c7cd11
Compare
|
This looks like an important bug fixes, can we get some review @WordPress/gutenberg-core |
ntsekouras
force-pushed
the
fix/indicator-drop-file-selected-block
branch
from
8c7cd11 to
df4b75f
Compare
ntsekouras
reviewed
May 26, 2021
There was a problem hiding this comment.
Thanks for your work Ella!
In my tests this mostly works well. It would be great to have some more eyes from folks that have worked with the insertion point code.
I have two observations:
-
This is related to your PR and
Navigationblock (vertical insertion points). You can see in my gif at the first part (trunk) that the insertion point is shown when hovering the whole block and makes it easier to know where is going to be moved. The second part of the same gif is from this PR.
-
This one is from trunk but noting here in case is something easy to fix as well here. The issue is that when we have a dropzone and hover below or above and then again inside the zone, the previously shown insertion point is still visible.
Trunk
Here
ellatrix
added
the
Backport to WP 6.7 Beta/RC
ellatrix
force-pushed
the
fix/indicator-drop-file-selected-block
branch
from
df4b75f to
b2952db
Compare
|
@ntsekouras Could you show me a gif of the PR with the navigation block issue? I'm having difficulty understanding what is different from trunk. |
talldan
approved these changes
Jun 10, 2021
There was a problem hiding this comment.
I couldn't spot any issues, code looks good. 👍
Some failing tests and conflicts (edit: looks like those are now resolved). I'll also have to change #32576 after this is merged.
When testing, there were some things I noticed that show up in trunk as well. In horizontal block lists the wrong drop indicator seems often to be shown. The insertion point also never shows above the first block, but I think that's been happening for a while.
Comment on lines
-81
to
-85
| ( hasMultiSelection() | ||
| ? next && multiSelectedBlockClientIds.includes( next ) | ||
| : next && | ||
| blockOrientation === 'vertical' && | ||
| next === selectedBlockClientId ), |
There was a problem hiding this comment.
Is this multi-selection logic no longer needed? I'm not sure what it does ... does it stop the insertertion point from being shown between multi-selected blocks?
That seems to still work when testing, so if that's the case this comment can be ignored.
There was a problem hiding this comment.
It's no longer needed because now we check in the in-between inserter hook whether to display it. This component should be a bit more flexible. I do think we'd want e.g. a drop indicator to show, just not the in-between inserter when hovering between selected blocks. Even that is debatable. I think it was done to avoid interference when you drag to select blocks.
7 tasks
I think it could potentially be related to what I mentioned here:
To reproduce:
The same also happens when dragging past the last block like shown in Nik's gif. When dragging to the bottom half the drop indicator isn't shown, only when the cursor is in the top half. Horizontal block lists shouldn't depend on vertical position like that, primarily horizontal position (unless they wrap). Same happens in |
|
Fixed the media placeholder issue (which happened before in trunk too).
Yeah, that happens for vertical too, we'll need to address that separately I think. This PR also certainly doesn't make everything perfect for horizontal either, I just want to make sure things don't get worse. I can look into all these issues separately. |
|
Thanks for the reviews. I'm going to merge this and look into the horizontal drop indicator issue. |
7 tasks
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Jun 14, 2021
…ck for file drop (#31896)
youknowriad
pushed a commit
that referenced
this pull request
Jun 14, 2021
…ck for file drop (#31896)
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82
nylen
pushed a commit
to nylen/wordpress-develop-svn
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. git-svn-id: https://develop.svn.wordpress.org/trunk@51149 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
gMagicScott
pushed a commit
to gMagicScott/core.wordpress-mirror
that referenced
this pull request
Jun 15, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: https://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
F-Wilke
pushed a commit
to FiliagoDev/WordPress
that referenced
this pull request
Jul 31, 2021
…ta 2. This includes: **Various** - Fix multi selection for nested blocks WordPress/gutenberg#32536 - Consistently show the drop indicator while dragging blocks WordPress/gutenberg#31896 - Fix horizontal drop indicator WordPress/gutenberg#32589 - Fix Safari flickering issue WordPress/gutenberg#32581 - Silence useSelect zombie bug errors WordPress/gutenberg#32088 **Template Editor** - Clarify the template creation modal WordPress/gutenberg#32427 - Only add skip links for block templates WordPress/gutenberg#32451 **Widgets Editor** - Add block breadcrumb WordPress/gutenberg#32498 WordPress/gutenberg#32528 WordPress/gutenberg#32569 - Saved deleted and restored widgets. WordPress/gutenberg#32534 - Fix unsaved changes detection WordPress/gutenberg#32573 - Fix button spacing in the header WordPress/gutenberg#32585 - Avoid extra undo levels WordPress/gutenberg#32572 - Move Legacy Widget block to the `@wordpress/widgets` package WordPress/gutenberg#32501 - Fix Social Links color inheritance WordPress/gutenberg#32625 - Use Button appender WordPress/gutenberg#32580 **Global Styles (theme.json)** - Separate the presets per origin in the block editor settings WordPress/gutenberg#32358 WordPress/gutenberg#32622 - Use CSS Custom Properties for the preset styles WordPress/gutenberg#32627 **Performance** - Remove is-typing classname to improve typing performance WordPress/gutenberg#32567 Props nosolosw, jorgefilipecosta, aristath, ntsekouras, peterwilsoncc, mcsf. See #53397. Built from https://develop.svn.wordpress.org/trunk@51149 git-svn-id: http://core.svn.wordpress.org/trunk@50758 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Since the drop indicator refactor, we no longer show the indicator around the dragged block. This PR fixes that.
We also don't show a drop indicator above the selected block for files drop.
It also fixes the drop indicator not showing even when the toolbar is fixed.
Before:
There's a few thing happening:
How has this been tested?
See above recordings.
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).