diff --git a/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php b/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php index 9c8b03ec92b73..d9cbe0527c3b5 100644 --- a/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php +++ b/lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php @@ -231,7 +231,11 @@ public function get_theme_items( $request ) { foreach ( $nested_html_files as $path => $file ) { $decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) ); if ( is_array( $decoded_file ) ) { - $variations[] = ( new WP_Theme_JSON_Gutenberg( $decoded_file ) )->get_raw_data(); + $variation = ( new WP_Theme_JSON_Gutenberg( $decoded_file ) )->get_raw_data(); + if ( empty( $variation['name'] ) ) { + $variation['name'] = basename( $path, '.json' ); + } + $variations[] = $variation; } } } diff --git a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php index 567dfb0cf4027..75d9006b3e3c6 100644 --- a/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php +++ b/lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php @@ -28,6 +28,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 { 'styles', 'templateParts', 'version', + 'name', ); /** diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 735fdeb78d3a9..8f383655a7907 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -5,65 +5,214 @@ import { __unstableIframe as Iframe, __unstableEditorStyles as EditorStyles, } from '@wordpress/block-editor'; +import { + __unstableMotion as motion, + __experimentalHStack as HStack, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; +import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import { useStyle } from './hooks'; +import { useSetting, useStyle } from './hooks'; import { useGlobalStylesOutput } from './use-global-styles-output'; -const StylesPreview = ( { height = 150 } ) => { +const firstFrame = { + start: { + opacity: 1, + display: 'block', + }, + hover: { + opacity: 0, + display: 'none', + }, +}; + +const secondFrame = { + hover: { + opacity: 1, + display: 'block', + }, + start: { + opacity: 0, + display: 'none', + }, +}; + +const normalizedWidth = 250; + +const StylesPreview = ( { label, isFocused } ) => { + const [ fontWeight ] = useStyle( 'typography.fontWeight' ); const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' ); + const [ headingFontFamily = fontFamily ] = useStyle( + 'elements.h1.typography.fontFamily' + ); + const [ headingFontWeight = fontWeight ] = useStyle( + 'elements.h1.typography.fontWeight' + ); const [ textColor = 'black' ] = useStyle( 'color.text' ); + const [ headingColor = textColor ] = useStyle( 'elements.h1.color.text' ); const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' ); const [ backgroundColor = 'white' ] = useStyle( 'color.background' ); const [ gradientValue ] = useStyle( 'color.gradient' ); const [ styles ] = useGlobalStylesOutput(); + const disableMotion = useReducedMotion(); + const [ coreColors ] = useSetting( 'color.palette.core' ); + const [ themeColors ] = useSetting( 'color.palette.theme' ); + const [ customColors ] = useSetting( 'color.palette.custom' ); + const [ isHovered, setIsHovered ] = useState( false ); + const [ containerResizeListener, { width } ] = useResizeObserver(); + const ratio = width ? width / normalizedWidth : 1; + + const paletteColors = ( themeColors ?? [] ) + .concat( customColors ?? [] ) + .concat( coreColors ?? [] ); + const highlightedColors = paletteColors + .filter( + // we exclude these two colors because they are already visible in the preview. + ( { color } ) => color !== backgroundColor && color !== headingColor + ) + .slice( 0, 2 ); return ( } - style={ { height } } + style={ { + height: 150 * ratio, + visibility: ! width ? 'hidden' : 'visible', + } } + onMouseEnter={ () => setIsHovered( true ) } + onMouseLeave={ () => setIsHovered( false ) } + tabIndex={ -1 } > -