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

Follow up design tweaks for global styles presets #60031

Merged
merged 18 commits into from
Mar 21, 2024
Merged

Follow up design tweaks for global styles presets #60031

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2af335e
Update ColorToolsPanel to "Elements" H3
richtabor Mar 19, 2024
79f79fa
Improve copy and spacing on "colors" screen
richtabor Mar 19, 2024
4496ba0
Tweak HighlightedColors size and spacing
richtabor Mar 19, 2024
712cbe3
Tweak palette count visual and empty state copy
richtabor Mar 19, 2024
1a17602
Tweak styles
richtabor Mar 19, 2024
c1e5703
Add "Presets" subtitle, adjust grid
richtabor Mar 19, 2024
01f359a
Tweaks
richtabor Mar 19, 2024
a3320bf
Add back 'custom'
richtabor Mar 20, 2024
b28c941
Adjust spacing of font families
richtabor Mar 20, 2024
4d1e008
Adjust subtitles
richtabor Mar 20, 2024
1910ef8
Use $border-width
richtabor Mar 20, 2024
d75ef6b
Linting
richtabor Mar 20, 2024
775cca4
Fix consistent margin top
richtabor Mar 20, 2024
8718839
remove unused styles
richtabor Mar 20, 2024
a668bb7
Remove duplicate VStack
richtabor Mar 20, 2024
1fdbbec
Add reduce-motion and comments for box shadow transitions
richtabor Mar 20, 2024
ffeb330
also set the gap on the style variation component
scruffian Mar 21, 2024
068cdf8
use a generic class for shared styles
scruffian Mar 21, 2024
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
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/global-styles/color-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,10 +123,11 @@ function ColorToolsPanel( {

return (
<ToolsPanel
label={ __( 'Color' ) }
label={ __( 'Elements' ) }
resetAll={ resetAll }
panelId={ panelId }
hasInnerWrapper
headingLevel={ 3 }
className="color-block-support-panel"
__experimentalFirstVisibleItemClass="first"
__experimentalLastVisibleItemClass="last"
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/global-styles/palette.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@ function Palette( { name } ) {
</ColorIndicatorWrapper>
) ) }
</ZStack>
<FlexItem>{ paletteButtonText }</FlexItem>
<FlexItem className="edit-site-global-styles-screen-colors__palette-count">
{ paletteButtonText }
</FlexItem>
</HStack>
</NavigationButtonAsItem>
</ItemGroup>
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/global-styles/preview-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
} }
>
<HStack
spacing={ 10 * ratio }
spacing={ 5 * ratio }
justify="center"
style={ {
height: '100%',
overflow: 'hidden',
} }
>
<HighlightedColors
normalizedColorSwatchSize={ 66 }
normalizedColorSwatchSize={ 56 }
ratio={ ratio }
/>
</HStack>
Expand Down
10 changes: 7 additions & 3 deletions packages/edit-site/src/components/global-styles/screen-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
/**
* Internal dependencies
*/
import Subtitle from './subtitle';
import ScreenHeader from './header';
import Palette from './palette';
import { unlock } from '../../lock-unlock';
Expand Down Expand Up @@ -35,12 +36,15 @@ function ScreenColors() {
<ScreenHeader
title={ __( 'Colors' ) }
description={ __(
'Manage palettes and the default color of different global elements on the site.'
'Palette colors and the application of those colors on site elements.'
) }
/>
<div className="edit-site-global-styles-screen-colors">
<VStack spacing={ 6 }>
<ColorVariations />
<VStack spacing={ 7 }>
<VStack spacing={ 3 }>
<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
<ColorVariations />
</VStack>
<Palette />
<StylesColorPanel
inheritedValue={ inheritedStyle }
Expand Down
19 changes: 17 additions & 2 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 @@ -7,7 +7,8 @@
}

.edit-site-global-styles-preview__iframe {
border-radius: $radius-block-ui;
border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
max-width: 100%;
display: block;
max-width: 100%;
width: 100%;
Expand Down Expand Up @@ -53,15 +54,29 @@
}

.edit-site-global-styles-screen-colors {
margin: $grid-unit-20;
margin: $grid-unit-10 $grid-unit-20 $grid-unit-20;
richtabor marked this conversation as resolved.
Show resolved Hide resolved

.color-block-support-panel {
padding-left: 0;
padding-right: 0;
padding-top: 0;
border-top: none;
row-gap: calc(#{$grid-unit-05} * 3);
}
}

.edit-site-global-styles-screen-colors__palette-count {
color: $gray-700;
}

.edit-site-global-styles-sidebar__more-menu > .components-button.has-icon {
richtabor marked this conversation as resolved.
Show resolved Hide resolved
// Make the DropdownMenu the same size as the rest of the buttons, as it does not support "compact" size.
height: $grid-unit-40;
min-width: $grid-unit-40;
padding: 0;
width: $grid-unit-40;
}

.edit-site-global-styles-header__description {
padding: 0 $grid-unit-20;
}
Expand Down
43 changes: 27 additions & 16 deletions packages/edit-site/src/components/global-styles/variations/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,45 @@
cursor: pointer;

.edit-site-global-styles-variations_item-preview {
padding: $border-width * 2;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 $border-width $gray-200;
// Shown in Windows 10 high contrast mode.
outline: 1px solid transparent;
position: relative;
transition: box-shadow 0.1s linear;

&::after {
richtabor marked this conversation as resolved.
Show resolved Hide resolved
content: "";
position: absolute;
top: -1px;
richtabor marked this conversation as resolved.
Show resolved Hide resolved
left: -1px;
bottom: -1px;
right: -1px;
border-radius: $radius-block-ui + $border-width; // Visually resembles the $radius-block-ui.
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
border: 1px solid transparent;
box-sizing: inherit;
transition: box-shadow 0.1s linear;
}

.edit-site-global-styles-color-variations & {
padding: $grid-unit-10;
}
}

&.is-active .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width $gray-900;
// Shown in Windows 10 high contrast mode.
outline-width: 3px;
}

&:hover .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
}

&:focus .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
&.is-active .edit-site-global-styles-variations_item-preview,
&:focus-visible .edit-site-global-styles-variations_item-preview {
box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;

&:focus-visible {
// Shown in Windows 10 high contrast mode.
outline: 3px solid transparent;
outline-offset: 0;
outline-width: 3px;

&::after {
box-shadow: inset 0 0 0 1px $white;
}
}
}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/variations/variations-color.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function ColorVariations() {

return (
<VStack spacing={ 3 }>
<Grid columns={ 3 }>
<Grid columns={ 3 } gap={ 2 }>
{ colorVariations.map( ( variation, index ) => (
<Variation key={ index } variation={ variation }>
{ () => <StylesPreviewColors /> }
Expand Down
21 changes: 12 additions & 9 deletions packages/edit-site/src/components/sidebar-navigation-screen/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,18 +99,21 @@
font-weight: 500;
}

.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
.edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width $gray-900;
}
.edit-site-global-styles-variations_item.is-active .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width $gray-100;
}
.edit-site-global-styles-variations_item:hover .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
}
.edit-site-global-styles-variations_item:focus .edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

&:focus .edit-site-global-styles-variations_item-preview,
&.is-active .edit-site-global-styles-variations_item-preview {
box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;

// Shown in Windows 10 high contrast mode.
outline-width: 3px;

&::after {
box-shadow: inset 0 0 0 1px $gray-900;
}
}
}

Expand Down
Loading