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

Fix dark menus in canvas, not in top toolbar #22516

Merged
merged 4 commits into from
Jun 8, 2020
Merged

Fix dark menus in canvas, not in top toolbar #22516

merged 4 commits into from
Jun 8, 2020

Conversation

jasmussen
Copy link
Contributor

Fixes small oversight in #22351 (comment)

The block editor uses elevation sparingly. Popovers by default have a shadow and ligther border because they, and modal dialogs, are elevated. But popovers in the canvas are not, and scroll under the top toolbar with the block. For those cases, we have the "alternate" display which uses block toolbar material to indicate the popover is part of that.

This PR fixes the typo that made all of them block toolbars, and fixes a couple of other cases where the old menus were used:

Screenshot 2020-05-21 at 10 34 38

Screenshot 2020-05-21 at 10 39 29

Screenshot 2020-05-21 at 10 44 25

Screenshot 2020-05-21 at 10 46 17

Screenshot 2020-05-21 at 11 04 57

@jasmussen jasmussen added the [Type] Regression Related to a regression in the latest release label May 21, 2020
@jasmussen jasmussen self-assigned this May 21, 2020
@github-actions
Copy link

github-actions bot commented May 21, 2020

Size Change: +23 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 105 kB +32 B (0%)
build/components/index.js 190 kB -9 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.93 kB 0 B
build/block-directory/style-rtl.css 790 B 0 B
build/block-directory/style.css 791 B 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 7.17 kB 0 B
build/block-library/editor.css 7.17 kB 0 B
build/block-library/index.js 119 kB 0 B
build/block-library/style-rtl.css 7.48 kB 0 B
build/block-library/style.css 7.48 kB 0 B
build/block-library/theme-rtl.css 684 B 0 B
build/block-library/theme.css 686 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 17.1 kB 0 B
build/components/style.css 17.1 kB 0 B
build/compose/index.js 9.24 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.42 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.11 kB 0 B
build/edit-navigation/index.js 6.63 kB 0 B
build/edit-navigation/style-rtl.css 857 B 0 B
build/edit-navigation/style.css 856 B 0 B
build/edit-post/index.js 302 kB 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/index.js 13.8 kB 0 B
build/edit-site/style-rtl.css 5.53 kB 0 B
build/edit-site/style.css 5.53 kB 0 B
build/edit-widgets/index.js 7.87 kB 0 B
build/edit-widgets/style-rtl.css 4.58 kB 0 B
build/edit-widgets/style.css 4.57 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/index.js 44.6 kB 0 B
build/editor/style-rtl.css 5.06 kB 0 B
build/editor/style.css 5.06 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 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 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 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 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 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.02 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@@ -45,6 +45,10 @@ const DEFAULT_CONTROLS = [ 'left', 'center', 'right', 'wide', 'full' ];
const DEFAULT_CONTROL = 'center';
const WIDE_CONTROLS = [ 'wide', 'full' ];

const POPOVER_PROPS = {
Copy link
Member

Choose a reason for hiding this comment

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

What's the point of having this as a constant?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's the only way I found to get this prop to take.

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 the advantage is that the object is not regenerated on each render. On expensive pure components, it could have an impact but maybe not everywhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Happy to do which ever you agree on. Just haven't been able to get it to work without this method.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It would be nice to unblock this PR, so we don't ship the current change in master if we can avoid it. CC: @youknowriad

Copy link
Contributor

Choose a reason for hiding this comment

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

@jasmussen this shouldn't be a blocker IMO. You can inline these if needed. Performance is probably not a concern here.

@ZebulanStanphill
Copy link
Member

ZebulanStanphill commented May 24, 2020

But popovers in the canvas [...] scroll under the top toolbar with the block.

This may cease to be the case (at least temporarily until a better solution is found) once #21056 is merged. EDIT: It has now ceased to be the case!

@jasmussen
Copy link
Contributor Author

Thank you Riad. I'll merge this and address any follow-up that needs to be addressed.

@jasmussen jasmussen merged commit 8a6171f into master Jun 8, 2020
@jasmussen jasmussen deleted the fix/menus branch June 8, 2020 12:31
@github-actions github-actions bot added this to the Gutenberg 8.3 milestone Jun 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants