Making WordPress.org

Opened 3 years ago

Closed 2 years ago

#5741 closed task (blessed) (fixed)

Add Gutenberg welcome guide images to s.w.org

Reported by: noisysocks's profile 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 (24)

welcome-documentation.gif (111.9 KB) - added by noisysocks 3 years ago.
welcome-canvas.gif (79.8 KB) - added by noisysocks 3 years ago.
welcome-editor.gif (32.4 KB) - added by noisysocks 3 years ago.
welcome-library.gif (49.4 KB) - added by noisysocks 3 years ago.
welcome-library.svg (1.8 KB) - added by noisysocks 3 years ago.
welcome-editor.svg (811 bytes) - added by noisysocks 3 years ago.
welcome-documentation.svg (1.7 KB) - added by noisysocks 3 years ago.
welcome-canvas.svg (1.1 KB) - added by noisysocks 3 years ago.
template-editor.gif (247.3 KB) - added by jameskoster 3 years ago.
template-editor.svg (1.8 KB) - added by jameskoster 3 years ago.
template-editor-min.gif (173.7 KB) - added by jameskoster 3 years ago.
An optimised version of template-editor.gif
welcome-reusable.gif (65.6 KB) - added by critterverse 3 years ago.
welcome-reusable.svg (1.2 KB) - added by critterverse 3 years ago.
welcome-reusable-v2.gif (16.5 KB) - added by critterverse 3 years ago.
welcome-reusable-v2.svg (72.4 KB) - added by critterverse 3 years ago.
welcome-reusable-v3.svg (1.2 KB) - added by critterverse 3 years ago.
edit-your-site.gif (142.1 KB) - added by Mamaduka 2 years ago.
personalize-blocks.gif (80.7 KB) - added by Mamaduka 2 years ago.
set-the-design.gif (131.0 KB) - added by Mamaduka 2 years ago.
welcome-to-styles.gif (120.1 KB) - added by Mamaduka 2 years ago.
edit-your-site.svg (5.1 KB) - added by Mamaduka 2 years ago.
personalize-blocks.svg (8.4 KB) - added by Mamaduka 2 years ago.
set-the-design.svg (16.2 KB) - added by Mamaduka 2 years ago.
welcome-to-styles.svg (5.1 KB) - added by Mamaduka 2 years ago.

Download all attachments as: .zip

Change History (38)

#1 @dd32
3 years ago

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

#2 follow-up: @jameskoster
3 years 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
3 years ago

An optimised version of template-editor.gif

#3 in reply to: ↑ 2 @dd32
3 years 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
3 years ago

Perfect, thank you! :)

#5 follow-up: @critterverse
3 years 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
3 years 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
3 years ago

Thanks @dd32!

#8 @critterverse
3 years 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 years 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....
    1823</defs>
    1924</svg>
Version 0, edited 3 years ago by dd32 (next)

#10 @dd32
3 years 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 years 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 years 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

#13 @Mamaduka
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Hi, @dd32

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

Note: See TracTickets for help on using tickets.