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 c68f6fb3d205a..a0a5201f2d808 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 ( ); }; diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index f6b93d25982c2..a9bff96705041 100644 --- a/packages/edit-site/src/components/global-styles/screen-style-variations.js +++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; */ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useMemo, useContext } from '@wordpress/element'; +import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __experimentalGrid as Grid, @@ -31,6 +31,7 @@ function compareVariations( a, b ) { } function Variation( { variation } ) { + const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { return { @@ -77,8 +78,16 @@ function Variation( { variation } ) { onClick={ selectVariation } onKeyDown={ selectOnEnter } tabIndex="0" + aria-label={ variation?.name } + onFocus={ () => setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } > - +
+ +
); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 6dd79615f673a..ebf09d5a82505 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -73,19 +73,23 @@ .edit-site-global-styles-variations_item { box-sizing: border-box; - padding: $border-width * 2; - border-radius: $radius-block-ui; - border: $gray-200 $border-width solid; - &.is-active { + .edit-site-global-styles-variations_item-preview { + padding: $border-width * 2; + border-radius: $radius-block-ui; + border: $gray-200 $border-width solid; + } + + &.is-active .edit-site-global-styles-variations_item-preview { border: $gray-900 $border-width solid; } - &:hover { + &:hover .edit-site-global-styles-variations_item-preview { border: var(--wp-admin-theme-color) $border-width solid; } - &:focus { + &:focus .edit-site-global-styles-variations_item-preview { border: var(--wp-admin-theme-color) $border-width solid; } } + diff --git a/phpunit/class-gutenberg-rest-global-styles-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-controller-test.php index 4c2ad39d55521..b9d5b3f5558a3 100644 --- a/phpunit/class-gutenberg-rest-global-styles-controller-test.php +++ b/phpunit/class-gutenberg-rest-global-styles-controller-test.php @@ -110,6 +110,7 @@ public function test_get_theme_items() { ), ), ), + 'name' => 'variation', ), ); $this->assertSameSetsWithIndex( $data, $expected );