Skip to content

Reorganize global styles menu #41574

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

Closed
vcanales wants to merge 2 commits into from
Closed

Reorganize global styles menu #41574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fda047c
Reorganize global styles menu
Jun 7, 2022
53dde69
remove divider after navigation items
Jun 7, 2022
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
25 changes: 24 additions & 1 deletion packages/edit-site/src/components/global-styles/context-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,15 @@
* WordPress dependencies
*/
import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
import { typography, color, layout } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import {
brush,
blockDefault,
typography,
color,
layout,
} from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

/**
Expand All @@ -20,6 +28,13 @@ function ContextMenu( { name, parentMenu = '' } ) {
const hasBorderPanel = useHasBorderPanel( name );
const hasDimensionsPanel = useHasDimensionsPanel( name );
const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
const { variations } = useSelect( ( select ) => {
return {
variations: select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations(),
};
}, [] );

return (
<ItemGroup>
Expand Down Expand Up @@ -47,6 +62,14 @@ function ContextMenu( { name, parentMenu = '' } ) {
{ __( 'Layout' ) }
</NavigationButtonAsItem>
) }
{ !! variations?.length && (
<NavigationButtonAsItem path="/variations" icon={ brush }>
{ __( 'Browse styles' ) }
</NavigationButtonAsItem>
) }
<NavigationButtonAsItem path="/blocks" icon={ blockDefault }>
{ __( 'Blocks' ) }
</NavigationButtonAsItem>
</ItemGroup>
);
}
Expand Down
67 changes: 1 addition & 66 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,96 +2,31 @@
* WordPress dependencies
*/
import {
__experimentalItemGroup as ItemGroup,
__experimentalHStack as HStack,
__experimentalSpacer as Spacer,
__experimentalVStack as VStack,
FlexItem,
CardBody,
Card,
CardDivider,
CardMedia,
} from '@wordpress/components';
import { isRTL, __ } from '@wordpress/i18n';
import { chevronLeft, chevronRight } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { IconWithCurrentColor } from './icon-with-current-color';
import { NavigationButtonAsItem } from './navigation-button';
import ContextMenu from './context-menu';
import StylesPreview from './preview';

function ScreenRoot() {
const { variations } = useSelect( ( select ) => {
return {
variations:
select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations(),
};
}, [] );

return (
<Card size="small">
<Card size="small" isBorderless>
<CardBody>
<VStack spacing={ 4 }>
<Card>
<CardMedia>
<StylesPreview />
</CardMedia>
</Card>
{ !! variations?.length && (
<ItemGroup>
<NavigationButtonAsItem path="/variations">
<HStack justify="space-between">
<FlexItem>
{ __( 'Browse styles' ) }
</FlexItem>
<IconWithCurrentColor
icon={
isRTL() ? chevronLeft : chevronRight
}
/>
</HStack>
</NavigationButtonAsItem>
</ItemGroup>
) }
<ContextMenu />
</VStack>
</CardBody>

<CardDivider />

<CardBody>
<Spacer
as="p"
paddingTop={ 2 }
/*
* 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
* This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
*/
paddingX="13px"
marginBottom={ 4 }
>
{ __(
'Customize the appearance of specific blocks for the whole site.'
) }
</Spacer>
<ItemGroup>
<NavigationButtonAsItem path="/blocks">
<HStack justify="space-between">
<FlexItem>{ __( 'Blocks' ) }</FlexItem>
<IconWithCurrentColor
icon={ isRTL() ? chevronLeft : chevronRight }
/>
</HStack>
</NavigationButtonAsItem>
</ItemGroup>
</CardBody>
</Card>
);
}
Expand Down