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.

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

Global Styles: Try color and typography presets in Site View #59594

Merged
merged 8 commits into from
Mar 15, 2024
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
tidy up styles
  • Loading branch information
scruffian committed Mar 15, 2024
commit ab033019b9d771d466628f6ab449fe4408ef9ec1
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ function ScreenColors() {
) }
/>
<div className="edit-site-global-styles-screen-colors">
<VStack spacing={ 3 }>
<VStack spacing={ 6 }>
<ColorVariations />
<Palette />
<StylesColorPanel
Original file line number Diff line number Diff line change
@@ -85,30 +85,21 @@ function SidebarNavigationScreenGlobalStylesContent() {
onChange={ noop }
onInput={ noop }
>
<VStack spacing={ 10 }>
<VStack
spacing={ 10 }
className="edit-site-global-styles-variation-container"
>
<StyleVariationsContainer />
<div className="edit-site-global-styles-style-variations-container">
<h2
style={ {
textTransform: 'uppercase',
color: 'white',
fontWeight: '400',
} }
>
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Colors' ) }
</h2>
</h3>
<ColorVariations />
</div>
<div className="edit-site-global-styles-style-variations-container">
<h2
style={ {
textTransform: 'uppercase',
color: 'white',
fontWeight: '400',
} }
>
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Typography' ) }
</h2>
</h3>
<TypographyVariations />
Copy link
Member

Choose a reason for hiding this comment

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

I think we should check if variations exist before showing the headings.

Here's emptytheme (no typography styles):

Screenshot 2024-03-13 at 3 23 54 pm

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks, I updated the PR, though when I tested with emptytheme I don't see the above as I don't have any style variations :hmm:

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I ended up including some of the changes from #59717 so that this works as expected

Copy link
Member

Choose a reason for hiding this comment

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

Ah, I see now. It's failing the uniqueTypographyVariations test.

Empty theme has the following "typography" variation:

{
    "settings": {},
    "styles": {
        "elements": {
            "h2": {}
        },
        "blocks": {
            "core/post-title": {
                "typography": {
                    "fontWeight": "700"
                }
            }
        }
    },
    "title": "variation"
}

But it doesn't have any fontFamilies, so it fails.

The same thing might happen for colors if there are no color settings:

Screenshot 2024-03-14 at 3 11 51 pm

I've pushed a change to check for this in a30eb5b. Seems to work okay, feel free to revert.

</div>
</VStack>
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@
flex-shrink: 0;
}

.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
@include break-medium() {
// Safari does not currently support `scrollbar-gutter: stable`, so at
// particular viewport sizes it's possible for previews to render prior to a
@@ -90,7 +90,16 @@
// See: https://github.com/WordPress/gutenberg/issues/55112
max-width: 292px;
}
}

.edit-site-global-styles-variation-title {
color: $gray-300;
font-size: 11px;
text-transform: uppercase;
font-weight: 500;
}

.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
.edit-site-global-styles-variations_item-preview {
box-shadow: 0 0 0 $border-width $gray-900;
}