Encoding in pattern code breaks rawpixel URLs when copy/pasting pattern

[ryelle]

Rawpixel URLs are broken when copied in the pattern code (using the "copy" button), because the URL is being over-encoded.

For example, copy this pattern, which results in this code:

Pattern code

<!-- wp:cover {"url":"https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd21-021999-534-chim.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=25816d15921707b6523fa40e52efdcac","dimRatio":80,"customOverlayColor":"#4f4523","minHeight":40,"minHeightUnit":"vw","contentPosition":"center center","align":"full","style":{"color":{"duotone":["#000000","#ffffff"]}}} -->
<div class="wp-block-cover alignfull" style="min-height:40vw"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-80 has-background-dim" style="background-color:#4f4523"></span><img class="wp-block-cover__image-background" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd21-021999-534-chim.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=25816d15921707b6523fa40e52efdcac" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"50px","bottom":"50px"}}},"layout":{"inherit":true}} -->
<div class="wp-block-group alignwide" style="padding-top:50px;padding-bottom:50px"><!-- wp:cover {"url":"https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd19-20011.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=6be89633a3b20429853f6d3192649709","dimRatio":20,"overlayColor":"white","minHeight":20,"minHeightUnit":"vw","contentPosition":"center center","isDark":false,"align":"wide"} -->
<div class="wp-block-cover alignwide is-light" style="min-height:20vw"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-20 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd19-20011.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=6be89633a3b20429853f6d3192649709" data-object-fit="cover" /><div class="wp-block-cover__inner-container"><!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","style":{"spacing":{"padding":{"top":"20px","bottom":"20px","left":"40px","right":"40px"}}},"fontSize":"medium"} -->
<div class="wp-block-button has-custom-font-size has-medium-font-size"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background" style="padding-top:20px;padding-right:40px;padding-bottom:20px;padding-left:40px">Get Started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

If you paste that as-is into WordPress, it results in two 403 errors, trying to get URLs like https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd19-20011.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=6be89633a3b20429853f6d3192649709 — note the &s.

If you replace \u0026amp; with & in the pattern, then paste it in, the URLs requested become like https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd19-20011.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=6be89633a3b20429853f6d3192649709, and these resolve successfully.

Props to @carolinan for flagging the issue.