Skip to content

Conversation

karmatosed
Copy link
Member

@karmatosed karmatosed commented Oct 29, 2020

This is a small change that fixes the drop-down spacing on highlight for the navigation block. It relates to suggestions in #26571

Before

image

After

image

@karmatosed karmatosed added the [Block] Navigation Affects the Navigation Block label Oct 29, 2020
@karmatosed karmatosed requested a review from ellatrix as a code owner October 29, 2020 15:11
@karmatosed karmatosed requested a review from jasmussen October 29, 2020 15:11
@github-actions
Copy link

github-actions bot commented Oct 29, 2020

Size Change: +46 B (0%)

Total Size: 1.21 MB

Filename Size Change
build/block-directory/index.js 8.72 kB -1 B
build/block-editor/index.js 133 kB +4 B (0%)
build/block-editor/style-rtl.css 11.2 kB -19 B (0%)
build/block-editor/style.css 11.2 kB -17 B (0%)
build/block-library/editor-rtl.css 8.96 kB +3 B (0%)
build/block-library/editor.css 8.96 kB +4 B (0%)
build/block-library/index.js 147 kB -19 B (0%)
build/block-library/style-rtl.css 8.05 kB +22 B (0%)
build/block-library/style.css 8.05 kB +21 B (0%)
build/components/index.js 172 kB -17 B (0%)
build/compose/index.js 9.8 kB -2 B (0%)
build/data-controls/index.js 771 B -1 B
build/data/index.js 8.8 kB +1 B
build/date/index.js 31.8 kB -2 B (0%)
build/deprecated/index.js 769 B +1 B
build/edit-post/index.js 306 kB +1 B
build/edit-site/index.js 22.6 kB -1 B
build/edit-site/style-rtl.css 3.91 kB +4 B (0%)
build/edit-site/style.css 3.91 kB +4 B (0%)
build/editor/index.js 42.8 kB +1 B
build/element/index.js 4.65 kB -1 B
build/format-library/index.js 6.63 kB -122 B (1%)
build/hooks/index.js 2.16 kB -1 B
build/keyboard-shortcuts/index.js 2.52 kB +2 B (0%)
build/keycodes/index.js 1.94 kB -1 B
build/media-utils/index.js 5.34 kB -1 B
build/notices/index.js 1.78 kB -1 B
build/nux/index.js 3.42 kB +2 B (0%)
build/plugins/index.js 2.56 kB -1 B
build/redux-routine/index.js 2.85 kB +1 B
build/rich-text/index.js 13.4 kB +182 B (1%)
build/server-side-render/index.js 2.77 kB +1 B
build/token-list/index.js 1.27 kB -1 B
build/viewport/index.js 1.84 kB -1 B
build/warning/index.js 1.14 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.78 kB 0 B
build/api-fetch/index.js 3.45 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 792 B 0 B
build/block-library/theme.css 793 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 48.1 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/core-data/index.js 12.5 kB 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.46 kB 0 B
build/edit-navigation/index.js 11.2 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-post/style-rtl.css 6.41 kB 0 B
build/edit-post/style.css 6.39 kB 0 B
build/edit-widgets/index.js 26.3 kB 0 B
build/edit-widgets/style-rtl.css 3.12 kB 0 B
build/edit-widgets/style.css 3.12 kB 0 B
build/editor/editor-styles-rtl.css 480 B 0 B
build/editor/editor-styles.css 482 B 0 B
build/editor/style-rtl.css 3.85 kB 0 B
build/editor/style.css 3.85 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/html-entities/index.js 623 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 712 B 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/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.43 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/reusable-blocks/index.js 3.06 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/url/index.js 4.06 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

@jasmussen
Copy link
Contributor

Confirmed, this fixes the issue:

Screenshot 2020-10-30 at 08 26 40

However, my golly that dropdown needs a lot of love. Why is the text gray? Why is it allcaps? (I know @aaronrobertshaw is struggling with this exact issue in #26444)

Why is the popover borderless when not in focus?

Screenshot 2020-10-30 at 08 26 18

To be quite clear, none of this is your doing, and I really appreciate your taking a stab at improving this menu, it's clearly full of low hanging fruit. Here's the CSS as best I can tell:

Screenshot 2020-10-30 at 08 27 16

It seems to me the problem here is that panel titles are lumped in with the custom select control, when those should be separate. So I'd extract .components-custom-select-control__menu li and give it its own separate definition. Want to take a stab at that?

@jasmussen jasmussen force-pushed the try/navigation-create-iterations branch from a32a237 to efe42ce Compare November 5, 2020 10:10
margin: 0 $grid-unit-15 0 0;
color: $gray-700;
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
}

.components-custom-select-control__menu li.is-highlighted {
Copy link
Contributor

Choose a reason for hiding this comment

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

Alright, I rebased this and removed the line that causes inheritance of the allcaps text in the custom dropdowns. That actually fixes the margin issue, so you can remove this line.

@jasmussen jasmussen self-requested a review November 6, 2020 11:27
@jasmussen
Copy link
Contributor

At some point the package-lock.json file was included, it shouldn't be. I can't recall exactly how to remove a changed file commit from a PR, but we need to remove that and then this one is good to ship.

@karmatosed
Copy link
Member Author

@jasmussen Ah goodness that was the last commit, I'll work out a way to solve that and get it ready. Thanks.

@karmatosed karmatosed force-pushed the try/navigation-create-iterations branch from 1236fc3 to 2cafe52 Compare November 6, 2020 21:08
@karmatosed
Copy link
Member Author

karmatosed commented Nov 6, 2020

@tellthemachines if this could get a final code review I think it might be able to slip in the group for the release. It's low priority so no stress if not, but as a block already released would fix a bug. I would love to know if I've done the removal of the file correctly and if not learn how to do that though.

@tellthemachines
Copy link
Contributor

@karmatosed the Navigation Block isn't in Core yet, so this doesn't need to go into 5.6, but happy to help out with it anyway!

The package-lock.json shouldn't be deleted, just removed from the changeset because we're not interested in making any changes to it in this branch. You can do that locally in terminal with git checkout master package-lock.json (you have to be in the branch you made these changes in) and commit the result. That should get rid of the merge conflict too 😅

@karmatosed
Copy link
Member Author

karmatosed commented Nov 9, 2020

Thanks so much @tellthemachines, I've done that 🙏🏻 This still needs a code review, but should be ready for that now.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Before:

Screenshot 2020-11-12 at 13 16 41

After:

Screenshot 2020-11-12 at 13 16 51

Screenshot 2020-11-12 at 13 16 55

There's so much work to still be done on that dropdown menu, but this is a great step in the right direction.

@karmatosed
Copy link
Member Author

Awesome, thanks. Let's get this PR in then and work can continue.

@karmatosed karmatosed merged commit 8034d69 into master Nov 12, 2020
@karmatosed karmatosed deleted the try/navigation-create-iterations branch November 12, 2020 12:29
@github-actions github-actions bot added this to the Gutenberg 9.4 milestone Nov 12, 2020
@ellatrix
Copy link
Member

Why was package-lock.json updated? Tests are failing now in master.

@ellatrix ellatrix mentioned this pull request Nov 12, 2020
6 tasks
@karmatosed
Copy link
Member Author

@ellatrix regarding this comment:

The package-lock.json shouldn't be deleted, just removed from the changeset because we're not interested in making any changes to it in this branch. You can do that locally in terminal with git checkout master package-lock.json (you have to be in the branch you made these changes in) and commit the result. That should get rid of the merge conflict too

Happy to revert this merge if issue is problem though.

@ellatrix
Copy link
Member

Right, it should have been removed from the branch and synced with master?

@ellatrix
Copy link
Member

And no worries, it's easy enough to fix. It's been partially reverted to make the tests happy. Not sure if the rest should be reverted, but it's not causing any failures.

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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants