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

Site Editor: fix app header on small-medium screens #27310

Merged
merged 4 commits into from
Nov 27, 2020

Conversation

mattwiebe
Copy link
Contributor

Description

This fixes various issues with app header alignment on small-medium screens, particularly with the navigation sidebar open.

It removes a lot of flex properties and just allows flexbox to do its thing. This keeps the document dropdown from being perfectly centred, but it improves reliability as we're not trying to compensate for edge cases.

Non-is-primary icons are simply hidden on < large screens while the navigation sidebar is open to ensure there's enough room.

Fixes #27245 #26754

How has this been tested?

  1. Open Site Editor
  2. Open Navigation Sidebar
  3. Try various widths, ensure that the app toolbar stays functional and unbroken
  4. Note that the (W) icon now appears in the navigation sidebar on < medium screens to close it (it can be opened on those screens through "browse all templates" in the document dropdown)

Types of changes

Bug fix

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.

Especially in contexts with the navigation sidebar open

Fixes #27245 #26754
@github-actions
Copy link

github-actions bot commented Nov 26, 2020

Size Change: -5.48 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/a11y/index.js 1.14 kB -1 B
build/blob/index.js 665 B +1 B
build/block-editor/index.js 128 kB -5.55 kB (4%)
build/block-editor/style-rtl.css 11.2 kB -75 B (0%)
build/block-editor/style.css 11.2 kB -76 B (0%)
build/block-library/editor-rtl.css 8.95 kB -15 B (0%)
build/block-library/editor.css 8.95 kB -15 B (0%)
build/block-library/index.js 148 kB -7 B (0%)
build/block-library/style-rtl.css 8.27 kB +39 B (0%)
build/block-library/style.css 8.27 kB +39 B (0%)
build/block-library/theme-rtl.css 789 B -3 B (0%)
build/block-library/theme.css 790 B -3 B (0%)
build/block-serialization-default-parser/index.js 1.87 kB -2 B (0%)
build/blocks/index.js 48.1 kB -1 B
build/components/index.js 172 kB -3 B (0%)
build/compose/index.js 9.95 kB -2 B (0%)
build/core-data/index.js 14.8 kB +2 B (0%)
build/data/index.js 8.98 kB +173 B (1%)
build/date/index.js 11.2 kB +1 B
build/deprecated/index.js 769 B +1 B
build/edit-navigation/index.js 11.1 kB +3 B (0%)
build/edit-site/index.js 24 kB +6 B (0%)
build/edit-site/style-rtl.css 3.91 kB -11 B (0%)
build/edit-site/style.css 3.91 kB -11 B (0%)
build/edit-widgets/index.js 26.3 kB +7 B (0%)
build/element/index.js 4.62 kB +2 B (0%)
build/format-library/index.js 6.86 kB -5 B (0%)
build/html-entities/index.js 622 B -1 B
build/list-reusable-blocks/index.js 3.1 kB +1 B
build/notices/index.js 1.82 kB +4 B (0%)
build/nux/index.js 3.42 kB +1 B
build/plugins/index.js 2.56 kB +1 B
build/redux-routine/index.js 2.84 kB -2 B (0%)
build/reusable-blocks/index.js 2.92 kB +5 B (0%)
build/rich-text/index.js 13.4 kB +22 B (0%)
build/shortcode/index.js 1.69 kB -3 B (0%)
build/token-list/index.js 1.27 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/annotations/index.js 3.8 kB 0 B
build/api-fetch/index.js 3.42 kB 0 B
build/autop/index.js 2.84 kB 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/components/style-rtl.css 15.3 kB 0 B
build/components/style.css 15.3 kB 0 B
build/data-controls/index.js 828 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 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/index.js 306 kB 0 B
build/edit-post/style-rtl.css 6.42 kB 0 B
build/edit-post/style.css 6.4 kB 0 B
build/edit-widgets/style-rtl.css 3.13 kB 0 B
build/edit-widgets/style.css 3.13 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/index.js 43.3 kB 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/hooks/index.js 2.27 kB 0 B
build/i18n/index.js 3.57 kB 0 B
build/is-shallow-equal/index.js 698 B 0 B
build/keyboard-shortcuts/index.js 2.54 kB 0 B
build/keycodes/index.js 1.94 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/media-utils/index.js 5.32 kB 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 790 B 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.86 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.22 kB 0 B

compressed-size-action

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.

I left one comment to remove a variable from the base styles, but otherwise this looks good!

menu

Thanks so much for working on this! Awesome PR!

.edit-site-header_end {
// Flex basis prevents the header_end toolbar
// from collapsing when shrinking the viewport
flex-basis: $header-toolbar-min-width;
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this is the only place that variable is used. Which means it can be removed from the _variables.scss stylesheet in base-styles now. See also #26827.

@mattwiebe mattwiebe merged commit 2370863 into master Nov 27, 2020
@mattwiebe mattwiebe deleted the fix/edit-site-header-layout branch November 27, 2020 17:14
@github-actions github-actions bot added this to the Gutenberg 9.5 milestone Nov 27, 2020
@mattwiebe mattwiebe self-assigned this Nov 27, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Site Editor: fix toolbar on mid-sized screens
2 participants