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 movers in full-wide. #21097

Merged
merged 1 commit into from
Mar 27, 2020
Merged

Fix movers in full-wide. #21097

merged 1 commit into from
Mar 27, 2020

Conversation

jasmussen
Copy link
Contributor

Fixes #20451. Props @lgersman for advice.

The mover control did not work for full-wide images. I'm honestly surprised it worked in wide and normal settings, because the z-index was -1 meaning it shouldn't be. I suspect it's because the layout canvas has padding left and right that somehow interferes with things here, but couldn't verify.

However the negative z index wasn't a good fix in the first place. The reason it was there, was to make sure that when the mover control animates out, it appears to be coming from "beneath" the block toolbar. The z-index put it below the entire block toolbar, which is the container that has a background color.

This PR changes things so the mover control does not have a z-index, but the switcher button has been elevated, and been given a white background color to cover it.

movers

@jasmussen jasmussen added the [Type] Bug An existing feature does not function as intended label Mar 24, 2020
@jasmussen jasmussen self-assigned this Mar 24, 2020
@github-actions
Copy link

github-actions bot commented Mar 24, 2020

Size Change: +44 B (0%)

Total Size: 856 kB

Filename Size Change
build/block-editor/style-rtl.css 11 kB +23 B (0%)
build/block-editor/style.css 11 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.44 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 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/index.js 101 kB 0 B
build/block-library/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.23 kB 0 B
build/block-library/index.js 110 kB 0 B
build/block-library/style-rtl.css 7.44 kB 0 B
build/block-library/style.css 7.45 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 190 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.6 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.25 kB 0 B
build/date/index.js 5.37 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.06 kB 0 B
build/edit-post/index.js 91.2 kB 0 B
build/edit-post/style-rtl.css 8.43 kB 0 B
build/edit-post/style.css 8.43 kB 0 B
build/edit-site/index.js 6.73 kB 0 B
build/edit-site/style-rtl.css 2.91 kB 0 B
build/edit-site/style.css 2.9 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 2.57 kB 0 B
build/edit-widgets/style.css 2.57 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 42.8 kB 0 B
build/editor/style-rtl.css 3.38 kB 0 B
build/editor/style.css 3.38 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 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 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.49 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.69 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 781 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.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

Fixes #20451. Props @lgersman for advice.

The mover control did not work for full-wide images. I'm honestly surprised it worked in wide and normal settings, because the z-index was -1 meaning it shouldn't be. I suspect it's because the layout canvas has padding left and right that somehow interferes with things here, but couldn't verify.

However the negative z index wasn't a good fix in the first place. The reason it was there, was to make sure that when the mover control animates out, it appears to be coming from "beneath" the block toolbar. The z-index put it below the entire block toolbar, which is the container that has a background color.

This PR changes things so the mover control does not have a z-index, but the switcher button has been elevated, and been given a white background color to cover it.
Copy link
Contributor

@mapk mapk left a comment

Choose a reason for hiding this comment

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

I just tested this out and the movers stayed open upon hovering. I was able to click them and drag the block easily. Thanks Joen!

@jasmussen jasmussen merged commit eb2138c into master Mar 27, 2020
@jasmussen jasmussen deleted the try/full-wide-fix branch March 27, 2020 15:45
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Mar 27, 2020
@talldan talldan mentioned this pull request Apr 7, 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.

[G2] Block mover is not clickable or draggable on full-width blocks
2 participants