Wp-calypso: Migrate Images to Webpack

[porada]

After updating SVG illustration files to the new color palette (#36097), we discovered that Calypso didn’t serve all images in their most recent version. Migrating them over to Webpack would solve that.

@Aurorum suggested we handle this on a per-directory basis and has already started carrying this out with #36791 and #36823.

[Aurorum]

These are the files which contain images that need migrating to Webpack. I should note though that whilst currently, only the images touched in #36510 need migrating, it's probably better to migrate the entire folder in case those files are ever touched in the future, especially if it's simple to do.

The other problem is that whilst the file may only be used once, it could be used in several places, so it's worth confirming that all uses have been updated too.

• [ ] static/images/checkbox-icons
• [ ] static/images/comments
• [x] static/images/customer-home [#38572]
• [ ] static/images/drake
• [x] static/images/earn [#36863]
• [ ] static/images/extensions/woocommerce
• [ ] static/images/g-suite
• [ ] static/images/google-my-business
• [ ] static/images/illustrations (has 88 images, so I wouldn't be surprised if this is split up into multiple PRs)
• [ ] static/images/jetpack
• [x] static/images/login [#36823]
• [ ] static/images/marketing
• [x] static/images/media [#36903]
• [ ] static/images/pages
• [ ] static/images/people
• [ ] static/images/plugins
• [ ] static/images/posts
• [x] static/images/private [#37468]
• [x] static/images/reader [#36791]
• [x] static/images/seo [#37654]
• [ ] static/images/signup
• [ ] static/images/stats
• [ ] static/images/themes-banner
• [ ] static/images/tinymce-icons
• [x] static/images/upgrades (part 1) [#36893]
• [ ] static/images/upgrades (part 2)
• [x] static/images/upwork [illustration in #38948]
• [ ] static/images/wordpress

Files in the /illustrations folder:

• [x] adWords.svg [#42876]
• [x] advertisingRemoved.svg [#45269]
• [x] al-syncing-site.svg [#42874]
• [ ] almost-there.svg
• [x] anti-spam.svg [#45269]
• [x] app-banner-editor.svg [#37651]
• [x] app-banner-notifications.svg [#37651]
• [x] app-banner-reader.svg [#37651]
• [x] app-banner-stats.svg [#37651]
• [ ] backup.svg
• [x] branding.svg [#45269]
• [x] business-address.svg [#45269]
• [ ] business.svg
• [x] checkEmailsDesktop.svg [#45269]
• [x] checkEmailsPhone.svg [#45269]
• [ ] clone-site-origin.svg
• [x] cloudBased.svg [#40032]
• [x] contact-us.svg [#45269]
• [ ] customizeTheme-onDark.svg
• [ ] customizeTheme.svg
• [x] email.svg [#45269]
• [ ] error.svg
• [x] expert.svg [#45269]
• [x] fireworks.svg [#38356]
• [x] gauge.svg [#45269]
• [x] get-apps-banner.svg [#37649]
• [x] google-adwords-stats.svg [#45269]
• [ ] gutenberg-mini.svg
• [ ] gutenberg.svg
• [x] happiness-support.svg [#38919]
• [x] homepage-news.svg [#45269]
• [x] homepage-static.svg [#45269]
• [ ] illustration-404.svg
• [ ] illustration-empty-results.svg
• [ ] illustration-jetpack.svg
• [ ] illustration-layout.svg
• [x] illustration-nomemberships.svg [#38025]
• [ ] illustration-nosites.svg
• [ ] illustration-ok.svg
• [ ] illustration-shopping-bags.svg
• [ ] illustration-start.svg
• [ ] illustration-write.svg
• [ ] install-button.svg
• [x] jetpack-business-address.svg [#45269]
• [ ] jetpack-connection-migration.svg
• [ ] jetpack-connection.svg
• [x] jetpack-header.svg [#45269]
• [x] jetpack-security.svg [#45269]
• [x] jetpack-spam.svg [#45269]
• [x] jetpack-start.svg [#45269]
• [x] jetpack-stats.svg [#45269]
• [x] migrating-host-assisted.svg [#45269]
• [ ] no-themes-drake.svg
• [ ] plan-business-circle.svg
• [ ] plan-business.svg
• [ ] plan-free-circle.svg
• [ ] plan-free.svg
• [ ] plan-personal-circle.svg
• [ ] plan-personal.svg
• [ ] plan-premium-circle.svg
• [ ] plan-premium.svg
• [x] plugins-big.svg [#45269]
• [x] plugins-small.svg [#45269]
• [x] rebrand-cities-welcome.svg [#38274]
• [ ] security-issue.svg
• [ ] security.svg
• [x] site-title.svg [#45269]
• [x] speed.svg [#45269]
• [ ] stats.svg
• [x] support.svg [#38919]
• [ ] thankYou.svg
• [ ] type-blog.svg
• [ ] type-business.svg
• [ ] type-e-commerce.svg
• [ ] type-personal.svg
• [ ] type-portfolio.svg
• [ ] type-website.svg
• [x] upsell-enable.svg [#45269]
• [x] upsell-payments.svg [#45269]
• [ ] upsell-show-ads.svg
• [x] video-hosting-13G.svg
• [x] video-hosting-unlimited.svg [#45269]
• [x] videoAudioPosts.svg [#45269]
• [x] waitTime.svg [#45269]
• [x] whoops.svg [#38816]
• [ ] wordAds.svg

This is necessary to ensure that all the files have the new, updated colours when viewed on WordPress.com. Even though the PR updating the colours has been merged, many of them still display the very old colours (before even that PR!)

#
Simple example of the migration: #36823

A successful migration should have a long image URL, like this.

For reference, here's the discussion regarding this approach: #34781

[porada]

@sirreal, I recall you expressing approval for this direction, so I’m putting this thread on your radar. ✌️

[sirreal]

👍 I'd say migrating our images to the webpack file-loader setup is worthwhile. I approve of the direction 🙂

@Automattic/team-calypso may also be interested in this effort.

[porada]

Heads up: I’m already handling static/images/upgrades.

[Aurorum]

I added a list of the illustrations in static/images/illustrations, since there's a lot of them and will inevitably require many separate PRs. Started to migrate them with "Get Apps" in Me and the App Banner. :)

[simison]

@Automattic/team-calypso could this be done in one big swoop using a codemod?

[tyxla]

It totally can, but IMHO this is something that is preferable to be tested on a case-by-case basis just to make sure we're not introducing regressions.

[Aurorum]

There's quite a few images that aren't used in the list above. Are they worth moving to the new folder in case they're used in the future, or should they be deleted instead?

[porada]

I’d go ahead and remove them.

[Aurorum]

I'm starting to go through the /illustrations folder again, and there are definitely a lot of illustrations that can be removed!

@porada Would it be preferred to remove each one in a separate PR? I think that makes it a lot easier to review because a quick search can be performed to verify each is unused. :)

[bluefuton]

I'm starting to go through the /illustrations folder again, and there are definitely a lot of illustrations that can be removed!

Hi @Aurorum! Thanks for tackling these. I'm actually happier if we do all of the remaining unused illustrations in one big PR. It'd take longer to review, but would be speedier for us to ship 🚢

[Aurorum]

PR in #45269 to remove the unused illustrations in static/images/illustrations/ :)