When using copy-pasted patterns, some situations doesn't prompts "Upload external images"

[pedddro]

Some situations don't prompt "Upload external images" after copy-paste a pattern in the block editor:

• "Cover" block (It's background image)
• "Media & Text" block (media image)
• "Image" block

Repro:

• Copy the pattern here and paste into a page. Only one of the images shows the prompt.

I have tested and after changing the URL of the media, the prompt does appear. Seems to be a CORS issue.

What problem does this address?

UX.

What is your proposed solution?

When copy pasting patterns from external sites, every linked external image from any blocks should prompt the "Upload external images" check.

[annezazu]

Adding this to the Polish board as this feels like a rough edge that would go a long way to figure out.

[janetwdawson]

I write most of my content in Google Docs and then copy/paste into Gutenberg. Images pasted from Docs always had Upload External Image on the image block toolbar in the past; now they do not. It's VERY frustrating and a major obstacle to content creation.

[annezazu]

@janetwdawson what version of WordPress are you using? Curious to learn more. If possible, please open a new issue too with more information about your environment, ensuring you can replicate without any other plugins activate.

[janetwdawson]

First observed on my live site which is running WordPress 6.5.3 with the BuddyBoss Child theme. I can't turn off all the plugins on live (or the main staging where others are working), so I tested this a staging that's running WP 6.4.3 (still the BB Child theme). With all plugins deactivated... [image: image.png] ... the issue is still happening. No Upload External Image button on the block toolbar: [image: image.png] Should I really add a new ticket for the same issue? I'm new here and still learning the ropes, but I didn't think multiple tickets for the same issue was desirable. When reporting a different issue, I had to pinky swear that I'd searched for the topic and wasn't duplicating an existing thread. ;)

…

On Tue, Jun 18, 2024 at 5:05 PM annezazu ***@***.***> wrote: @janetwdawson <https://github.com/janetwdawson> what version of WordPress are you using? Curious to learn more. If possible, please open a new issue too with more information about your environment, ensuring you can replicate without any other plugins activate. — Reply to this email directly, view it on GitHub <#60323 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A7G3OVEXAEJHXV34E6ED65TZICHHLAVCNFSM6AAAAABFPYDQF6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCNZWHA3TGNZUGE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Find me online at the Handweaving Academy! https://handweavingacademy.com The Bobbin Tree on Facebook: http://www.thebobbintree.com The Bobbin Tree webstore: http://thebobbintree.square.site

[annezazu]

The reason I asked for a new issue is because you are copying and pasting from Google docs whereas this issue is about using copy/pasted patterns :) That's a bit of a different situation, even if it feels the same.

I tried testing using 6.5.4 with a playground instance (ignore the mention of 6.5.3 as I had it wrong) and couldn't replicate:

copy.paste.from.gdocs.mov

I also can't see the images you have attached. To be safe, I also tested with 6.6 beta 3 (the current release in progress) and couldn't replicate either.

[pedddro]

@annezazu I think it meant the same issue as mine;
"No Upload External Image button on the block toolbar"

[annezazu]

@WordPress/outreach can anyone replicate this reliably? Wanting to follow up here to get more info and ideally get this fixed. Going to do more testing today.

[justintadlock]

I can confirm that pasting the pattern linked above resulted in the same issue. For the first two images, there was no way to upload it. For the third image, I got the upload icon.

First two images toolbar:

Third image toolbar:

[annezazu]

Cannot replicate with 6.5.4 nor with 6.6 RC2 via copying & pasting from a Google doc:

Trying.to.replicate.media.issue.mov

From there, I tried to replicate by copying and pasting the pattern mentioned in the original issue and can do so with 6.6 RC2 & 6.5 as noted in the original issue:

replicate.with.patterns.mov

This is part of why I'd like the issues separated out as they seem to be distinct problems but let's roll with it for now :) @ryelle any clue what might be different about the pattern here?

[annezazu]

Testing with more patterns:
https://wordpress.org/patterns/pattern/centered-image-with-two-tone-background-color/ -- shows icon
https://wordpress.org/patterns/pattern/fullwidth-dark-banner-with-heading-top-left/ -- no icon (perhaps because it's a cover block)
https://wordpress.org/patterns/pattern/fullwidth-cover-with-repeating-gradient-text/ -- no icon (perhaps because it's a cover block)
https://wordpress.org/patterns/pattern/media-text-with-image-on-the-right/ -- no icon (perhaps because media & text block)
https://wordpress.org/patterns/pattern/fullscreen-cover-image-gallery/ -- shows icon for both images
https://wordpress.org/patterns/pattern/three-columns-with-offset-images/ -- shows icon for all images.

Digging into this more, I went back to the original pattern and looked at the code editor. Notice how the two other images without the upload option use this domain: https://demo.wpzoom.com/foodica-patterns/wp-content/plugins/block-patterns-for-food-bloggers/patterns/images/pexels-andrea-piacquadio-3771106.jpg vs the last image with https://s.w.org/images/core/5.8/portrait.jpg.

<div class="wp-block-group alignfull has-background" style="background:linear-gradient(90deg,rgb(46,34,225) 50%,rgb(255,255,255) 50%);padding-top:70px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}}}} -->
<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
<div class="wp-block-column" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:image {"id":6348,"width":"300px","aspectRatio":"9/16","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<figure class="wp-block-image size-large is-resized is-style-rounded"><img src="https://demo.wpzoom.com/foodica-patterns/wp-content/plugins/block-patterns-for-food-bloggers/patterns/images/pexels-andrea-piacquadio-3771106.jpg" alt="" class="wp-image-6348" style="aspect-ratio:9/16;object-fit:cover;width:300px"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontStyle":"normal","fontWeight":"700","fontSize":"26px","lineHeight":"1.2","letterSpacing":"1px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"35px","right":"0px","bottom":"35px","left":"0px"}}},"textColor":"white"} -->
<h4 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-top:35px;margin-right:0px;margin-bottom:35px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:26px;font-style:normal;font-weight:700;letter-spacing:1px;line-height:1.2">DESIGNERS HAVE A LOT OF THINGS TO FEEL HAPPY ABOUT</h4>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">Donec et odio pellentesque diam volutpat commodo sed egestas. Nisl condimentum id venenatis a. Proin nibh nisl condimentum id. Dictumst vestibulum rhoncus est .</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:image {"id":6762,"sizeSlug":"full","linkDestination":"media","align":"center","className":"is-style-rounded","style":{"color":[],"border":{"width":"10px"}},"borderColor":"white"} -->
<figure class="wp-block-image aligncenter size-full has-custom-border is-style-rounded"><img src="https://demo.wpzoom.com/foodica-patterns/wp-content/plugins/block-patterns-for-food-bloggers/patterns/images/author.png" alt="" class="has-border-color has-white-border-color wp-image-6762" style="border-width:10px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}}} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontStyle":"normal","fontWeight":"700","lineHeight":"1.2","fontSize":"26px"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<h4 class="wp-block-heading has-text-align-center" style="margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-size:26px;font-style:normal;font-weight:700;line-height:1.2">Creative Blog is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.</h4>
<!-- /wp:heading -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0px","margin":{"top":"35px","bottom":"35px"}}},"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="margin-top:35px;margin-bottom:35px"><!-- wp:button {"textColor":"white","style":{"typography":{"fontStyle":"normal","fontWeight":"400","fontSize":"16px","textTransform":"uppercase"},"spacing":{"padding":{"top":"12px","right":"35px","bottom":"12px","left":"35px"}},"color":{"background":"#2e22e1"},"border":{"radius":"50px"}}} -->
<div class="wp-block-button has-custom-font-size" style="font-size:16px;font-style:normal;font-weight:400;text-transform:uppercase"><a class="wp-block-button__link has-white-color has-text-color has-background wp-element-button" style="border-radius:50px;background-color:#2e22e1;padding-top:12px;padding-right:35px;padding-bottom:12px;padding-left:35px">Contact us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:image {"width":"300px","height":"300px","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded","style":{"border":{"width":"0px","style":"none"}}} -->
<figure class="wp-block-image size-large is-resized has-custom-border is-style-rounded"><img src="https://s.w.org/images/core/5.8/portrait.jpg" alt="A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed." style="border-style:none;border-width:0px;width:300px;height:300px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->```

[ryelle]

So, I think this pattern was created outside of the pattern directory and pasted in— first, demo.wpzoom.com is almost certainly not an openverse source 🙂

But I bet the real problem is that the image without the upload button has an id attribute, because it was local to wherever it was created, so the editor thinks it's still a local image (a very quick dive into the image edit code isExternalImage makes me think I'm right).

This will happen if users paste patterns into the pattern creator (and is why we ask folks not to do that, in addition to copyright issues). But they still do so perhaps the pattern directory can omit ids off blocks before they're copied?

[annezazu]

But they still do so perhaps the pattern directory can omit ids off blocks before they're copied?

Great sleuthing, thank you! Let's try that. I'm also curious about how we can warn or block people from submissions of external images but I'm sure that's complex to accomplish.

[ryelle]

Let's try that.

I've added an issue for it here: WordPress/pattern-directory#698

I'm also curious about how we can warn or block people from submissions of external images but I'm sure that's complex to accomplish.

Yeah, that was a concern from the start (WordPress/pattern-directory#494), I thought moderation would help but it's hard for a human to tell when there are a number of verified openverse sources. That said, the id attribute might be a good sign to flag a pattern.

[annezazu]

I think we can close this out considering the right issues have been opened in the pattern directory to resolve this more at the root. Going to close but happy to reopen if I'm getting this wrong.

[pedddro]

If I understand correctly this isn't related just to wp.org patterns. Maybe in core there should be a way to remove the id once a pattern is copy-pasted and trigger the upload external images button.