Skip to content

Commit

Permalink
Site editor: do not use navigator's internal classname (WordPress#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 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
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
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;
}

0 comments on commit 16ec554

Please sign in to comment.