Gutenboarding: Drop FSE reuse/use MediaCard #38456
Conversation
sirreal
added
[Status] Needs Review
sirreal
changed the title
| @@ -105,7 +105,7 @@ export function Gutenboard() { | |||
| value={ [ onboardingBlock.current ] } | |||
| settings={ { templateLock: 'all' } } | |||
| > | |||
| <div className="edit-post-layout__content"> | |||
| <div className="gutenboard__edit-post-layout-content edit-post-layout__content "> | |||
There was a problem hiding this comment.
I'd like to do a scrub of these some time soon, to make things more edit-post agnostic.
There was a problem hiding this comment.
I think edit-post-layout__content has been removed from Gutenberg as well. (in WordPress/gutenberg#18044). We had to update our styles in #37863
client/landing/gutenboarding/onboarding-block/design-selector/index.tsx
Outdated
Show resolved
Hide resolved
| onClick={ () => setSelectedDesign( t.slug ) } | ||
| > | ||
| <CardMedia> | ||
| <img alt={ t.title } src={ t.preview } /> |
There was a problem hiding this comment.
I think we might add a srcset in a follow-up. Maybe I'll turn this stuff into a util function that returns everything needed for a srcset.
There was a problem hiding this comment.
There's also some prior art for constructing photon-style srcsets in Jetpack Tiled Gallery block:
There was a problem hiding this comment.
Thanks! I think we're dealing with a tighter set of constraints here (already-photonized WP.com images), so I was hoping to get away with a rather simple implementation...
| @include breakpoint( '>660px' ) { | ||
| // stylelint-disable unit-whitelist | ||
| grid-template-columns: repeat( 2, 1fr ); | ||
| // stylelint-enable unit-whitelist |
There was a problem hiding this comment.
We should probably change the linter config to allow this unit /cc @simison
| &.is-selected { | ||
| transform: scale( 1.1 ); | ||
| } | ||
| } |
There was a problem hiding this comment.
Thanks Jon, awesome job! (I should've listened to you earlier, this is so much more straightforward than messing around with TemplateSelectorControl)
LGTM! 🚢
(I'll update #38403 to only take care of higher-res screenshots/srcset, and the added headings.)
Nah I'll probably just base it on this PR. |
sirreal
added
[Status] Ready to Merge
and removed
[Status] Needs Review
|
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: App Entrypoints (~9103 bytes added 📈 [gzipped]) Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used. 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. Generated by performance advisor bot at iscalypsofastyet.com. |
Changes proposed in this Pull Request
Cardfrom@wordpress/components(mostly simple copy)position: fixedfrom Gutenberg styles breaks the block editor's overflow (no scrolling)MediaCardcomponent.Closes #38403 (supersedes)
Demo
Testing instructions
/gutenboardingon (calypso.live or dev branch)