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

Adds vertical variation to navigation menu #21296

Merged
merged 7 commits into from
Apr 2, 2020

Conversation

draganescu
Copy link
Contributor

Description

Fixes #16829

How has this been tested?

Tested locally by:

  1. Add a post
  2. Use the top inserter button
  3. Search for vertical
  4. Insert the block Verical Navigation

Screenshots

vertical-menu

Types of changes

Non breaking change that introduces a vertical variation to the Navigation block.

@draganescu draganescu added Needs Design Needs design efforts. Needs Design Feedback Needs general design feedback. labels Mar 31, 2020
@github-actions
Copy link

github-actions bot commented Mar 31, 2020

Size Change: +17.7 kB (2%)

Total Size: 884 kB

Filename Size Change
build/a11y/index.js 1.02 kB +18 B (1%)
build/annotations/index.js 3.45 kB +4 B (0%)
build/api-fetch/index.js 3.8 kB +410 B (10%) ⚠️
build/autop/index.js 2.59 kB +5 B (0%)
build/block-directory/index.js 6.03 kB +8 B (0%)
build/block-editor/index.js 102 kB -36 B (0%)
build/block-editor/style-rtl.css 11.2 kB +174 B (1%)
build/block-editor/style.css 11.2 kB +179 B (1%)
build/block-library/editor-rtl.css 7.22 kB +6 B (0%)
build/block-library/editor.css 7.22 kB +7 B (0%)
build/block-library/index.js 110 kB -188 B (0%)
build/block-library/style-rtl.css 7.53 kB +25 B (0%)
build/block-library/style.css 7.54 kB +27 B (0%)
build/block-serialization-default-parser/index.js 1.65 kB -1 B
build/components/index.js 195 kB +3.99 kB (2%)
build/components/style-rtl.css 16.1 kB +296 B (1%)
build/components/style.css 16 kB +297 B (1%)
build/compose/index.js 6.21 kB +2 B (0%)
build/core-data/index.js 10.7 kB -34 B (0%)
build/data-controls/index.js 1.03 kB -2 B (0%)
build/data/index.js 8.23 kB -16 B (0%)
build/date/index.js 5.37 kB +1 B
build/dom-ready/index.js 569 B +1 B
build/edit-navigation/index.js 2.48 kB +84 B (3%)
build/edit-navigation/style-rtl.css 239 B +144 B (60%) 🆘
build/edit-navigation/style.css 241 B +146 B (60%) 🆘
build/edit-post/index.js 92.3 kB -72 B (0%)
build/edit-post/style-rtl.css 12 kB +3.67 kB (30%) 🚨
build/edit-post/style.css 12 kB +3.67 kB (30%) 🚨
build/edit-site/index.js 9.09 kB +49 B (0%)
build/edit-site/style-rtl.css 4.62 kB +1.21 kB (26%) 🚨
build/edit-site/style.css 4.62 kB +1.2 kB (26%) 🚨
build/edit-widgets/index.js 4.43 kB -1 B
build/edit-widgets/style-rtl.css 3.74 kB +1.17 kB (31%) 🚨
build/edit-widgets/style.css 3.74 kB +1.17 kB (31%) 🚨
build/editor/index.js 42.8 kB -18 B (0%)
build/editor/style-rtl.css 3.47 kB +84 B (2%)
build/editor/style.css 3.47 kB +81 B (2%)
build/element/index.js 4.44 kB -1 B
build/format-library/index.js 6.95 kB +4 B (0%)
build/hooks/index.js 1.93 kB -1 B
build/html-entities/index.js 622 B +1 B
build/i18n/index.js 3.57 kB -1 B
build/keyboard-shortcuts/index.js 2.3 kB -1 B
build/keycodes/index.js 1.7 kB -1 B
build/media-utils/index.js 4.84 kB -4 B (0%)
build/notices/index.js 1.57 kB -2 B (0%)
build/nux/index.js 3.01 kB -3 B (0%)
build/plugins/index.js 2.54 kB -2 B (0%)
build/primitives/index.js 1.5 kB -1 B
build/redux-routine/index.js 2.84 kB +2 B (0%)
build/rich-text/index.js 14.5 kB -1 B
build/server-side-render/index.js 2.54 kB -6 B (0%)
build/shortcode/index.js 1.7 kB +2 B (0%)
build/viewport/index.js 1.6 kB -1 B
build/warning/index.js 1.14 kB +1 B
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom/index.js 3.05 kB 0 B
build/editor/editor-styles-rtl.css 423 B 0 B
build/editor/editor-styles.css 426 B 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/priority-queue/index.js 780 B 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 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.

This looks pretty good, and it's great that it's only a small change.

There were a couple of things that I noticed, which are mostly comments on how variations work in general.

I think this needs a good copy/design review. I wonder if 'Navigation (Horizontal)' and 'Navigation (Vertical)' might be better titles in the context of the inserter:
Screenshot 2020-04-01 at 11 55 45 am

The second thing is that it feels like there should be a transform or a way to switch between variation. It looks like that's tracked by #20584, and it should probably happen automatically through declaration of the variation.

Also, that the variations don't appear in the slash inserter confused me, but looks like that's tracked by #20583.

packages/block-library/src/navigation/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.js Outdated Show resolved Hide resolved
packages/block-library/src/navigation/index.js Outdated Show resolved Hide resolved
@talldan talldan added the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Apr 1, 2020
draganescu and others added 3 commits April 1, 2020 10:54
Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>
Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>
Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>
@michelleweber
Copy link

I would +1 'Navigation (Horizontal)' and 'Navigation (Vertical).'

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.

Approving from a code point of view.

There might still be some unanswered design questions, and I think the other question relevant for variations is how can they be exposed for an existing block that wants to switch from horizontal to vertical.

@talldan talldan removed the Needs Copy Review Needs review of user-facing copy (language, phrasing) label Apr 2, 2020
@aristath
Copy link
Member

aristath commented Apr 2, 2020

Shouldn't this be just an option inside a single navigation block? All that's really needed is to add a class to the element to flag if it's horizontal or vertical, so a simple radio-input in the navigation block to select orientation would do just the same

@draganescu draganescu merged commit adfc9b9 into master Apr 2, 2020
@draganescu draganescu deleted the add/vertical-nav-variation branch April 2, 2020 13:21
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 2, 2020
@draganescu
Copy link
Contributor Author

hi @aristath having this as an attribute works better as this setting influences other behaviors as well (for example mover direction). The way to have attributes preset is to use the new variations API. There was some discussion about using block styles but it would complicate styling for every single difference that the vertical or horizontal layout makes.

@mtias
Copy link
Member

mtias commented Apr 2, 2020

This is cool, a nice small tweak. cc @gziolo for the variations nod. Next step is to allow transforms!

@gziolo
Copy link
Member

gziolo commented Apr 2, 2020

cc @gziolo for the variations nod. Next step is to allow transforms!

Do you think, we should allow transforms for variations?

@mtias
Copy link
Member

mtias commented Apr 3, 2020

For some, absolutely. It's a way to "swap" one variation with another. It could be useful for changing a Twitter profile with Mastodon, or to change the layout arrangement of columns. It might also be exposed in its own "Variations" panel inside the transforms menu (like styles are).

@gziolo
Copy link
Member

gziolo commented Apr 3, 2020

For some, absolutely. It's a way to "swap" one variation with another. It could be useful for changing a Twitter profile with Mastodon, or to change the layout arrangement of columns. It might also be exposed in its own "Variations" panel inside the transforms menu (like styles are).

#Yes, I agree on that changes on attributes would be quite useful and in general safe to apply. With Columns block and inner blocks case we would need to decide if we provide integration with callback functions that help avoiding content loss. The implementation itself doesn’t look complex unless we want to keep the current variation highlighted in UI.

@ellatrix
Copy link
Member

ellatrix commented May 3, 2020

This seems to have caused a regression in master. The movers for the normal navigation block are no longer horizontal.

@strarsis
Copy link
Contributor

strarsis commented May 4, 2020

I just wanted to create a new issue for this, glad I noticed.
When will you publish a new Gutenberg release?

Related issue: #22085

@ellatrix ellatrix mentioned this pull request Jun 16, 2020
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Needs Design Feedback Needs general design feedback. Needs Design Needs design efforts.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Navigation Block: add support for vertical menus
8 participants