From 65048b1cf84a91f612d29d67136963d8776e7b43 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 9 Mar 2022 17:46:48 +0100 Subject: [PATCH 1/9] Add labels to the global styles variations --- ...ss-gutenberg-rest-global-styles-controller.php | 6 +++++- .../class-wp-theme-json-gutenberg.php | 1 + .../global-styles/screen-style-variations.js | 9 ++++++++- .../src/components/global-styles/style.scss | 15 +++++++++------ 4 files changed, 23 insertions(+), 8 deletions(-) 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 9c8b03ec92b73f..2750ea8af48059 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 ( ! isset( $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 c68f6fb3d205a7..a0a5201f2d808d 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/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index f6b93d25982c29..fbec0febed02e6 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 @@ -13,6 +13,8 @@ import { useMemo, useContext } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __experimentalGrid as Grid, + __experimentalVStack as VStack, + __experimentalHStack as HStack, Card, CardBody, } from '@wordpress/components'; @@ -78,7 +80,12 @@ function Variation( { variation } ) { onKeyDown={ selectOnEnter } tabIndex="0" > - + +
+ +
+ { variation?.name } + ); diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 6dd79615f673af..6266031b7f50da 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -73,19 +73,22 @@ .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; } } From d4b8c251733f4c874947b597e4db0b1d86b5eb5e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 15 Mar 2022 10:15:29 +0100 Subject: [PATCH 2/9] Animate the global style previews --- ...utenberg-rest-global-styles-controller.php | 2 +- .../src/components/global-styles/preview.js | 123 ++++++++++++++---- .../global-styles/screen-style-variations.js | 2 +- 3 files changed, 98 insertions(+), 29 deletions(-) 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 2750ea8af48059..d9cbe0527c3b5d 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 @@ -232,7 +232,7 @@ public function get_theme_items( $request ) { $decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) ); if ( is_array( $decoded_file ) ) { $variation = ( new WP_Theme_JSON_Gutenberg( $decoded_file ) )->get_raw_data(); - if ( ! isset( $variation['name'] ) ) { + if ( empty( $variation['name'] ) ) { $variation['name'] = basename( $path, '.json' ); } $variations[] = $variation; diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 735fdeb78d3a9a..070fa74671f92d 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -5,13 +5,44 @@ 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 } 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 defaultColorVariants = { + start: { + opacity: 1, + display: 'block', + }, + hover: { + opacity: 0, + display: 'none', + }, +}; + +const paletteMotionVariants = { + start: { + y: '100%', + opacity: 0, + display: 'none', + }, + hover: { + y: 0, + opacity: 1, + display: 'block', + }, +}; + const StylesPreview = ( { height = 150 } ) => { const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' ); const [ textColor = 'black' ] = useStyle( 'color.text' ); @@ -19,51 +50,89 @@ const StylesPreview = ( { height = 150 } ) => { const [ backgroundColor = 'white' ] = useStyle( 'color.background' ); const [ gradientValue ] = useStyle( 'color.gradient' ); const [ styles ] = useGlobalStylesOutput(); + const disableMotion = useReducedMotion(); + const [ isHovered, setIsHovered ] = useState( false ); + const [ themeColors ] = useSetting( 'color.palette.theme' ); + const [ customColors ] = useSetting( 'color.palette.custom' ); 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 fbec0febed02e6..2568f7e06132d0 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 @@ -82,7 +82,7 @@ function Variation( { variation } ) { >
- +
{ variation?.name } From 8ce98593e20a9afbb4bcbf51a6efa798e6fcc122 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 15 Mar 2022 10:21:49 +0100 Subject: [PATCH 3/9] Break long labels --- .../components/global-styles/screen-style-variations.js | 7 ++++++- packages/edit-site/src/components/global-styles/style.scss | 4 ++++ 2 files changed, 10 insertions(+), 1 deletion(-) 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 2568f7e06132d0..f4b9bd51fe9a57 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 @@ -84,7 +84,12 @@ function Variation( { variation } ) {
- { variation?.name } + + { variation?.name } + diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss index 6266031b7f50da..1623651e5a97a1 100644 --- a/packages/edit-site/src/components/global-styles/style.scss +++ b/packages/edit-site/src/components/global-styles/style.scss @@ -92,3 +92,7 @@ border: var(--wp-admin-theme-color) $border-width solid; } } + +.edit-site-global-styles-variations_item-label { + word-break: break-all; +} From 51a161098a77ba5d3c9318102f10e3fcdef73d2d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 18 Mar 2022 14:18:17 +0100 Subject: [PATCH 4/9] Improve animation --- .../src/components/global-styles/preview.js | 54 +++++++++++-------- .../global-styles/screen-style-variations.js | 2 +- 2 files changed, 33 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 070fa74671f92d..b141b087958ca4 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -10,7 +10,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, } from '@wordpress/components'; -import { useReducedMotion } from '@wordpress/compose'; +import { useReducedMotion, useResizeObserver } from '@wordpress/compose'; import { useState } from '@wordpress/element'; /** @@ -43,7 +43,9 @@ const paletteMotionVariants = { }, }; -const StylesPreview = ( { height = 150 } ) => { +const normalizedWidth = 250; + +const StylesPreview = () => { const [ fontFamily = 'serif' ] = useStyle( 'typography.fontFamily' ); const [ textColor = 'black' ] = useStyle( 'color.text' ); const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' ); @@ -54,15 +56,20 @@ const StylesPreview = ( { height = 150 } ) => { const [ isHovered, setIsHovered ] = useState( false ); const [ themeColors ] = useSetting( 'color.palette.theme' ); const [ customColors ] = useSetting( 'color.palette.custom' ); - + const [ containerResizeListener, { width } ] = useResizeObserver(); + const ratio = width ? width / normalizedWidth : 1; return ( ); From 0d1fbe328e23b3e0bef42e0f29fb23afc4c28cc1 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Mar 2022 10:51:53 +0100 Subject: [PATCH 8/9] fix php unit test --- phpunit/class-gutenberg-rest-global-styles-controller-test.php | 1 + 1 file changed, 1 insertion(+) diff --git a/phpunit/class-gutenberg-rest-global-styles-controller-test.php b/phpunit/class-gutenberg-rest-global-styles-controller-test.php index 4c2ad39d555214..b9d5b3f5558a36 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 ); From 78089c8ab98c96ef41c512cfc9034a9e2b50baba Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Mar 2022 14:16:02 +0100 Subject: [PATCH 9/9] Fix focus, add weight and remove text color --- .../src/components/global-styles/preview.js | 26 ++++++++++++++----- .../global-styles/screen-style-variations.js | 10 +++++-- 2 files changed, 28 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 9ea5eb53f12559..8f383655a7907c 100644 --- a/packages/edit-site/src/components/global-styles/preview.js +++ b/packages/edit-site/src/components/global-styles/preview.js @@ -43,11 +43,15 @@ const secondFrame = { const normalizedWidth = 250; -const StylesPreview = ( { label } ) => { +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' ); @@ -55,10 +59,10 @@ const StylesPreview = ( { label } ) => { const [ gradientValue ] = useStyle( 'color.gradient' ); const [ styles ] = useGlobalStylesOutput(); const disableMotion = useReducedMotion(); - const [ isHovered, setIsHovered ] = useState( false ); 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; @@ -66,7 +70,10 @@ const StylesPreview = ( { label } ) => { .concat( customColors ?? [] ) .concat( coreColors ?? [] ); const highlightedColors = paletteColors - .filter( ( { color } ) => color !== backgroundColor ) + .filter( + // we exclude these two colors because they are already visible in the preview. + ( { color } ) => color !== backgroundColor && color !== headingColor + ) .slice( 0, 2 ); return ( @@ -79,6 +86,7 @@ const StylesPreview = ( { label } ) => { } } onMouseEnter={ () => setIsHovered( true ) } onMouseLeave={ () => setIsHovered( false ) } + tabIndex={ -1 } > { containerResizeListener } { cursor: 'pointer', } } initial="start" - animate={ isHovered && ! disableMotion ? 'hover' : 'start' } + animate={ + ( isHovered || isFocused ) && ! disableMotion + ? 'hover' + : 'start' + } > { fontFamily: headingFontFamily, fontSize: 65 * ratio, color: headingColor, + fontWeight: headingFontWeight, } } > Aa - { highlightedColors.map( ( { color } ) => ( + { highlightedColors.map( ( { slug, color } ) => (
{ fontSize: 35 * ratio, fontFamily: headingFontFamily, color: headingColor, + fontWeight: headingFontWeight, lineHeight: '1em', } } > 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 a86e9aa7222ffb..a9bff967050413 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 { @@ -78,9 +79,14 @@ function Variation( { variation } ) { onKeyDown={ selectOnEnter } tabIndex="0" aria-label={ variation?.name } + onFocus={ () => setIsFocused( true ) } + onBlur={ () => setIsFocused( false ) } >
- +