Add loading state on image upload in featured image, Site logo and Cover blocks #59519

akasunil · 2024-03-02T09:55:42Z

What?

Resolves #59222.

Added loader while image is being uploaded in featured image block, Site logo block and cover block. Issue reported in #59222

Why?

Loading state which indicate that image is being uploaded was missing.

Testing Instructions

Add any of below listed block in new post/Site editor
- Featured image
- Site logo
- Cover
Drag and drop image on bock

Screenshots or screencast

github-actions · 2024-03-02T09:55:58Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: sunil25393 <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: annezazu <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

akasunil · 2024-03-15T04:57:00Z

@t-hamano Can you please review this PR ?

… fix-issue-59222

akasunil · 2024-03-29T05:28:09Z

@Mamaduka need your help to review this PR.

Mamaduka · 2024-03-29T13:07:26Z

@sunil25393, I'll try to have a look next week.

Side note: It's usually easier for review to review atomic PRs targeting a single block or feature.

akasunil · 2024-04-03T04:58:24Z

Side note: It's usually easier for review to review atomic PRs targeting a single block or feature.

I understand, but since the code is for similar kind of functionality for all three blocks, i included it in single PR.

Mamaduka

Thank you, @sunil25393!

I left a couple of notes based on the initial review.

Mamaduka · 2024-04-03T13:37:37Z

packages/block-library/src/cover/editor.scss

@@ -1,4 +1,6 @@
 .wp-block-cover {
+	position: relative;


It looks like this rule was removed for some reason after the loading state was introduced for the Cover block (#25401).

Let's avoid unexpected regression and only apply this style conditionally. We can put &.is-transient { position: relative; } near other loading state classes (they start at L32).

Mamaduka · 2024-04-03T13:38:53Z

packages/block-library/src/cover/editor.scss

+	// When image being uploaded.
+	&.is-transient img {
+		opacity: 0.3;
+	}


I think the &.is-transient::before styles already handle this, so there's no need for image opacity.

Mamaduka · 2024-04-03T13:40:43Z

packages/block-library/src/post-featured-image/edit.js

+	// Reset temporary url when media is available.
+	useEffect( () => {
+		if ( media && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ media, temporaryURL ] );
+


I think we can ditch this effect and reset setTemporaryURL in onSelectImage when the feature image ID is set.

I did the same thing before, however it takes time to set media after calling onSelectImage, and at that time, the placeholder is displayed. It causes flashing. So, I have to clear temporaryURL after media is set.

That makes sense. Let's use the derived mediaUrl string value for the condition instead of the media object.

Mamaduka · 2024-04-15T11:18:59Z

packages/block-library/src/site-logo/edit.js


 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
+			setTemporaryURL( media?.url );


Suggested change

setTemporaryURL( media?.url );

setTemporaryURL( media.url );

Nit: There's no need for optional chaining here. See the condition above.

Mamaduka · 2024-04-15T11:22:35Z

packages/block-library/src/site-logo/edit.js

 			return;
 		}

+		setTemporaryURL( media?.url );


What's the reason for setting a temp URL here? The blob URL check above returns early, so the image will be uploaded when this line is reached.

This line causes the Site Logo to be displayed in the upload state when selecting an already uploaded image from the Media Library.

Good catch, Must have added to test. forgot to remove it after.

Mamaduka · 2024-04-15T11:24:20Z

packages/block-library/src/site-logo/edit.js

 	};

 	const onRemoveLogo = () => {
+		setTemporaryURL();


I think we can also remove the call here. The " Reset " control uses the' onRemoveLogo' callback, which is only displayed after the image upload.

I tested it by removing this, It works fine.

Mamaduka

Thanks for addressing the feedback, @sunil25393!

The changes test well for me ✅

Add loader on feature image block

2e181f6

akasunil requested a review from ajitbohra as a code owner March 2, 2024 09:55

akasunil added 2 commits March 6, 2024 16:43

Add loading effect for image upload in cover block

7de2f52

Add loading state for site logo block

63a98c1

akasunil changed the title ~~Add loading state on image upload in featured image block~~ Add loading state on image upload in featured image, Site logo and Cover blocks Mar 6, 2024

Add loading css for site logo

a9b4e0e

Merge branch 'trunk' of personal.github.com:sunil25393/gutenberg into…

c72999e

… fix-issue-59222

Mamaduka self-requested a review March 29, 2024 13:06

Mamaduka assigned akasunil Mar 29, 2024

Mamaduka added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image [Block] Post Featured Image Affects the Post Featured Image Block [Block] Site Logo Affects the Site Logo Block labels Mar 29, 2024

Mamaduka reviewed Apr 3, 2024

View reviewed changes

akasunil added 2 commits April 15, 2024 14:21

Resolved conflict and sync with trunk

e6c2e5c

optimise css to avoid regression

ff63160

Mamaduka reviewed Apr 15, 2024

View reviewed changes

Remove unneccessory calls to state change

9f9768a

Mamaduka approved these changes Apr 15, 2024

View reviewed changes

Mamaduka merged commit d9a6429 into WordPress:trunk Apr 15, 2024

github-actions bot added this to the Gutenberg 18.2 milestone Apr 15, 2024

akasunil deleted the fix-issue-59222 branch April 15, 2024 16:11

Add loading state on image upload in featured image, Site logo and Cover blocks #59519

Add loading state on image upload in featured image, Site logo and Cover blocks #59519

Uh oh!

Conversation

akasunil commented Mar 2, 2024 • edited by Mamaduka Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Testing Instructions

Screenshots or screencast

Uh oh!

github-actions bot commented Mar 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akasunil commented Mar 15, 2024

Uh oh!

akasunil commented Mar 29, 2024

Uh oh!

Mamaduka commented Mar 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

akasunil commented Apr 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Mamaduka left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

akasunil commented Mar 2, 2024 •

edited by Mamaduka

Loading

github-actions bot commented Mar 2, 2024 •

edited

Loading

Mamaduka commented Mar 29, 2024 •

edited

Loading

akasunil commented Apr 3, 2024 •

edited

Loading