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

Add feature flag to toggle the new site editor sidebar #36516

Merged
merged 1 commit into from Nov 16, 2021
Merged

Add feature flag to toggle the new site editor sidebar #36516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 12 additions & 1 deletion packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Expand Up @@ -35,6 +35,7 @@ import Header from '../header';
import { SidebarComplementaryAreaFills } from '../sidebar';
import BlockEditor from '../block-editor';
import KeyboardShortcuts from '../keyboard-shortcuts';
import NavigationSidebar from '../navigation-sidebar';
import URLQueryController from '../url-query-controller';
import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
Expand All @@ -46,6 +47,7 @@ import { GlobalStylesProvider } from '../global-styles/global-styles-provider';

const interfaceLabels = {
secondarySidebar: __( 'Block Library' ),
drawer: __( 'Navigation Sidebar' ),
};

function Editor( { initialSettings, onError } ) {
Expand Down Expand Up @@ -111,7 +113,11 @@ function Editor( { initialSettings, onError } ) {
// so that they can be selected with core/editor selectors in any editor.
// This is needed because edit-site doesn't initialize with EditorProvider,
// which internally uses updateEditorSettings as well.
const { defaultTemplateTypes, defaultTemplatePartAreas } = settings;
const {
defaultTemplateTypes,
defaultTemplatePartAreas,
__experimentalNewMenuSidebar: newMenuSidebar,
} = settings;
useEffect( () => {
updateEditorSettings( {
defaultTemplateTypes,
Expand Down Expand Up @@ -213,6 +219,11 @@ function Editor( { initialSettings, onError } ) {
<SidebarComplementaryAreaFills />
<InterfaceSkeleton
labels={ interfaceLabels }
drawer={
newMenuSidebar ? undefined : (
<NavigationSidebar />
)
}
secondarySidebar={ secondarySidebar() }
sidebar={
sidebarIsOpened && (
Expand Down
11 changes: 8 additions & 3 deletions packages/edit-site/src/components/header/index.js
View file
Open in desktop
Expand Up @@ -47,13 +47,15 @@ export default function Header( {
isListViewOpen,
listViewShortcut,
isLoaded,
newMenuSidebar,
} = useSelect( ( select ) => {
const {
__experimentalGetPreviewDeviceType,
getEditedPostType,
getEditedPostId,
isInserterOpened,
isListViewOpened,
getSettings,
} = select( editSiteStore );
const { getEditedEntityRecord } = select( coreStore );
const { __experimentalGetTemplateInfo: getTemplateInfo } = select(
Expand All @@ -77,6 +79,7 @@ export default function Header( {
listViewShortcut: getShortcutRepresentation(
'core/edit-site/toggle-list-view'
),
newMenuSidebar: getSettings().__experimentalNewMenuSidebar,
};
}, [] );

Expand Down Expand Up @@ -107,9 +110,11 @@ export default function Header( {
return (
<div className="edit-site-header">
<div className="edit-site-header_start">
<MainDashboardButton.Slot>
<NavigationLink />
</MainDashboardButton.Slot>
{ newMenuSidebar && (
<MainDashboardButton.Slot>
<NavigationLink />
</MainDashboardButton.Slot>
) }

<div className="edit-site-header__toolbar">
<Button
Expand Down
34 changes: 29 additions & 5 deletions packages/edit-site/src/components/template-details/index.js
View file
Open in desktop
Expand Up @@ -31,7 +31,13 @@ export default function TemplateDetails( { template, onClose } ) {
select( editorStore ).__experimentalGetTemplateInfo( template ),
[]
);
const { revertTemplate } = useDispatch( editSiteStore );
const newMenuSidebar = useSelect(
( select ) =>
select( editSiteStore ).getSettings().__experimentalNewMenuSidebar
);
const { openNavigationPanelToMenu, revertTemplate } = useDispatch(
editSiteStore
);

const templateSubMenu = useMemo( () => {
if ( template?.type === 'wp_template' ) {
Expand All @@ -47,6 +53,11 @@ export default function TemplateDetails( { template, onClose } ) {
return null;
}

const showTemplateInSidebar = () => {
onClose();
openNavigationPanelToMenu( templateSubMenu.menu );
};

const revert = () => {
revertTemplate( template );
onClose();
Expand Down Expand Up @@ -90,10 +101,23 @@ export default function TemplateDetails( { template, onClose } ) {

<Button
className="edit-site-template-details__show-all-button"
href={ addQueryArgs( 'edit.php', {
// TODO: We should update this to filter by template part's areas as well.
post_type: template.type,
} ) }
{ ...( newMenuSidebar
? {
href: addQueryArgs( 'edit.php', {
// TODO: We should update this to filter by template part's areas as well.
post_type: template.type,
} ),
}
: {
onClick: showTemplateInSidebar,
'aria-label': sprintf(
/* translators: %1$s: the template part's area name ("Headers", "Sidebars") or "templates". */
__(
'Browse all %1$s. This will open the %1$s menu in the navigation side panel.'
),
templateSubMenu.title
),
} ) }
>
{ sprintf(
/* translators: the template part's area name ("Headers", "Sidebars") or "templates". */
Expand Down
2 changes: 2 additions & 0 deletions packages/edit-site/src/index.js
View file
Open in desktop
Expand Up @@ -49,6 +49,8 @@ export function initialize( id, settings ) {
fetchLinkSuggestions( search, searchOptions, settings );
settings.__experimentalFetchRichUrlData = fetchUrlData;
settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ];
// Feature flag for the new menu sidebar which isn't stable yet.
settings.__experimentalNewMenuSidebar = false;
Copy link
Contributor

Choose a reason for hiding this comment

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

Im curious why this is hardcoded here as false as opposed to initialized as false on the php side for the settings that are passed into this init function. With the former, the nav sidebar is always there without making direct changes to the build. With the latter, we could filter this setting and have it either way?

Copy link
Member Author

Choose a reason for hiding this comment

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

This is just a temporary solution and I don't want to make it too easy to change that. It wouldn't be here for too long anyway. Also, I think you could do wp.data.dispatch( editSiteStore ).updateSettings() to switch this flag using JS.


const target = document.getElementById( id );
const reboot = reinitializeEditor.bind( null, target, settings );
Expand Down
2 changes: 2 additions & 0 deletions packages/edit-site/src/style.scss
View file
Open in desktop
Expand Up @@ -6,6 +6,8 @@
@import "./components/header/document-actions/style.scss";
@import "./components/header/more-menu/style.scss";
@import "./components/header/navigation-link/style.scss";
@import "./components/navigation-sidebar/navigation-toggle/style.scss";
@import "./components/navigation-sidebar/navigation-panel/style.scss";
@import "./components/sidebar/style.scss";
@import "./components/sidebar/settings-header/style.scss";
@import "./components/sidebar/template-card/style.scss";
Expand Down