Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add labels to the global styles variations #39322

Merged
merged 9 commits into from
Mar 24, 2022
Merged

Add labels to the global styles variations #39322

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
65048b1
Add labels to the global styles variations
youknowriad Mar 9, 2022
d4b8c25
Animate the global style previews
youknowriad Mar 15, 2022
8ce9859
Break long labels
youknowriad Mar 15, 2022
51a1610
Improve animation
youknowriad Mar 18, 2022
cce43e0
Move the label to the preview
youknowriad Mar 18, 2022
0e27a62
Improve initial state
youknowriad Mar 18, 2022
7ed6641
Improve the style variations preview
youknowriad Mar 23, 2022
0d1fbe3
fix php unit test
youknowriad Mar 23, 2022
78089c8
Fix focus, add weight and remove text color
youknowriad Mar 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion lib/compat/wordpress-6.0/class-gutenberg-rest-global-styles-controller.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure the name of the file is quite right for using in this case. Maybe mark it as "No name provided"? That would make more sense to me than hearing the name of the file.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The filename in empty theme example is not very representative IMO and I feel like most file names will be in this case personally.

}
$variations[] = $variation;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {
'styles',
'templateParts',
'version',
'name',
);

/**
Expand Down
205 changes: 177 additions & 28 deletions packages/edit-site/src/components/global-styles/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<Iframe
className="edit-site-global-styles-preview__iframe"
head={ <EditorStyles styles={ styles } /> }
style={ { height } }
style={ {
height: 150 * ratio,
visibility: ! width ? 'hidden' : 'visible',
} }
onMouseEnter={ () => setIsHovered( true ) }
onMouseLeave={ () => setIsHovered( false ) }
tabIndex={ -1 }
>
<div
{ containerResizeListener }
<motion.div
style={ {
display: 'flex',
gap: 20,
alignItems: 'center',
justifyContent: 'center',
height: '100%',
transform: `scale(${ height / 150 })`,
width: '100%',
background: gradientValue ?? backgroundColor,
cursor: 'pointer',
} }
initial="start"
animate={
( isHovered || isFocused ) && ! disableMotion
? 'hover'
: 'start'
}
>
<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>
<div
<motion.div
variants={ firstFrame }
style={ {
display: 'flex',
gap: 20,
flexDirection: 'column',
height: '100%',
overflow: 'hidden',
} }
>
<div
<HStack
spacing={ 10 * ratio }
justify="center"
style={ {
height: 40,
width: 40,
background: textColor,
borderRadius: 20,
height: '100%',
overflow: 'hidden',
} }
/>{ ' ' }
<div
>
<div
style={ {
fontFamily: headingFontFamily,
fontSize: 65 * ratio,
color: headingColor,
fontWeight: headingFontWeight,
} }
>
Aa
</div>
<VStack spacing={ 2 * ratio }>
{ highlightedColors.map( ( { slug, color } ) => (
<div
key={ slug }
style={ {
height: 30 * ratio,
width: 30 * ratio,
background: color,
borderRadius: 15 * ratio,
} }
/>
) ) }
</VStack>
</HStack>
</motion.div>
<motion.div
variants={ secondFrame }
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<VStack
spacing={ 3 * ratio }
justify="center"
style={ {
height: 40,
width: 40,
background: linkColor,
borderRadius: 20,
height: '100%',
overflow: 'hidden',
padding: 10 * ratio,
boxSizing: 'border-box',
} }
/>
</div>
</div>
>
{ label && (
<div
style={ {
fontSize: 35 * ratio,
fontFamily: headingFontFamily,
color: headingColor,
fontWeight: headingFontWeight,
lineHeight: '1em',
} }
>
{ label }
</div>
) }
<HStack spacing={ 2 * ratio } justify="flex-start">
<div
style={ {
fontFamily,
fontSize: 24 * ratio,
color: textColor,
} }
>
Aa
</div>
<div
style={ {
fontFamily,
fontSize: 24 * ratio,
color: linkColor,
} }
>
Aa
</div>
</HStack>
{ paletteColors && (
<HStack spacing={ 0 }>
{ paletteColors
.slice( 0, 4 )
.map( ( { color }, index ) => (
<div
key={ index }
style={ {
height: 10 * ratio,
width: 30 * ratio,
background: color,
flexGrow: 1,
} }
/>
) ) }
</HStack>
) }
</VStack>
</motion.div>
</motion.div>
</Iframe>
);
};
Expand Down
13 changes: 11 additions & 2 deletions packages/edit-site/src/components/global-styles/screen-style-variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -77,8 +78,16 @@ function Variation( { variation } ) {
onClick={ selectVariation }
onKeyDown={ selectOnEnter }
tabIndex="0"
aria-label={ variation?.name }
onFocus={ () => setIsFocused( true ) }
onBlur={ () => setIsFocused( false ) }
>
<StylesPreview height={ 100 } />
<div className="edit-site-global-styles-variations_item-preview">
<StylesPreview
label={ variation?.name }
isFocused={ isFocused }
/>
</div>
</div>
</GlobalStylesContext.Provider>
);
Expand Down
16 changes: 10 additions & 6 deletions packages/edit-site/src/components/global-styles/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

1 change: 1 addition & 0 deletions phpunit/class-gutenberg-rest-global-styles-controller-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ public function test_get_theme_items() {
),
),
),
'name' => 'variation',
),
);
$this->assertSameSetsWithIndex( $data, $expected );
Expand Down