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

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 1 commit
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 ( ! isset( $variation['name'] ) ) {
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
$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
9 changes: 8 additions & 1 deletion 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 @@ -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';
Expand Down Expand Up @@ -78,7 +80,12 @@ function Variation( { variation } ) {
onKeyDown={ selectOnEnter }
tabIndex="0"
>
<StylesPreview height={ 100 } />
<VStack spacing="2">
<div className="edit-site-global-styles-variations_item-preview">
<StylesPreview height={ 100 } />
</div>
<HStack alignment="center">{ variation?.name }</HStack>
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
</VStack>
</div>
</GlobalStylesContext.Provider>
);
Expand Down
15 changes: 9 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,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;
}
}