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

Make the off-canvas navigation editor the default experience #46995

Merged
merged 11 commits into from
Jan 26, 2023
Merged

Make the off-canvas navigation editor the default experience #46995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
5dd4d63
Move site editor nav menu sidebar to its own experimental flag
Jan 9, 2023
21e3a7b
Remove experimental option for off canvas editor
Jan 9, 2023
2a846e7
Reword nav sidebar experiment label
Jan 9, 2023
fab0a26
Remove unused Fragment imports
Jan 9, 2023
3ff9cdb
Remove unused toggleProps in NavigationMenuSelector
Jan 9, 2023
5e35de5
Remove unused id in NavigationMenu
Jan 9, 2023
3c3adcf
reverse the conditional
Jan 25, 2023
6642309
add explanatory comment
Jan 25, 2023
a8bbbfe
reset value if the experiment is off
Jan 25, 2023
025d050
Add comment about nav block specific code
Jan 26, 2023
0a58d83
keep linter happy
Jan 26, 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
4 changes: 2 additions & 2 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-site-editor-navigation-menu-sidebar', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSiteEditorNavigationMenuSidebar = true', 'before' );
}
}

Expand Down
16 changes: 8 additions & 8 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,26 +54,26 @@ function gutenberg_initialize_experiments_settings() {
);

add_settings_field(
'gutenberg-off-canvas-navigation-editor',
__( 'Off canvas navigation editor ', 'gutenberg' ),
'gutenberg-color-randomizer',
__( 'Color randomizer ', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Test a new "off canvas" editor for navigation block using the block inspector and a tree view of the current menu', 'gutenberg' ),
'id' => 'gutenberg-off-canvas-navigation-editor',
'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ),
'id' => 'gutenberg-color-randomizer',
)
);

add_settings_field(
'gutenberg-color-randomizer',
__( 'Color randomizer ', 'gutenberg' ),
'gutenberg-site-editor-navigation-menu-sidebar',
__( 'Global navigation menu sidebar ', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ),
'id' => 'gutenberg-color-randomizer',
'label' => __( 'Test a new global navigation menu sidebar in the site editor.', 'gutenberg' ),
'id' => 'gutenberg-site-editor-navigation-menu-sidebar',
)
);

Expand Down
5 changes: 1 addition & 4 deletions packages/block-editor/src/components/block-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,6 @@ function BlockCard( { title, icon, description, blockType, className } ) {
( { title, icon, description } = blockType );
}

const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;

const { parentNavBlockClientId } = useSelect( ( select ) => {
const { getSelectedBlockClientId, getBlockParentsByBlockName } =
select( blockEditorStore );
Expand All @@ -49,7 +46,7 @@ function BlockCard( { title, icon, description, blockType, className } ) {

return (
<div className={ classnames( 'block-editor-block-card', className ) }>
{ isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && (
{ parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.
<Button
onClick={ () => selectBlock( parentNavBlockClientId ) }
label={ __( 'Go to parent Navigation block' ) }
Expand Down
12 changes: 3 additions & 9 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,12 +173,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
const availableTabs = useInspectorControlsTabs( blockType?.name );
const showTabs = availableTabs?.length > 1;

const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;

const blockInspectorAnimationSettings = useSelect(
( select ) => {
if ( isOffCanvasNavigationEditorEnabled && blockType ) {
if ( blockType ) {
const globalBlockInspectorAnimationSettings =
select( blockEditorStore ).getSettings()
.__experimentalBlockInspectorAnimation;
Expand All @@ -188,7 +185,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
}
return null;
},
[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
[ selectedBlockClientId, blockType ]
);

if ( count > 1 ) {
Expand Down Expand Up @@ -254,10 +251,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {

return (
<BlockInspectorSingleBlockWrapper
animate={
isOffCanvasNavigationEditorEnabled &&
blockInspectorAnimationSettings
}
animate={ blockInspectorAnimationSettings }
wrapper={ ( children ) => (
<AnimatedContainer
blockInspectorAnimationSettings={
Expand Down
13 changes: 4 additions & 9 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,6 @@ function Navigation( {
hasColorSettings = true,
customPlaceholder: CustomPlaceholder = null,
} ) {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;

const {
openSubmenusOnClick,
overlayMenu,
Expand Down Expand Up @@ -879,12 +876,10 @@ function Navigation( {
} }
/>
) }
{ isOffCanvasNavigationEditorEnabled && (
<ManageMenusButton
disabled={ isManageMenusButtonDisabled }
className="wp-block-navigation-manage-menus-button"
/>
) }
<ManageMenusButton
disabled={ isManageMenusButtonDisabled }
className="wp-block-navigation-manage-menus-button"
/>
</InspectorControls>
) }

Expand Down
15 changes: 4 additions & 11 deletions packages/block-library/src/navigation/edit/menu-inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,20 +126,13 @@ const DefaultControls = ( props ) => {
};

const MenuInspectorControls = ( props ) => {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;
const menuControlsSlot = isOffCanvasNavigationEditorEnabled
? 'list'
: undefined;

// Show the OffCanvasEditor controls if we're in the Gutenberg plugin. Previously used isOffCanvasNavigationEditorEnabled.
return (
<InspectorControls __experimentalGroup={ menuControlsSlot }>
<InspectorControls __experimentalGroup="list">
<PanelBody
title={
isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
}
title={ process.env.IS_GUTENBERG_PLUGIN ? null : __( 'Menu' ) }
>
{ isOffCanvasNavigationEditorEnabled ? (
{ process.env.IS_GUTENBERG_PLUGIN ? (
<ExperimentControls { ...props } />
) : (
<DefaultControls { ...props } />
Expand Down
63 changes: 32 additions & 31 deletions packages/block-library/src/navigation/edit/navigation-menu-selector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,6 @@ function NavigationMenuSelector( {
createNavigationMenuIsError,
toggleProps = {},
} ) {
const isOffCanvasNavigationEditorEnabled =
window?.__experimentalEnableOffCanvasNavigationEditor === true;
/* translators: %s: The name of a menu. */
const createActionLabel = __( "Create from '%s'" );

Expand Down Expand Up @@ -149,43 +147,20 @@ function NavigationMenuSelector( {
},
};

if (
! hasNavigationMenus &&
! hasClassicMenus &&
! isOffCanvasNavigationEditorEnabled
) {
return (
<Button
className="wp-block-navigation__navigation-selector-button--createnew"
isBusy={ ! enableOptions }
disabled={ ! enableOptions }
__experimentalIsFocusable
onClick={ () => {
onCreateNew();
setIsCreatingMenu( true );
setSelectorLabel( __( 'Loading …' ) );
setEnableOptions( false );
} }
>
{ __( 'Create new menu' ) }
</Button>
);
}

return (
const NavigationMenuSelectorDropdown = (
<DropdownMenu
className={
isOffCanvasNavigationEditorEnabled
process.env.IS_GUTENBERG_PLUGIN // Previously isOffCanvasNavigationEditorEnabled
? ''
: 'wp-block-navigation__navigation-selector'
}
label={ selectorLabel }
text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
text={ process.env.IS_GUTENBERG_PLUGIN ? '' : selectorLabel } // Previously isOffCanvasNavigationEditorEnabled
icon={ process.env.IS_GUTENBERG_PLUGIN ? moreVertical : null } // Previously isOffCanvasNavigationEditorEnabled
toggleProps={
isOffCanvasNavigationEditorEnabled
process.env.IS_GUTENBERG_PLUGIN
? { isSmall: true }
: toggleProps
: toggleProps // Previously isOffCanvasNavigationEditorEnabled
}
>
{ ( { onClose } ) => (
Expand Down Expand Up @@ -247,6 +222,32 @@ function NavigationMenuSelector( {
) }
</DropdownMenu>
);

const NavigationMenuSelectorButton = (
<Button
className="wp-block-navigation__navigation-selector-button--createnew"
isBusy={ ! enableOptions }
disabled={ ! enableOptions }
__experimentalIsFocusable
onClick={ () => {
onCreateNew();
setIsCreatingMenu( true );
setSelectorLabel( __( 'Loading …' ) );
setEnableOptions( false );
} }
>
{ __( 'Create new menu' ) }
</Button>
);

if ( ! hasNavigationMenus && ! hasClassicMenus ) {
if ( ! process.env.IS_GUTENBERG_PLUGIN ) {
// This has to be in it's own conditional so it is removed by dead code elimination. Previously used isOffCanvasNavigationEditorEnabled.
return NavigationMenuSelectorButton;
}
}

return NavigationMenuSelectorDropdown;
}

export default NavigationMenuSelector;
6 changes: 0 additions & 6 deletions packages/block-library/src/navigation/edit/placeholder/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,6 @@ export default function NavigationPlaceholder( {
clientId={ clientId }
onSelectNavigationMenu={ onSelectNavigationMenu }
onSelectClassicMenu={ onSelectClassicMenu }
toggleProps={ {
variant: 'tertiary',
iconPosition: 'right',
className:
'wp-block-navigation-placeholder__actions__dropdown',
} }
/>

<hr />
Expand Down
4 changes: 3 additions & 1 deletion packages/edit-site/src/components/sidebar-edit-mode/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ export function SidebarComplementaryAreaFills() {
// See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination.
let MaybeNavigationMenuSidebar = Fragment;

if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) {
if (
window?.__experimentalEnableSiteEditorNavigationMenuSidebar === true
) {
MaybeNavigationMenuSidebar = NavigationMenuSidebar;
}

Expand Down
5 changes: 1 addition & 4 deletions ...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,7 @@ export default function NavigationInspector() {
onChange={ onChange }
onInput={ onInput }
>
<NavigationMenu
id={ navMenuListId }
innerBlocks={ publishedInnerBlocks }
/>
<NavigationMenu innerBlocks={ publishedInnerBlocks } />
</BlockEditorProvider>
) }

Expand Down
15 changes: 4 additions & 11 deletions ...ges/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import {
__experimentalListView as ListView,
__experimentalOffCanvasEditor as OffCanvasEditor,
store as blockEditorStore,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -32,7 +31,7 @@ const ALLOWED_BLOCKS = {
],
};

export default function NavigationMenu( { innerBlocks, id } ) {
export default function NavigationMenu( { innerBlocks } ) {
const { updateBlockListSettings } = useDispatch( blockEditorStore );

//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
Expand All @@ -50,13 +49,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
} );
}, [ updateBlockListSettings, innerBlocks ] );

if ( window?.__experimentalEnableOffCanvasNavigationEditor ) {
return (
<OffCanvasEditor
blocks={ innerBlocks }
selectBlockInCanvas={ false }
/>
);
}
return <ListView id={ id } />;
return (
<OffCanvasEditor blocks={ innerBlocks } selectBlockInCanvas={ false } />
);
}