Gutenberg: Adding background image to Cover block provides no feedback during upload

Created on 16 Jun 2020  路  3Comments  路  Source: WordPress/gutenberg

Describe the bug
When adding a background image to the Cover block there is no feedback provided to the user that an image is being uploaded.

To reproduce
Steps to reproduce the behavior:

  1. Throttle network to Slow 3G (use devtools).
  2. Add new Post
  3. Add Cover block - see placeholder
  4. Click "Upload" and upload an image.
  5. See block UI in editor provides absolutely no feedback that an image upload is in progress.
  6. Eventually, see background image set on Cover block.

Expected behavior
Once an image is selected, the Cover block UI should provide some feedback that an image upload is in progress. I would recommend some input from Design on what form this should take.

Please consider that the user may already have content within the Cover block so we can't simply switch the whole block to a "loading" state as that would prevent the user editing their existing content whilst the upload takes place.

The upload process should be async and not blocking.

Screenshots

Screen Capture on 2020-06-16 at 15-33-52

Editor version (please complete the following information):

  • WordPress version: 5.5
  • Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Plugin
  • If the Gutenberg plugin is installed, which version is it? 8.3.0

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Chrome
  • Version [e.g. 22]
Good First Issue [Block] Cover [Type] Bug

All 3 comments

It seems like this should just follow suit with the Image block. It should show the image with an overlay and a loading spinner.

uploading

This was also reported in trac:
https://core.trac.wordpress.org/ticket/45503

I've closed the ticket there in favor of this issue.

Initial attempt to tackle this in https://github.com/WordPress/gutenberg/pull/25401.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

franz-josef-kaiser picture franz-josef-kaiser  路  3Comments

spocke picture spocke  路  3Comments

maddisondesigns picture maddisondesigns  路  3Comments

moorscode picture moorscode  路  3Comments

aduth picture aduth  路  3Comments