Add color and typography presets to Global Styles #56622
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| /** | ||
|
Contributor
Author
There was a problem hiding this comment. This is a duplicate of the preview component |
||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| __unstableIframe as Iframe, | ||
| __unstableEditorStyles as EditorStyles, | ||
| privateApis as blockEditorPrivateApis, | ||
| } from '@wordpress/block-editor'; | ||
| import { | ||
| __unstableMotion as motion, | ||
| __experimentalHStack as HStack, | ||
| } from '@wordpress/components'; | ||
| import { | ||
| useThrottle, | ||
| useReducedMotion, | ||
| useResizeObserver, | ||
| } from '@wordpress/compose'; | ||
| import { useLayoutEffect, useState, useMemo } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { unlock } from '../../lock-unlock'; | ||
| import { useStylesPreviewColors } from './hooks'; | ||
|
|
||
| const { useGlobalStyle, useGlobalStylesOutput } = unlock( | ||
| blockEditorPrivateApis | ||
| ); | ||
|
|
||
| const firstFrame = { | ||
| start: { | ||
| scale: 1, | ||
| opacity: 1, | ||
| }, | ||
| hover: { | ||
| scale: 0, | ||
| opacity: 0, | ||
| }, | ||
| }; | ||
|
|
||
| const normalizedWidth = 248; | ||
| const normalizedHeight = 152; | ||
|
|
||
| const normalizedColorSwatchSize = 66; | ||
|
|
||
| // Throttle options for useThrottle. Must be defined outside of the component, | ||
| // so that the object reference is the same on each render. | ||
| const THROTTLE_OPTIONS = { | ||
| leading: true, | ||
| trailing: true, | ||
| }; | ||
|
|
||
| const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => { | ||
| const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' ); | ||
| const [ gradientValue ] = useGlobalStyle( 'color.gradient' ); | ||
| const [ styles ] = useGlobalStylesOutput(); | ||
| const disableMotion = useReducedMotion(); | ||
| const [ isHovered, setIsHovered ] = useState( false ); | ||
| const [ containerResizeListener, { width } ] = useResizeObserver(); | ||
| const [ throttledWidth, setThrottledWidthState ] = useState( width ); | ||
| const [ ratioState, setRatioState ] = useState(); | ||
|
|
||
| const setThrottledWidth = useThrottle( | ||
| setThrottledWidthState, | ||
| 250, | ||
| THROTTLE_OPTIONS | ||
| ); | ||
|
|
||
| // Must use useLayoutEffect to avoid a flash of the iframe at the wrong | ||
| // size before the width is set. | ||
| useLayoutEffect( () => { | ||
| if ( width ) { | ||
| setThrottledWidth( width ); | ||
| } | ||
| }, [ width, setThrottledWidth ] ); | ||
|
|
||
| // Must use useLayoutEffect to avoid a flash of the iframe at the wrong | ||
| // size before the width is set. | ||
| useLayoutEffect( () => { | ||
| const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1; | ||
| const ratioDiff = newRatio - ( ratioState || 0 ); | ||
|
|
||
| // Only update the ratio state if the difference is big enough | ||
| // or if the ratio state is not yet set. This is to avoid an | ||
| // endless loop of updates at particular viewport heights when the | ||
| // presence of a scrollbar causes the width to change slightly. | ||
| const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1; | ||
|
|
||
| if ( isRatioDiffBigEnough || ! ratioState ) { | ||
| setRatioState( newRatio ); | ||
| } | ||
| }, [ throttledWidth, ratioState ] ); | ||
|
|
||
| // Set a fallbackRatio to use before the throttled ratio has been set. | ||
| const fallbackRatio = width ? width / normalizedWidth : 1; | ||
| /* | ||
| * Use the throttled ratio if it has been calculated, otherwise | ||
| * use the fallback ratio. The throttled ratio is used to avoid | ||
| * an endless loop of updates at particular viewport heights. | ||
| * See: https://github.com/WordPress/gutenberg/issues/55112 | ||
| */ | ||
| const ratio = ratioState ? ratioState : fallbackRatio; | ||
|
|
||
| const { highlightedColors } = useStylesPreviewColors(); | ||
|
Member
There was a problem hiding this comment. While testing I noticed an issue with some themes that had only 2 palette colors, e.g., Freddie. If those colors match heading or background colors, they're being filtered out: gutenberg/packages/edit-site/src/components/global-styles/hooks.js Lines 68 to 71 in f7b735e The result is that, although there's a variation, the colors are empty: 
CanvasLoader already gets around it this way: gutenberg/packages/edit-site/src/components/canvas-loader/index.js Lines 19 to 23 in f7b735e Not sure what's appropriate in Maybe something like: const { paletteColors, highlightedColors } = useStylesPreviewColors();
const previewColors = highlightedColors.length
? highlightedColors
: paletteColors.slice( 0, 2 );
Member
There was a problem hiding this comment. Update: this is already an "feature" of trunk, in that style variation previews won't show them either. I think it just looks strange in the preset previews. Maybe good for an immediate follow up. To replicate the above issue, here's a style variation example. The palette colors are the same as the background and text colors so the variation will show nothing. {
"version": 2,
"settings": {
"color": {
"palette": [
{
"color": "#000000",
"name": "Base",
"slug": "base"
},
{
"color": "#ffffff",
"name": "Contrast",
"slug": "contrast"
}
]
}
},
"styles": {
"color": {
"text": "#000000",
"background": "var(--wp--preset--color--contrast)"
}
}
}
|
||
|
|
||
| /* | ||
| * Reset leaked styles from WP common.css and remove main content layout padding and border. | ||
| * Add pointer cursor to the body to indicate the iframe is interactive, | ||
| * similar to Typography variation previews. | ||
| */ | ||
| const editorStyles = useMemo( () => { | ||
| if ( styles ) { | ||
| return [ | ||
| ...styles, | ||
| { | ||
| css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}', | ||
| isGlobalStyles: true, | ||
| }, | ||
| ]; | ||
| } | ||
|
|
||
| return styles; | ||
| }, [ styles ] ); | ||
| const isReady = !! width; | ||
|
|
||
| return ( | ||
| <> | ||
| <div style={ { position: 'relative' } }> | ||
| { containerResizeListener } | ||
| </div> | ||
| { isReady && ( | ||
| <Iframe | ||
| className="edit-site-global-styles-preview__iframe" | ||
| style={ { | ||
| width: '100%', | ||
| height: normalizedHeight * ratio, | ||
| } } | ||
| onMouseEnter={ () => setIsHovered( true ) } | ||
| onMouseLeave={ () => setIsHovered( false ) } | ||
| tabIndex={ -1 } | ||
| > | ||
| <EditorStyles styles={ editorStyles } /> | ||
| <motion.div | ||
| style={ { | ||
|
Member
There was a problem hiding this comment. Is this animation block necessary any more for these specific previews? 2024-02-26.12.42.40.mp4If not, wondering if we can remove it entirely. I was going to, but just wanted to make sure it's doing something that's not obvious.
Member
There was a problem hiding this comment. Sorry, didn't see the transition as the panel opens, as with Typography https://github.com/WordPress/gutenberg/pull/56622/files#r1503522214 A lot of code though for how much value? |
||
| height: normalizedHeight * ratio, | ||
| width: '100%', | ||
| background: gradientValue ?? backgroundColor, | ||
| cursor: withHoverView ? 'pointer' : undefined, | ||
| } } | ||
| initial="start" | ||
| animate={ | ||
| ( isHovered || isFocused ) && | ||
|
Member
There was a problem hiding this comment. If we don't require motion, then I think the |
||
| ! disableMotion && | ||
| label | ||
| ? 'hover' | ||
| : 'start' | ||
| } | ||
| > | ||
| <motion.div | ||
| variants={ firstFrame } | ||
| style={ { | ||
| height: '100%', | ||
| overflow: 'hidden', | ||
| } } | ||
| > | ||
| <HStack | ||
| spacing={ 10 * ratio } | ||
| justify="center" | ||
| style={ { | ||
| height: '100%', | ||
| overflow: 'hidden', | ||
| } } | ||
| > | ||
| { highlightedColors.map( | ||
| ( { slug, color }, index ) => ( | ||
| <motion.div | ||
| key={ slug } | ||
| style={ { | ||
| boxShadow: | ||
| 'inset 0 0 0 1px #0003', | ||
|
Member
There was a problem hiding this comment. I added this to ensure the colors have a border like the ColorIndicator component. In some themes, the background color matches the highlights, or are close in contrast: Before
After
Member
There was a problem hiding this comment.
I don't think this is necessary, as I want to update these colors to be more representative of the style by using the text and button colors for the indicators. I will open another issue on that (to do as a follow-up). |
||
| height: | ||
| normalizedColorSwatchSize * | ||
| ratio, | ||
| width: | ||
| normalizedColorSwatchSize * | ||
| ratio, | ||
| background: color, | ||
| borderRadius: | ||
| ( normalizedColorSwatchSize * | ||
| ratio ) / | ||
| 2, | ||
| } } | ||
| animate={ { | ||
| scale: 1, | ||
| opacity: 1, | ||
| } } | ||
| initial={ { | ||
| scale: 0.1, | ||
| opacity: 0, | ||
| } } | ||
| transition={ { | ||
| delay: index === 1 ? 0.2 : 0.1, | ||
| } } | ||
| /> | ||
| ) | ||
| ) } | ||
| </HStack> | ||
| </motion.div> | ||
| </motion.div> | ||
| </Iframe> | ||
| ) } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default StylesPreviewColors; | ||
Uh oh!
There was an error while loading. Please reload this page.