Add Gutenberg welcome guide images to s.w.org

[noisysocks]

We can significantly reduce the size of some of Gutenberg's JavaScript bundles if we externally host the images used by the welcome guide. See ​https://github.com/WordPress/gutenberg/pull/32026.

Could we please host the attached images on s.w.org for use in the above PR?

[dd32]

I've added these to a images/block-editor folder, URLs follow, as it's a CDN that we don't really have cache flush/purge ability for, any updates would generally just suffix ?2 as a cache-buster.

Updates can be made via a meta ticket, or any dotorg committer with access to wordpress.org can do it.

​https://s.w.org/images/block-editor/welcome-canvas.gif
​https://s.w.org/images/block-editor/welcome-canvas.svg
​https://s.w.org/images/block-editor/welcome-documentation.gif
​https://s.w.org/images/block-editor/welcome-documentation.svg
​https://s.w.org/images/block-editor/welcome-editor.gif
​https://s.w.org/images/block-editor/welcome-editor.svg
​https://s.w.org/images/block-editor/welcome-library.gif
​https://s.w.org/images/block-editor/welcome-library.svg

[jameskoster]

I attached two graphics that were recently added (​https://github.com/WordPress/gutenberg/pull/32055) to the template editor in Gutenberg.

Could they be uploaded too?

[jameskoster]

An optimised version of template-editor.gif

[dd32]

Replying to jameskoster:

I attached two graphics that were recently added (​https://github.com/WordPress/gutenberg/pull/32055) to the template editor in Gutenberg.

Could they be uploaded too?

​https://s.w.org/images/block-editor/welcome-template-editor.gif
​https://s.w.org/images/block-editor/welcome-template-editor.svg

Since these were also in the welcome guide by look of it, I prefixed welcome- to it for some kind of consistency to the filenames. I can rename if that's a problem.

[jameskoster]

Perfect, thank you! :)

[critterverse]

Hi all, I'm re-opening this ticket based on a new Welcome Guide asset for Reusable blocks that’s being worked on in ​https://github.com/WordPress/gutenberg/pull/32464

I’ve attached two files for the new guide — could these new assets be uploaded alongside the existing ones? Thank you!

[dd32]

Replying to critterverse:

I’ve attached two files for the new guide — could these new assets be uploaded alongside the existing ones? Thank you!

Done in r17520-dotorg.

​https://s.w.org/images/block-editor/welcome-reusable.gif
​https://s.w.org/images/block-editor/welcome-reusable.svg

[critterverse]

Thanks @dd32!

[critterverse]

Very sorry for the annoying double request but I realized this guide asset needed a few tweaks after seeing it in context. @dd32 would you be able to replace the two existing reusable block assets with the two new ones I’ve attached here? They are named “v2” to avoid confusion but feel free to replace with the original naming. Thank you!

(FYI, the SVG looks almost exactly the same but I did make a very minor change there)

[dd32]

@critterverse No problem at all!

Quick question though, the diff of the SVG's seems to indicate that the SVG now has an embedded jpeg in it, I'm not sure that was intentional?

welcome-reusable.svg

@@ -1 @@
-<svg width="312" height="240" viewBox="0 0 312 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="312" height="240" viewBox="0 0 312 240" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g clip-path="url(#clip0)">
 <rect width="312" height="240" fill="#00A0D2"/>
 <path d="M99 52C99 50.8954 99.8954 50 101 50H212C213.105 50 214 50.8954 214 52V188C214 189.105 213.105 190 212 190H101C99.8954 190 99 189.105 99 188V52Z" fill="white"/>
 <rect x="111" y="62" width="91" height="62" fill="#DDDDDD"/>
-<path d="M162.435 87.0001L153.534 98.9704L148.373 95.1329" stroke="#1E1E1E" stroke-width="1.5"/>
+<path d="M162.435 86.0001L153.534 97.9704L148.373 94.1329" stroke="#1E1E1E" stroke-width="1.5"/>
 <path d="M-28 52C-28 50.8954 -27.1046 50 -26 50H85C86.1046 50 87 50.8954 87 52V188C87 189.105 86.1046 190 85 190H-26C-27.1046 190 -28 189.105 -28 188V52Z" fill="white"/>
 <rect x="-16" y="116" width="91" height="62" fill="#DDDDDD"/>
 <path d="M35.4348 141L26.5342 152.97L21.3731 149.133" stroke="#1E1E1E" stroke-width="1.5"/>
 <path d="M226 52C226 50.8954 226.895 50 228 50H339C340.105 50 341 50.8954 341 52V188C341 189.105 340.105 190 339 190H228C226.895 190 226 189.105 226 188V52Z" fill="white"/>
 <rect x="238" y="89" width="91" height="62" fill="#DDDDDD"/>
 <path d="M289.435 114L280.534 125.97L275.373 122.133" stroke="#1E1E1E" stroke-width="1.5"/>
+<rect width="312" height="240" fill="url(#pattern0)" fill-opacity="0.5"/>
 </g>
 <defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0" transform="scale(0.00160256 0.00208333)"/>
+</pattern>
 <clipPath id="clip0">
 <rect width="312" height="240" fill="white"/>
 </clipPath>
+<image id="image0" width="624" height="480" xlink:href="data:image/jpeg;base64,/9j/4QyZRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAA....
 </defs>
 </svg>

[dd32]

I'm going to assume the images are correct.

Updated in r17532-dotorg, please use a query parameter as a cache-buster:

​https://s.w.org/images/block-editor/welcome-reusable.gif?2
​https://s.w.org/images/block-editor/welcome-reusable.svg?2

[critterverse]

Quick question though, the diff of the SVG's seems to indicate that the SVG now has an embedded jpeg in it, I'm not sure that was intentional?

Unintentional 🙈 Thank you for catching that. I'm not sure if the hidden layer poses any issues or not but I've attached a v3 here just in case. Thanks so much for all your help with this @dd32!

[dd32]

Replying to critterverse:

Unintentional 🙈 Thank you for catching that. I'm not sure if the hidden layer poses any issues or not but I've attached a v3 here just in case.

Done!

​https://s.w.org/images/block-editor/welcome-reusable.gif?2
​https://s.w.org/images/block-editor/welcome-reusable.svg?3

[Mamaduka]

Hi, @dd32

Re-opening based on new Welcome Guide assets for Site Editor and Global Styles - ​https://github.com/WordPress/gutenberg/pull/36172.

[dd32]

Added in r17916-dotorg.

​https://s.w.org/images/block-editor/edit-your-site.gif?1
​https://s.w.org/images/block-editor/edit-your-site.svg?1
​https://s.w.org/images/block-editor/personalize-blocks.gif?1
​https://s.w.org/images/block-editor/personalize-blocks.svg?1
​https://s.w.org/images/block-editor/set-the-design.gif?1
​https://s.w.org/images/block-editor/set-the-design.svg?1
​https://s.w.org/images/block-editor/welcome-to-styles.gif?1
​https://s.w.org/images/block-editor/welcome-to-styles.svg?1