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

Implement initial styling of navigation menu screen #21314

Merged
merged 4 commits into from
Apr 2, 2020

Conversation

talldan
Copy link
Contributor

@talldan talldan commented Apr 1, 2020

Description

Closes #21284

I've implemented this using @wordpress/components components, some of which look different from #21284, just because of the styles of the components.

We'd have to decide if we want to create variations of the styles those components offer or just stick with the out of the box styles.

There's also a question over whether some of the layout makes semantic sense. E.g. a Save Button in a Panel title.

These things can be iterated on.

How has this been tested?

  1. Visit the Navigation Menu page.
  2. Observe the styled page.

Screenshots

Screenshot 2020-04-01 at 4 48 25 pm

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@talldan talldan added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Block] Navigation Affects the Navigation Block labels Apr 1, 2020
@talldan talldan self-assigned this Apr 1, 2020
@github-actions
Copy link

github-actions bot commented Apr 1, 2020

Size Change: +343 B (0%)

Total Size: 884 kB

Filename Size Change
build/block-editor/index.js 102 kB +12 B (0%)
build/block-library/index.js 110 kB -102 B (0%)
build/edit-navigation/index.js 2.48 kB +80 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-site/index.js 9.09 kB +45 B (0%)
build/edit-site/style-rtl.css 4.62 kB +5 B (0%)
build/edit-site/style.css 4.62 kB +4 B (0%)
build/format-library/index.js 6.95 kB +9 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.45 kB 0 B
build/api-fetch/index.js 3.8 kB 0 B
build/autop/index.js 2.59 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/style-rtl.css 11.2 kB 0 B
build/block-editor/style.css 11.2 kB 0 B
build/block-library/editor-rtl.css 7.21 kB 0 B
build/block-library/editor.css 7.21 kB 0 B
build/block-library/style-rtl.css 7.5 kB 0 B
build/block-library/style.css 7.51 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/index.js 195 kB 0 B
build/components/style-rtl.css 16.1 kB 0 B
build/components/style.css 16 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.7 kB 0 B
build/data-controls/index.js 1.03 kB 0 B
build/data/index.js 8.23 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.05 kB 0 B
build/edit-post/index.js 92.3 kB 0 B
build/edit-post/style-rtl.css 12 kB 0 B
build/edit-post/style.css 12 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 3.74 kB 0 B
build/edit-widgets/style.css 3.74 kB 0 B
build/editor/editor-styles-rtl.css 423 B 0 B
build/editor/editor-styles.css 426 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.47 kB 0 B
build/editor/style.css 3.47 kB 0 B
build/element/index.js 4.44 kB 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/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.7 kB 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/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 780 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.5 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.6 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@noisysocks
Copy link
Member

noisysocks commented Apr 1, 2020

I've implemented this using @wordpress/components components, some of which look different from #21284, just because of the styles of the components.

I think this is the right thing to do. Over time I'd like to see @wordpress/components become the canonical look and feel of WP Admin.

Copy link
Member

@noisysocks noisysocks 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 great! Nice work. It's really cool to see how adaptable @wordpress/components are now.

We'll need to make this responsive for mobile and tablet viewports but we can do that in a follow-up PR since this is all marked experimental.

} ) ) }
onChange={ ( selectedMenuId ) => setMenuId( selectedMenuId ) }
/>
<Card className="edit-navigation-menus-editor__menu-selection-card">
Copy link
Member

Choose a reason for hiding this comment

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

A Card! Very cool!

@noisysocks
Copy link
Member

Let's get this in and iterate. It's a huge improvement that brings us closer to being able to test this new screen on users.

I created #21337 to track making this screen responsive.

@karmatosed: If there's any design feedback here, plop it into the project board and we'll get it sorted.

@noisysocks noisysocks merged commit 963998e into master Apr 2, 2020
@noisysocks noisysocks deleted the add/nav-menu-page-styles branch April 2, 2020 00:21
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 2, 2020
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 Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Style the Navigation page.
3 participants