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

Image block: avoid edit (history/undo) during image upload #22761

Closed
wants to merge 2 commits into from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented May 29, 2020

Description

Partly fixes #8119.

This tries fixed a long standing issue with the image block: undo after upload loads the temporary URL, which is no longer available. The problem is that the attributes are set twice and seen as two steps in the history.

My proposed solution is to set the attributes once, and then "silently" mutate the state when the upload is complete. The only rule for a block to silently set attributes is that there should be no difference in data or appearance. This is the case for image upload, because the temporary image should be the exact same as the image after upload.

The only conflict to this rule with the current UI is that we have some loading UI that is displayed while image is uploading to the server. I think we should get rid of this.

  • It feels much smoother to the user if it seems like the image is instantly uploaded.
  • There's no need for the user to know what happens in the background. The image is there, and they can continue writing.
  • We should only communicate with the user when the upload fails for some reason.
  • Google Docs does this too, and image upload feels instant.

Timeline of image upload

  • User selects an image, and a temporary image URL is set. To the user, image insertion feels instant without loading indicators etc.
  • Upload completes and the attributes object is silently mutated, meaning that no re-render will happen by itself. A re-render is not necessary because a silent attribute change should only be done if there's no real data and visual change.
  • At some later point, the component might render again and the new attributes will be used.

How has this been tested?

Screenshots

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.

if ( options.silent ) {
const attributes = window.wp.data
.select( 'core/block-editor' )
.getBlockAttributes( clientId );
Copy link
Member Author

Choose a reason for hiding this comment

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

To do: move to reducer.

@ellatrix ellatrix requested review from mcsf and mtias May 29, 2020 19:37
@github-actions
Copy link

github-actions bot commented May 29, 2020

Size Change: +45 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/block-editor/index.js 105 kB +50 B (0%)
build/block-library/editor-rtl.css 7.6 kB -8 B (0%)
build/block-library/editor.css 7.6 kB -8 B (0%)
build/block-library/index.js 119 kB +11 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.48 kB 0 B
build/block-directory/style-rtl.css 787 B 0 B
build/block-directory/style.css 787 B 0 B
build/block-editor/style-rtl.css 11.3 kB 0 B
build/block-editor/style.css 11.3 kB 0 B
build/block-library/style-rtl.css 7.68 kB 0 B
build/block-library/style.css 7.68 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/index.js 190 kB 0 B
build/components/style-rtl.css 19.5 kB 0 B
build/components/style.css 19.5 kB 0 B
build/compose/index.js 9.32 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.43 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 7.88 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 5.43 kB 0 B
build/edit-post/style.css 5.43 kB 0 B
build/edit-site/index.js 14.1 kB 0 B
build/edit-site/style-rtl.css 2.96 kB 0 B
build/edit-site/style.css 2.96 kB 0 B
build/edit-widgets/index.js 8.88 kB 0 B
build/edit-widgets/style-rtl.css 2.4 kB 0 B
build/edit-widgets/style.css 2.4 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 4.26 kB 0 B
build/editor/style.css 4.27 kB 0 B
build/element/index.js 4.64 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.12 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.68 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

@ellatrix
Copy link
Member Author

ellatrix commented Jun 1, 2020

I'm closing this PR because it's not a good solution. It doesn't account for edits made in-between. I'm trying to come up with something better.

@ellatrix ellatrix closed this Jun 1, 2020
@ellatrix ellatrix deleted the try/image-upload-undo branch June 1, 2020 16:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Undo trap": Avoid getting stuck in an editing state
1 participant