Style selection: Update style variation UI

[taipeicoder]

Proposed Changes

This PR updates the style preview UI in the design preview component. Previously, we couldn't update the style preview UI without updating the package @wordpress/edit-site, which is a complicated ordeal (see p1666235331775949-slack-C03DY3RJ5 and pbxlJb-2gk-p2#comment-1952). Also, see the abandoned PR that attempts to do so: #69272.

As an alternative solution, instead of updating @wordpress/edit-site, we make a local copy of the component <StylesPreview /> instead of directly importing it from @wordpress/edit-site. The downside of this approach is that we no longer benefit from the abstraction provided by the package, by the upside is that we can now update the style preview UI without needing to bump @wordpress/edit-site and its dependencies across Calypso. This approach can also potentially prevent us from having to update @wordpress/edit-site each time the style preview UI changes.

Testing Instructions

• Head to the design picker setup/designSetup?siteSlug=${site_slug}
• Open any design with style variation.
• Ensure that the style preview UI is updated to match the one in the site editor (wordpress.com/site-editor/${site_slug})

Pre-merge Checklist

• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-47039

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-47039&env=jetpack

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Async-loaded Components (~348 bytes added 📈 [gzipped])

Details

name                                  parsed_size           gzip_size
async-load-automattic-design-preview      +1469 B  (+0.2%)     +348 B  (+0.1%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[arthur791004]

the upside is that we can now update the style preview UI without needing to bump @wordpress/edit-site and its dependencies across Calypso.

I think it's still case by case. If issues are introduced from any of useSetting, useStyle, or useGlobalStylesOutput, we still need to bump @wordpress/edit-site 😅

As a result, I'd prefer to use the same workaround of #69318 again when we encounter a similar issue next time. What do you think?

[taipeicoder]

the upside is that we can now update the style preview UI without needing to bump @wordpress/edit-site and its dependencies across Calypso.

I think it's still case by case. If issues are introduced from any of useSetting, useStyle, or useGlobalStylesOutput, we still need to bump @wordpress/edit-site 😅

As a result, I'd prefer to use the same workaround of #69318 again when we encounter a similar issue next time. What do you think?

Agreed! Which is why I wrote - "This approach can also potentially prevent us from having to update @wordpress/edit-site each time the style preview UI changes." It's definitely not a cure-all solution, but it gives us more leeway.

This approach mainly addresses these feedbacks pdtkmj-Ad-p2#comment-1007 and p1666215740390499-slack-CRWCHQGUB which updates the style preview hover presentation.

Before	After

Unfortunately, we couldn't achieve this UI update with #69318 🥲

[arthur791004]

This approach mainly addresses these feedbacks pdtkmj-Ad-p2#comment-1007 and p1666215740390499-slack-CRWCHQGUB which updates the style preview hover presentation.

Oh yes, that's a fair point 🙃 Let's go with this way first and see whether there is a better solution later. For example, make global-styles an independent package like @wordpress/global-styles or fork a sub-package in the mono-repo to wp-calypso

[arthur791004]

Work nicely 👍

Minor feedback is to make a new package for it and we could keep @automattic/design-preview simpler. But it's optional 🙂

[fushar]

Works nicely 😄

As now we have a local copy of the component, we might be able the fix bug in this local copy as described here: pbxlJb-2ow-p2 (in the future).

[taipeicoder]

Works nicely 😄

As now we have a local copy of the component, we might be able the fix bug in this local copy as described here: pbxlJb-2ow-p2 (in the future).

That's a good point! I'm up for looking into that, and make it a new package as @arthur791004 suggested, if bandwidth allows 🙂