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

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 all 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
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/font-families.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function FontFamilies() {
/>
) }

<VStack spacing={ 3 }>
<VStack spacing={ 2 }>
richtabor marked this conversation as resolved.
Show resolved Hide resolved
<HStack justify="space-between">
<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
<HStack justify="flex-end">
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
8 changes: 4 additions & 4 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 @@ -35,12 +35,12 @@ 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 />
<div className="edit-site-global-styles-screen">
<VStack spacing={ 7 }>
<ColorVariations title={ __( 'Presets' ) } />
<Palette />
<StylesColorPanel
inheritedValue={ inheritedStyle }
Expand Down
15 changes: 6 additions & 9 deletions packages/edit-site/src/components/global-styles/screen-typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,14 @@ function ScreenTypography() {
<ScreenHeader
title={ __( 'Typography' ) }
description={ __(
'Manage the typography settings for different elements.'
'Typography styles and the application of those styles on site elements.'
) }
/>
<div className="edit-site-global-styles-screen-typography">
<VStack spacing={ 6 }>
<TypographyVariations />
{ ! window.__experimentalDisableFontLibrary && (
<VStack spacing={ 3 }>
{ fontLibraryEnabled && <FontFamilies /> }
</VStack>
) }
<div className="edit-site-global-styles-screen">
<VStack spacing={ 7 }>
<TypographyVariations title={ __( 'Presets' ) } />
{ ! window.__experimentalDisableFontLibrary &&
fontLibraryEnabled && <FontFamilies /> }
<TypographyElements />
</VStack>
</div>
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/global-styles/style-variations-container.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { __ } from '@wordpress/i18n';
import PreviewStyles from './preview-styles';
import Variation from './variations/variation';

export default function StyleVariationsContainer() {
export default function StyleVariationsContainer( { gap = 2 } ) {
const variations = useSelect( ( select ) => {
return select(
coreStore
Expand All @@ -39,6 +39,7 @@ export default function StyleVariationsContainer() {
<Grid
columns={ 2 }
className="edit-site-global-styles-style-variations-container"
gap={ gap }
>
{ withEmptyVariation.map( ( variation, index ) => (
<Variation key={ index } variation={ variation }>
Expand Down
26 changes: 14 additions & 12 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,9 +7,9 @@
}

.edit-site-global-styles-preview__iframe {
border-radius: $radius-block-ui;
display: block;
border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
max-width: 100%;
display: block;
width: 100%;
}

Expand All @@ -29,9 +29,8 @@
max-width: 100%;
}

.edit-site-global-styles-screen-typography,
.edit-site-global-styles-screen-css {
margin: $grid-unit-20;
.edit-site-global-styles-screen {
margin: $grid-unit-15 $grid-unit-20 $grid-unit-20;
}

.edit-site-global-styles-screen-typography__indicator {
Expand All @@ -52,14 +51,16 @@
justify-content: center;
}

.edit-site-global-styles-screen-colors {
margin: $grid-unit-20;
.edit-site-global-styles-screen-colors .color-block-support-panel {
padding-left: 0;
padding-right: 0;
padding-top: 0;
border-top: none;
row-gap: calc(#{$grid-unit-05} * 3);
}

.color-block-support-panel {
padding-left: 0;
padding-right: 0;
border-top: none;
}
.edit-site-global-styles-screen-colors__palette-count {
color: $gray-700;
}

.edit-site-global-styles-header__description {
Expand Down Expand Up @@ -115,6 +116,7 @@
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: $grid-unit-20;

.components-v-stack {
flex: 1 1 auto;
Expand Down
49 changes: 32 additions & 17 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,49 @@
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;
// Add the same transition that block style variations and other buttons have.
transition: box-shadow 0.1s linear;
@include reduce-motion("transition");

&::after {
richtabor marked this conversation as resolved.
Show resolved Hide resolved
content: "";
position: absolute;
top: -$border-width;
left: -$border-width;
bottom: -$border-width;
right: -$border-width;
// Visually resembles the $radius-block-ui.
border-radius: $radius-block-ui + $border-width;
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: $border-width solid transparent;
box-sizing: inherit;
// Add the same transition that block style variations and other buttons have.
transition: box-shadow 0.1s linear;
@include reduce-motion("transition");
}

.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);
}

&:focus-visible {
&.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;
// 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;
}
}
}
6 changes: 4 additions & 2 deletions 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 @@ -12,8 +12,9 @@ import {
import Variation from './variation';
import StylesPreviewColors from '../preview-colors';
import { useColorVariations } from '../hooks';
import Subtitle from '../subtitle';

export default function ColorVariations() {
export default function ColorVariations( { title, gap = 2 } ) {
const colorVariations = useColorVariations();

if ( ! colorVariations?.length ) {
Expand All @@ -22,7 +23,8 @@ export default function ColorVariations() {

return (
<VStack spacing={ 3 }>
<Grid columns={ 3 }>
{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
<Grid columns={ 3 } gap={ gap }>
{ colorVariations.map( ( variation, index ) => (
<Variation key={ index } variation={ variation }>
{ () => <StylesPreviewColors /> }
Expand Down
5 changes: 4 additions & 1 deletion packages/edit-site/src/components/global-styles/variations/variations-typography.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,9 @@ import { useTypographyVariations } from '../hooks';
import TypographyExample from '../typography-example';
import PreviewIframe from '../preview-iframe';
import Variation from './variation';
import Subtitle from '../subtitle';

export default function TypographyVariations() {
export default function TypographyVariations( { title, gap = 2 } ) {
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm not super keen on adding gap as a prop. Style variations have a gap of 3 in both contexts, so I'd rather keep that for consistency and simplicity.

Copy link
Member Author

Choose a reason for hiding this comment

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

Style variations have a gap of 3 in both contexts, so I'd rather keep that for consistency and simplicity.

They shouldn't though. In the smaller context of the Inspector, the gap should be 2, but in the wider context of the dark material, they need a gap of 3.

Copy link
Member Author

Choose a reason for hiding this comment

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

If you have another idea to achieve the same result, I'm open to it.

Copy link
Contributor

Choose a reason for hiding this comment

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

I updated the styles tiles to use a gap of 3 in site view.

const typographyVariations = useTypographyVariations();

if ( ! typographyVariations?.length ) {
Expand All @@ -24,8 +25,10 @@ export default function TypographyVariations() {

return (
<VStack spacing={ 3 }>
{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
<Grid
columns={ 3 }
gap={ gap }
className="edit-site-global-styles-style-variations-container"
>
{ typographyVariations &&
Expand Down
20 changes: 7 additions & 13 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ function SidebarNavigationScreenGlobalStylesContent() {

const colorVariations = useColorVariations();
const typographyVariations = useTypographyVariations();
const gap = 3;

// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
// loaded. This is necessary because the Iframe component waits until
Expand All @@ -96,22 +97,15 @@ function SidebarNavigationScreenGlobalStylesContent() {
spacing={ 10 }
className="edit-site-global-styles-variation-container"
>
<StyleVariationsContainer />
<StyleVariationsContainer gap={ gap } />
{ colorVariations?.length && (
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Colors' ) }
</h3>
<ColorVariations />
</div>
<ColorVariations title={ __( 'Colors' ) } gap={ gap } />
) }
{ typographyVariations?.length && (
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Typography' ) }
</h3>
<TypographyVariations />
</div>
<TypographyVariations
title={ __( 'Typography' ) }
gap={ gap }
/>
) }
</VStack>
</BlockEditorProvider>
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