Skip to content

Commit

Permalink
Site editor: do not use navigator's internal classname (#56911)
Browse files Browse the repository at this point in the history 
* Apply the `edit-site-sidebar__screen-wrapper` classname to all navigator screens in the site editor sidebar

* Use the newly added classname instead of the private component's classname
  • Loading branch information
@ciampo
ciampo authored Dec 12, 2023
1 parent 55ff770 commit 16ec554
Show file tree
Hide file tree
Showing 2 changed files with 51 additions and 36 deletions.
65 changes: 41 additions & 24 deletions packages/edit-site/src/components/sidebar/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
/**
* External dependencies
*/
import classNames from 'classnames';

/**
* WordPress dependencies
*/
Expand Down Expand Up @@ -33,53 +38,65 @@ import DataViewsSidebarContent from '../sidebar-dataviews';

const { useLocation } = unlock( routerPrivateApis );

function SidebarScreenWrapper( { className, ...props } ) {
return (
<NavigatorScreen
className={ classNames(
'edit-site-sidebar__screen-wrapper',
className
) }
{ ...props }
/>
);
}

function SidebarScreens() {
useSyncPathWithURL();

return (
<>
<NavigatorScreen path="/">
<SidebarScreenWrapper path="/">
<SidebarNavigationScreenMain />
</NavigatorScreen>
<NavigatorScreen path="/navigation">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/navigation">
<SidebarNavigationScreenNavigationMenus />
</NavigatorScreen>
<NavigatorScreen path="/navigation/:postType/:postId">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/navigation/:postType/:postId">
<SidebarNavigationScreenNavigationMenu />
</NavigatorScreen>
<NavigatorScreen path="/wp_global_styles">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/wp_global_styles">
<SidebarNavigationScreenGlobalStyles />
</NavigatorScreen>
<NavigatorScreen path="/page">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/page">
<SidebarNavigationScreenPages />
</NavigatorScreen>
<NavigatorScreen path="/page/:postId">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/page/:postId">
<SidebarNavigationScreenPage />
</NavigatorScreen>
</SidebarScreenWrapper>
{ window?.__experimentalAdminViews && (
<NavigatorScreen path="/pages">
<SidebarScreenWrapper path="/pages">
<SidebarNavigationScreen
title={ __( 'Pages' ) }
backPath="/page"
content={ <DataViewsSidebarContent /> }
/>
</NavigatorScreen>
</SidebarScreenWrapper>
) }
<NavigatorScreen path="/:postType(wp_template)">
<SidebarScreenWrapper path="/:postType(wp_template)">
<SidebarNavigationScreenTemplates />
</NavigatorScreen>
<NavigatorScreen path="/patterns">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/patterns">
<SidebarNavigationScreenPatterns />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/:postType(wp_template|wp_template_part)/all">
<SidebarNavigationScreenTemplatesBrowse />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/:postType(wp_template_part|wp_block)/:postId">
<SidebarNavigationScreenPattern />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template)/:postId">
</SidebarScreenWrapper>
<SidebarScreenWrapper path="/:postType(wp_template)/:postId">
<SidebarNavigationScreenTemplate />
</NavigatorScreen>
</SidebarScreenWrapper>
</>
);
}
Expand Down
22 changes: 10 additions & 12 deletions packages/edit-site/src/components/sidebar/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
.edit-site-sidebar__content {
flex-grow: 1;
overflow-y: auto;
}

.edit-site-sidebar__screen-wrapper {
@include custom-scrollbars-on-hover(transparent, $gray-700);
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
height: 100%;

.components-navigator-screen {
@include custom-scrollbars-on-hover(transparent, $gray-700);
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
height: 100%;
}
// This matches the logo padding
padding: 0 $grid-unit-15;
}

.edit-site-sidebar__footer {
Expand All @@ -17,8 +20,3 @@
margin: 0 $canvas-padding;
padding: $canvas-padding 0;
}

.edit-site-sidebar__content > div {
// This matches the logo padding
padding: 0 $grid-unit-15;
}

1 comment on commit 16ec554

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 16ec554.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7180101779
📝 Reported issues:

Please sign in to comment.