Skip to content

/ gutenberg

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

Jump to bottom

Image editing: move zoom control to toolbar dropdown #23677

Merged
merged 1 commit into from Jul 3, 2020
Merged

Image editing: move zoom control to toolbar dropdown #23677

merged 1 commit into from Jul 3, 2020

Conversation

@ellatrix
Copy link
Member

@ellatrix ellatrix commented Jul 3, 2020 •
edited

Description

See #22569.

This PR moves the zoom range control to the block toolbar as a dropdown.

  • The zoom control doesn't belong in the block itself.
  • Worth noting that this slider is a back-up for zooming the image. You can also "scroll" or pinch the image to zoom (and move!) the image.
  • There was talk to put the slider in the toolbar itself, instead of a drop down.
    • Horizontal arrow keys will clash, so it would need a special way to enter and leave the control with the keyboard.
    • Not sure if it's worth overloading the toolbar with a controls that's meant as a back-up.
    • Tbh, sometimes I wonder if we need this control at all. You might be able to zoom, but you still can't move the image with keyboard only. 🙂

How has this been tested?

Screenshots

Screenshot 2020-07-03 at 15 04 42

Types of changes

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.
@ellatrix
ellatrix reviewed Jul 3, 2020
View changes
packages/components/src/dropdown/index.js
@@ -95,6 +95,7 @@ export default function Dropdown( {
headerTitle={ headerTitle }
focusOnMount={ focusOnMount }
{ ...popoverProps }
anchorRef={ containerRef.current }

This comment has been minimized.

Sign in to view
@ellatrix

ellatrix Jul 3, 2020
Author Member

Avoid injecting a span element that messes with :last-child selectors.
@github-actions
Copy link

@github-actions github-actions bot commented Jul 3, 2020 •
edited

Size Change: -54 B (0%)

Total Size: 1.13 MB

Filename Size Change
build/block-library/editor-rtl.css 7.57 kB -48 B (0%)
build/block-library/editor.css 7.57 kB -48 B (0%)
build/block-library/index.js 130 kB +30 B (0%)
build/components/index.js 198 kB +12 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.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.16 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 0 B
build/block-editor/index.js 109 kB 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/style-rtl.css 7.78 kB 0 B
build/block-library/style.css 7.79 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 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.2 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.65 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.44 kB 0 B
build/date/index.js 5.47 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.19 kB 0 B
build/edit-navigation/index.js 9.97 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.57 kB 0 B
build/edit-post/style.css 5.57 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.33 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.77 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.73 kB 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.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 710 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.12 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.3 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 671 B 0 B
build/nux/style.css 668 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 788 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.68 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action
@ellatrix
Image editing: move zoom control to toolbar
Loading status checks…
f4fa1ff
@ellatrix ellatrix force-pushed the try/image-editing-zoom-toolbar branch from 1d3963c to f4fa1ff Jul 3, 2020
@ellatrix ellatrix mentioned this pull request Jul 3, 2020
Closed
0 of 6 tasks complete
@ellatrix ellatrix merged commit 5fd9619 into master Jul 3, 2020
13 checks passed
13 checks passed
Check Check
Details
build
Details
Admin - 1
Details
pull-request-automation
Details
test (gutenberg-editor-gallery)
Details
test (gutenberg-editor-gallery)
Details
All
Details
JavaScript
Details
Admin - 2
Details
PHP
Details
Admin - 3
Details
Mobile
Details
Admin - 4
Details
@ellatrix ellatrix deleted the try/image-editing-zoom-toolbar branch Jul 3, 2020
@github-actions github-actions bot added this to the Gutenberg 8.5 milestone Jul 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@youknowriad youknowriad

@ajitbohra ajitbohra

@chrisvanpatten chrisvanpatten

@ajlende ajlende

Assignees
No one assigned
Labels
[Block] Image
Projects
None yet
Milestone
Gutenberg 8.5
Linked issues

Successfully merging this pull request may close these issues.

None yet

1 participant
@ellatrix
You can’t perform that action at this time.