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

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

Merged
merged 8 commits into from
Mar 15, 2024
Merged

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

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5b6ad27
Global Styles: Try presets in Site View
scruffian Mar 5, 2024
a929d6f
get typography working in mobile
scruffian Mar 7, 2024
6546d51
add border radius
scruffian Mar 7, 2024
ab03301
tidy up styles
scruffian Mar 7, 2024
c9b7390
only output the preset headers if there are presets
scruffian Mar 13, 2024
cdf5af9
Filtering for settings before showing titles.
ramonjd Mar 14, 2024
6b06612
Remove the filters that might remove variations that are valid
scruffian Mar 15, 2024
a3593f2
move the unique typography variations to a hook
scruffian Mar 15, 2024
File filter

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
only output the preset headers if there are presets
  • Loading branch information
@scruffian
scruffian committed Mar 15, 2024
commit c9b7390c80ead06495d3a570629b0e81c0f5b635
38 changes: 26 additions & 12 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 @@ -29,6 +29,7 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
import ColorVariations from '../global-styles/variations/variations-color';
import TypographyVariations from '../global-styles/variations/variations-typography';
import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';

const noop = () => {};

Expand Down Expand Up @@ -74,6 +75,15 @@ function SidebarNavigationScreenGlobalStylesContent() {
};
}, [] );

const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
property: 'color',
} );

const typographyVariations =
useCurrentMergeThemeStyleVariationsWithUserConfig( {
property: 'typography',
} );

// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
// loaded. This is necessary because the Iframe component waits until
// the block editor store's `__internalIsInitialized` is true before
Expand All @@ -90,18 +100,22 @@ function SidebarNavigationScreenGlobalStylesContent() {
className="edit-site-global-styles-variation-container"
>
<StyleVariationsContainer />
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Colors' ) }
</h3>
<ColorVariations />
</div>
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Typography' ) }
</h3>
<TypographyVariations />
</div>
{ colorVariations && (
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Colors' ) }
</h3>
<ColorVariations />
</div>
) }
{ typographyVariations && (
<div>
<h3 className="edit-site-global-styles-variation-title">
{ __( 'Typography' ) }
</h3>
<TypographyVariations />
</div>
) }
</VStack>
</BlockEditorProvider>
);
Expand Down