Drop-indicator: remove white border. #52122
Merged
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: -16 B (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
|
Great! Nicely seen Joen! |
jameskoster
approved these changes
Jun 29, 2023
There was a problem hiding this comment.
Much better!
Separately, should we update the chip color too? It kind of blends into the dark material.
Or should we remove it? I'm not sure how useful it is in this context, especially as the dragged row now remains visible. It's also a bit strange that the icons do not always match:
jasmussen
added
the
Backport to WP 6.7 Beta/RC
|
I think we should, yes, lots of componentry that needs to work better on the dark background. In this case I recall separate discussions on removing it based on not hiding the thing you are dragging initially. I don't recall where that landed, but the core is drag and drop in list views like these should be identical in behavior across, as much as possible. |
I think it was decided to stick around a bit longer, as in List View you can drag it outside of list view in the block content area, and you'd need an indicator of sorts on that front. |
|
Can probably do the same as we did with the tooltip and go full black in the dark mode? |
tellthemachines
pushed a commit
that referenced
this pull request
Jul 3, 2023
|
I just cherry-picked this PR to the update/wp6-3-beta3 branch to get it included in the next release: d4d0106 |
tellthemachines
removed
the
Backport to WP 6.7 Beta/RC
tellthemachines
added a commit
that referenced
this pull request
Jul 3, 2023
* Footnotes: inscrease selector specificity for anchor (#52179) * Patterns: Include template parts for custom areas in Uncategorized category (#52159) * Fix custom patterns console error (#51947) * Fix error with react list key with new custom patterns list in inserter * Update placeholder key * Add comment to explain the different keys * Patterns: Fix missing custom patterns in patterns explorer (#51889) * Add custom patterns to pattern explorer * show custom patterns in the patterns explorer dialog * remove changes from 51877 * Fix up use of async lists * remove a bit of code duplication by adding a new hook * add 51877 fix back to make testing easier * Just assign the key value in one place * Refactor the custom patterns to use the usePatternsState hook * Fix use of async list * Translate strings and remove unneeded fields from pattern object * Try integrating unsynced patterns directly into pattern selectors (#51955) * Include reusable blocks with an undefined sync status in inserter items * Update docs * Remove change to hover dependencies --------- Co-authored-by: Daniel Richards <[email protected]> * i18n: Add context to the word "Filters" (#52198) * Update home template icon (#52075) * Centralise all permissions lookup in Link UI and enable (#52166) * BlockRemovalWarningModal: Fix incorrect '_n' usage (#52164) * Fix fetching Nav fallback ID flushing Navigation entity cache (#52069) * Only flush the `getEntityRecords` cache if the fallback isn’t already in state * Save the edited entity record to a const and then invert it to determine whether we should invalidate the recordds --------- Co-authored-by: scruffian <[email protected]> * Block Editor: Unify texts for Create pattern modal (#52151) * Fix history back after entering edit mode from Patterns (#52112) * Add template part icons to the library grid items (#51963) * Patterns: Fix sidebar tab label (#51953) * Patterns: Fix setting of sync status for fully synced patterns (#51952) * Library: Reinstate manage all template parts page (#51961) * Command Palette: fix incorrect path and snackbar message when template part is deleted (#52034) * Command Center: Fix incorrect navigation when deleting template part * removeTemplate: consider title type * Drop-indicator: remove white border. (#52122) * Make Navigation fallback selector private (#51413) * Move selector to become private * adds basic lock functionality * remove useless lock-unlock file * map private selectors to resolvers * Unlock the other usage * only create one fallback per session * Fix core-data duplicate private opt-in * Data: bind resolvers to selectors individually, support private selectors --------- Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: Jarda Snajdr <[email protected]> * Focus Mode: Use the symbol icon if a pattern is being edited (#52031) * Footnotes: register meta field for pages (#52024) * Fix unintentional toggling on of distraction free (#52090) * replace toggle with set preference - because I don't read code properly it seems * remove notification * Revert "Updating social link attributes (#51997)" (#52019) This reverts commit c711e2a. * Update home template name (#52048) * Removes unused call (#51988) * Remove ability for user to toggle sync status after pattern creation (#51998) * Fix disable DFM when opening styles command (#52165) * Update custom patterns label to 'My patterns' (#51949) * rename custom patterns to my patterns * Add my patterns label to inserter and show at the top --------- Co-authored-by: Daniel Richards <[email protected]> * Library: Add sync status to pattern details screen (#51954) * Patterns: Rename Library to Patterns (#52102) * [Library] Add lock icon for theme patterns (#51990) * Add lock icon for theme patterns * Change to class names * Add aria-description * Change wording * Patterns: Use "detached" copy consistently (#51993) * Editor initrial appender: Zero out margins in constrained layouts. (#52026) * Update pattern creation modal in library (#51946) * Fix missing snackbars in Library (#52021) * Make the entire preview clickable in order to enter "edit" mode in focus mode (#51973) * Page Content Focus: Add welcome guides (#52014) * Page Content Focus: Add welcome guides * Don't show when editor guide is active * Just use regular accent/theme color in all guides * slight copy change page guide * Update components changelog * Disable new guides in E2E tests * Use s.w.org videos --------- Co-authored-by: Saxon Fletcher <[email protected]> --------- Co-authored-by: Ella <[email protected]> Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Aki Hamano <[email protected]> Co-authored-by: James Koster <[email protected]> Co-authored-by: Dave Smith <[email protected]> Co-authored-by: George Mamadashvili <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: Kai Hao <[email protected]> Co-authored-by: Carolina Nymark <[email protected]> Co-authored-by: Joen A <[email protected]> Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: Jarda Snajdr <[email protected]> Co-authored-by: Andrei Draganescu <[email protected]> Co-authored-by: Ramon <[email protected]> Co-authored-by: Nik Tsekouras <[email protected]> Co-authored-by: Saxon Fletcher <[email protected]> Co-authored-by: Rich Tabor <[email protected]> Co-authored-by: Robert Anderson <[email protected]>
|
Apologies for the late reply on this PR, I was AFK for a couple of weeks and am just catching up now. Overall this looks much cleaner for the browse mode use case 👍 For background, the white border was originally added so that the drop indicator line is visible when dragging between blocks that form part of a selection. Without it, the drop indicator bleeds into the background color of selected blocks: 2023-07-10.16.52.37.mp4It's not the end of the world that the indicator isn't visible here — folks can still drag between, and they still know where their mouse cursor is. If we do want the indicator to be visible here, though, I'm wondering what a good long-term solution might be? Would it be to re-introduce the border, but have the style be somehow aware of whether or not we're in dark mode for the UI? E.g. white border in the editor's list view, and dark grey border for the browse mode list views? Another option could be to have the drop indicator use a different color to the admin color, so that it's always contrasting in all contexts without requiring a border. Just some ideas! And not a worry at all if folks don't think the current state is an issue, or if we think it's low priority, as I'm sure there's plenty of other things to focus on for 6.3 for now 🙂 |
|
That seems worth fixing to me, but there are probably a few options to consider so perhaps worth a new issue. One such option could be a less bold selected state, which would eliminate the need to white borders around the drop indicator, focus state, etc: 
This could potentially work better from a component theming perspective too. |
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
andrewserong
added
the
[Feature] List View
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.
What?
The drop indicator when dragging/dropping menu items in the site editor has a white halo:
This PR removes it:
Why?
Removing the halo makes the drop indicator the same as it is in the list view:
Testing Instructions
Create a navigation menu, edit it in the site editor site view. Click and drag an item to sort it, and observe only a blue line drop indicator.