Fix drag and drop indicator above first block and RTL drop indicators #33024
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
talldan
added
[Type] Bug
|
Size Change: +43 B (0%) Total Size: 1.05 MB
ℹ️ View Unchanged
|
talldan
commented
Jun 28, 2021
| 'wp-block', | ||
| className | ||
| ) } | ||
| className={ classnames( 'block-list-appender', className ) } |
There was a problem hiding this comment.
wp-block was added here in #25849, but I don't think it should be here. Everything still works without it.
There was a problem hiding this comment.
Yeah, it should be a mistake 😓
There was a problem hiding this comment.
Why shouldn't it be there? Won't it give correct margins to the appender?
There was a problem hiding this comment.
Didn't seem to make a difference from what I can tell.
There was a problem hiding this comment.
It does make a difference, we should restore it, without it, the block appender won't be considered a "block" meaning it won't be aligned properly in a block list.
For instance you can test this by adding an image block and notice that the appender that shows after the image is not centered properly.
talldan
added
the
Backport to WP 6.7 Beta/RC
|
It might be too late for 5.8 for this one, but it'd be nice if it was possible to include it. |
kevin940726
approved these changes
Jun 28, 2021
adamziel
reviewed
Jun 28, 2021
Comment on lines
138
to
153
| return { | ||
| top: previousRect.bottom, | ||
| left: previousRect.right, | ||
| right: previousRect.left, | ||
| top: previousRect ? previousRect.bottom : nextRect.top, | ||
| left: previousRect ? previousRect.right : nextRect.right, | ||
| right: previousRect ? previousRect.left : nextRect.left, | ||
| bottom: nextRect ? nextRect.top : previousRect.bottom, | ||
| ownerDocument, | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| top: previousRect.bottom, | ||
| left: previousRect.left, | ||
| right: previousRect.right, | ||
| top: previousRect ? previousRect.bottom : nextRect.top, | ||
| left: previousRect ? previousRect.left : nextRect.left, | ||
| right: previousRect ? previousRect.right : nextRect.right, | ||
| bottom: nextRect ? nextRect.top : previousRect.bottom, | ||
| ownerDocument, | ||
| }; |
There was a problem hiding this comment.
This works pretty well but it got quite repetitive. How about something like:
const rect = {
top: previousRect ? previousRect.bottom : nextRect.top,
bottom: nextRect ? nextRect.top : previousRect.bottom,
ownerDocument
};
if ( isRTL() ) {
return {
...rect,
left: previousRect ? previousRect.right : nextRect.right,
right: previousRect ? previousRect.left : nextRect.left,
};
}
return {
...rect,
left: previousRect ? previousRect.left : nextRect.left,
right: previousRect ? previousRect.right : nextRect.right,
};
Or perhaps even:
const [beforePrevRect, afterPrevRect] = isRTL() ? [previousRect.left, previousRect.right] : [previousRect.right, previousRect.left];
const [beforeNextRect, afterNextRect] = isRTL() ? [nextRect.left, nextRect.right] : [nextRect.right, nextRect.left];
return {
top: previousRect ? previousRect.bottom : nextRect.top,
bottom: nextRect ? nextRect.top : previousRect.bottom,
left: previousRect ? beforePrevRect : beforeNextRect,
right: previousRect ? afterPrevRect : afterNextRect,
ownerDocument
};
Or even:
const [beforePrevRect, afterPrevRect] = isRTL() ? [previousRect.left, previousRect.right] : [previousRect.right, previousRect.left];
const [beforeNextRect, afterNextRect] = isRTL() ? [nextRect.left, nextRect.right] : [nextRect.right, nextRect.left];
const bottom = nextRect ? nextRect.top : previousRect.bottom;
const [left, right, top] = previousRect ? [beforePrevRect, afterPrevRect, previousRect.bottom] : [beforeNextRect, afterNextRect, netRect.top];
return { left, right, top, bottom, ownerDocument };
There was a problem hiding this comment.
Anyway that's just a note about code style, feel free to decide to keep the current one or use one of the ideas above. I'm approving this PR regardless.
ellatrix
reviewed
Jun 28, 2021
| // Only show the in-between inserter between blocks, so when there's a | ||
| // previous and a next element. | ||
| const showInsertionPointInserter = | ||
| previousElement && nextElement && isInserterShown; |
There was a problem hiding this comment.
isInserterShown might suffice here. The component controls it is the in between inserter hook showing or hiding the inserter.
|
Just referencing #28185 if we want to add some e2e tests for the indicator :) |
|
Thanks for the reviews, will look into some follow-ups to improve the insertion point code and e2e tests. |
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
youknowriad
pushed a commit
that referenced
this pull request
Jun 28, 2021
…#33024) * Update logic * RTL and block appender fixes * Fix RTL positioning calculations * Avoid adding wp-block to the appender
youknowriad
pushed a commit
that referenced
this pull request
Jun 28, 2021
…#33024) * Update logic * RTL and block appender fixes * Fix RTL positioning calculations * Avoid adding wp-block to the appender
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
The drag and drop indicator before the first block hasn't been working (I think since the insertion point component was used for the drop indicator).
This PR fixes that. While working on it and testing my changes, I noticed a few issues with drag and drop for RTL languages, so I've fixed those too.
How has this been tested?
Dropping to the ends of block lists still requires some precision (the cursor must be within the block list element), so be aware of that when testing.
LTR (vertical block list)
LTR (horizontal block list)
RTL (vertical block list)
Prerequisite, Install the RTL Tester plugin, switch to RTL, and change this function to return
true- https://github.com/WordPress/gutenberg/blob/trunk/packages/i18n/src/create-i18n.js#L400.RTL (horizontal block list)
Prerequisite, Install the RTL Tester plugin, switch to RTL, and change this function to return
true- https://github.com/WordPress/gutenberg/blob/trunk/packages/i18n/src/create-i18n.js#L400.Also worth testing the in-between inserter and the indicator when hovering a block in the main block library, which all use the same InsertionPoint component.
Screenshots
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.jsfiles for terms that need renaming or removal).