WordPress.org

Making WordPress.org

Opened 5 months ago

Closed 3 months ago

Last modified 3 months ago

#5741 closed task (fixed)

Add Gutenberg welcome guide images to s.w.org

Reported by: noisysocks Owned by:
Milestone: Priority: normal
Component: WordPress.org Site Keywords:
Cc:

Description

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?

Attachments (16)

welcome-documentation.gif (111.9 KB) - added by noisysocks 5 months ago.
welcome-canvas.gif (79.8 KB) - added by noisysocks 5 months ago.
welcome-editor.gif (32.4 KB) - added by noisysocks 5 months ago.
welcome-library.gif (49.4 KB) - added by noisysocks 5 months ago.
welcome-library.svg (1.8 KB) - added by noisysocks 5 months ago.
welcome-editor.svg (811 bytes) - added by noisysocks 5 months ago.
welcome-documentation.svg (1.7 KB) - added by noisysocks 5 months ago.
welcome-canvas.svg (1.1 KB) - added by noisysocks 5 months ago.
template-editor.gif (247.3 KB) - added by jameskoster 5 months ago.
template-editor.svg (1.8 KB) - added by jameskoster 5 months ago.
template-editor-min.gif (173.7 KB) - added by jameskoster 5 months ago.
An optimised version of template-editor.gif
welcome-reusable.gif (65.6 KB) - added by critterverse 4 months ago.
welcome-reusable.svg (1.2 KB) - added by critterverse 4 months ago.
welcome-reusable-v2.gif (16.5 KB) - added by critterverse 3 months ago.
welcome-reusable-v2.svg (72.4 KB) - added by critterverse 3 months ago.
welcome-reusable-v3.svg (1.2 KB) - added by critterverse 3 months ago.

Download all attachments as: .zip

Change History (28)

#1 @dd32
5 months ago

  • Resolution set to fixed
  • Status changed from new to closed

#2 follow-up: @jameskoster
5 months ago

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
5 months ago

An optimised version of template-editor.gif

#3 in reply to: ↑ 2 @dd32
5 months ago

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.

#4 @jameskoster
5 months ago

Perfect, thank you! :)

#5 follow-up: @critterverse
4 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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!

#6 in reply to: ↑ 5 @dd32
4 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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

#7 @critterverse
4 months ago

Thanks @dd32!

#8 @critterverse
3 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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)

#9 @dd32
3 months ago

@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">
     1<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">
    22<g clip-path="url(#clip0)">
    33<rect width="312" height="240" fill="#00A0D2"/>
    44<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"/>
    55<rect x="111" y="62" width="91" height="62" fill="#DDDDDD"/>
    6 <path d="M162.435 87.0001L153.534 98.9704L148.373 95.1329" stroke="#1E1E1E" stroke-width="1.5"/>
     6<path d="M162.435 86.0001L153.534 97.9704L148.373 94.1329" stroke="#1E1E1E" stroke-width="1.5"/>
    77<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"/>
    88<rect x="-16" y="116" width="91" height="62" fill="#DDDDDD"/>
    99<path d="M35.4348 141L26.5342 152.97L21.3731 149.133" stroke="#1E1E1E" stroke-width="1.5"/>
    1010<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"/>
    1111<rect x="238" y="89" width="91" height="62" fill="#DDDDDD"/>
    1212<path d="M289.435 114L280.534 125.97L275.373 122.133" stroke="#1E1E1E" stroke-width="1.5"/>
     13<rect width="312" height="240" fill="url(#pattern0)" fill-opacity="0.5"/>
    1314</g>
    1415<defs>
     16<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
     17<use xlink:href="#image0" transform="scale(0.00160256 0.00208333)"/>
     18</pattern>
    1519<clipPath id="clip0">
    1620<rect width="312" height="240" fill="white"/>
    1721</clipPath>
     22<image id="image0" width="624" height="480" xlink:href="data:image/jpeg;base64,/9j/4QyZRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAEaAA.... [trimmed for readability] ...."/>
    1823</defs>
    1924</svg>
Last edited 3 months ago by dd32 (previous) (diff)

#10 @dd32
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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

#11 follow-up: @critterverse
3 months ago

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!

#12 in reply to: ↑ 11 @dd32
3 months ago

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

Note: See TracTickets for help on using tickets.