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
Next Next commit
Global Styles: Try presets in Site View
scruffian committed Mar 15, 2024
commit 5b6ad2773e184908e9f67bc8fcc6d21333455c26
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import TypographyExample from '../typography-example';
import PreviewIframe from '../preview-iframe';
import { getFontFamilies } from '../utils';
import Variation from './variation';
import PreviewIframe from '../preview-iframe';

const { GlobalStylesContext } = unlock( blockEditorPrivateApis );

Original file line number Diff line number Diff line change
@@ -5,7 +5,10 @@ import { __ } from '@wordpress/i18n';
import { edit, seen } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
import {
__experimentalNavigatorButton as NavigatorButton,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';
import { useCallback } from '@wordpress/element';
@@ -24,6 +27,8 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
import StyleBook from '../style-book';
import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
import ColorVariations from '../global-styles/variations/variations-color';
import TypographyVariations from '../global-styles/variations/variations-typography';

const noop = () => {};

@@ -80,7 +85,33 @@ function SidebarNavigationScreenGlobalStylesContent() {
onChange={ noop }
onInput={ noop }
>
<StyleVariationsContainer />
<VStack spacing={ 10 }>
<StyleVariationsContainer />
<div className="edit-site-global-styles-style-variations-container">
<h2
style={ {
textTransform: 'uppercase',
color: 'white',
fontWeight: '400',
} }
>
{ __( 'Colors' ) }
</h2>
<ColorVariations />
</div>
<div className="edit-site-global-styles-style-variations-container">
<h2
style={ {
textTransform: 'uppercase',
color: 'white',
fontWeight: '400',
} }
>
{ __( 'Typography' ) }
</h2>
<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>
</BlockEditorProvider>
);
}