Skip to content

Unify the global block styles panel with the block inspector panels #49428

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

Merged
youknowriad merged 10 commits into from
May 5, 2023
Merged

Unify the global block styles panel with the block inspector panels #49428

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
44b5dd0
Unify the global block styles panel with the block inspector panels
youknowriad Mar 29, 2023
7dae142
Add effects and filters screens to the block screen
youknowriad Apr 7, 2023
22e096f
Reorder like the block inspector
youknowriad Apr 7, 2023
cb033ee
Move the Custom CSS panel to the block screen
youknowriad May 2, 2023
3afd7e4
Restore block variations
youknowriad May 2, 2023
c0511a6
Cleanup
youknowriad May 2, 2023
3934658
Fix typos
youknowriad May 2, 2023
86759b0
Fix small typos
youknowriad May 3, 2023
47d29f2
Remove useless menu items
youknowriad May 4, 2023
8acff4c
Fix e2e tests
youknowriad May 5, 2023
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
Cleanup
  • Loading branch information
@youknowriad
youknowriad committed May 2, 2023
commit c0511a688aaac006997d0c4aa1d8a753033c3f82
12 changes: 6 additions & 6 deletions packages/edit-site/src/components/global-styles/root-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ function RootMenu() {
{ hasTypographyPanel && (
<NavigationButtonAsItem
icon={ typography }
path={ '/typography' }
path="/typography"
aria-label={ __( 'Typography styles' ) }
>
{ __( 'Typography' ) }
Expand All @@ -56,7 +56,7 @@ function RootMenu() {
{ hasColorPanel && (
<NavigationButtonAsItem
icon={ color }
path={ '/colors' }
path="/colors"
aria-label={ __( 'Colors styles' ) }
>
{ __( 'Colors' ) }
Expand All @@ -65,7 +65,7 @@ function RootMenu() {
{ hasBorderPanel && (
<NavigationButtonAsItem
icon={ border }
path={ '/border' }
path="/border"
aria-label={ __( 'Border' ) }
>
{ __( 'Border' ) }
Expand All @@ -74,7 +74,7 @@ function RootMenu() {
{ hasEffectsPanel && (
<NavigationButtonAsItem
icon={ shadow }
path={ '/effects' }
path="/effects"
aria-label={ __( 'Effects' ) }
>
{ __( 'Effects' ) }
Expand All @@ -83,7 +83,7 @@ function RootMenu() {
{ hasFilterPanel && (
<NavigationButtonAsItem
icon={ filter }
path={ '/filters' }
path="/filters"
aria-label={ __( 'Filters styles' ) }
>
{ __( 'Filters' ) }
Expand All @@ -92,7 +92,7 @@ function RootMenu() {
{ hasLayoutPanel && (
<NavigationButtonAsItem
icon={ layout }
path={ '/layout' }
path="/layout"
aria-label={ __( 'Layout styles' ) }
>
{ __( 'Layout' ) }
Expand Down
128 changes: 38 additions & 90 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,33 +108,6 @@ function GlobalStylesNavigationScreen( { className, ...props } ) {
);
}

function BlockStyleVariationsScreens( { name } ) {
const blockStyleVariations = useSelect(
( select ) => {
const { getBlockStyles } = select( blocksStore );
return getBlockStyles( name );
},
[ name ]
);
if ( ! blockStyleVariations?.length ) {
return null;
}

return blockStyleVariations.map( ( variation ) => (
<ContextScreens
key={ variation.name + name }
name={ name }
parentMenu={
'/blocks/' +
encodeURIComponent( name ) +
'/variations/' +
encodeURIComponent( variation.name )
}
variation={ variation.name }
/>
) );
}

function BlockStylesNavigationScreens( {
parentMenu,
blockStyles,
Expand All @@ -150,7 +123,7 @@ function BlockStylesNavigationScreens( {
) );
}

function ContextScreens( { name, parentMenu = '', variation = '' } ) {
function ContextScreens( { name, parentMenu = '' } ) {
const blockStyleVariations = useSelect(
( select ) => {
const { getBlockStyles } = select( blocksStore );
Expand All @@ -161,66 +134,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) {

return (
<>
{ ! name && ! variation && (
<>
<GlobalStylesNavigationScreen
path={ parentMenu + '/typography' }
>
<ScreenTypography />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/typography/text' }
>
<ScreenTypographyElement element="text" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/typography/link' }
>
<ScreenTypographyElement element="link" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/typography/heading' }
>
<ScreenTypographyElement element="heading" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/typography/caption' }
>
<ScreenTypographyElement element="caption" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/typography/button' }
>
<ScreenTypographyElement element="button" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen
path={ parentMenu + '/colors' }
>
<ScreenColors />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path={ parentMenu + '/css' }>
<ScreenCSS />
</GlobalStylesNavigationScreen>
</>
) }

<GlobalStylesNavigationScreen
path={ parentMenu + '/colors/palette' }
>
<ScreenColorPalette name={ name } />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path={ parentMenu + '/layout' }>
<ScreenLayout name={ name } variation={ variation } />
</GlobalStylesNavigationScreen>

{ !! blockStyleVariations?.length && (
<BlockStylesNavigationScreens
parentMenu={ parentMenu }
Expand Down Expand Up @@ -312,6 +231,43 @@ function GlobalStylesUI() {
<ScreenBlockList />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography">
<ScreenTypography />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/text">
<ScreenTypographyElement element="text" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/link">
<ScreenTypographyElement element="link" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/heading">
<ScreenTypographyElement element="heading" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/caption">
<ScreenTypographyElement element="caption" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/typography/button">
<ScreenTypographyElement element="button" />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/colors">
<ScreenColors />
``
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/layout">
<ScreenLayout />
</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/css">
<ScreenCSS />
</GlobalStylesNavigationScreen>

{ blocks.map( ( block ) => (
<GlobalStylesNavigationScreen
key={ 'menu-block-' + block.name }
Expand All @@ -331,14 +287,6 @@ function GlobalStylesUI() {
/>
) ) }

{ blocks.map( ( block, index ) => {
return (
<BlockStyleVariationsScreens
key={ 'screens-block-styles-' + block.name + index }
name={ block.name }
/>
);
} ) }
{ 'style-book' === editorCanvasContainerView && (
<GlobalStylesStyleBook />
) }
Expand Down