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

Try always generating navigation post title #36760

Merged
merged 13 commits into from Nov 24, 2021
Merged

Try always generating navigation post title #36760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
c15a377
Try always generating navigation title
tellthemachines Nov 23, 2021
acc5653
Show placeholder preview
tellthemachines Nov 23, 2021
0af669e
Add useCreateNavigationMenu
adamziel Nov 23, 2021
6d31ca9
Update packages/block-library/src/navigation/edit/use-default-navigat…
adamziel Nov 23, 2021
eb80d02
Fix placeholder and remove unecessary logic.
tellthemachines Nov 24, 2021
7f5011d
Pass clientId to placeholder.
tellthemachines Nov 24, 2021
f4b4bc4
Reset inner blocks when creating new menu
getdave Nov 24, 2021
2219fa5
Only consider published Navigations as valid
getdave Nov 24, 2021
1263ad3
Correct bug with checking status of Nav post
getdave Nov 24, 2021
4808aaf
UX to allow creating new menu if associated Nav post not found
getdave Nov 24, 2021
1885a87
Switch to useGenerateDefaultNavigationTitle
adamziel Nov 24, 2021
4317c76
Wrap createNewMenu in useCallback
adamziel Nov 24, 2021
407af14
Rename createNewMenu to startWithEmptyMenu
adamziel Nov 24, 2021
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
52 changes: 35 additions & 17 deletions packages/block-library/src/navigation/edit/index.js
View file
Open in desktop
Expand Up @@ -34,6 +34,7 @@ import {
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
ToolbarGroup,
ToolbarDropdownMenu,
Button,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

Expand All @@ -48,7 +49,6 @@ import ResponsiveWrapper from './responsive-wrapper';
import NavigationInnerBlocks from './inner-blocks';
import NavigationMenuSelector from './navigation-menu-selector';
import NavigationMenuNameControl from './navigation-menu-name-control';
import NavigationMenuPublishButton from './navigation-menu-publish-button';
import UnsavedInnerBlocks from './unsaved-inner-blocks';
import NavigationMenuDeleteControl from './navigation-menu-delete-control';

Expand Down Expand Up @@ -281,6 +281,17 @@ function Navigation( {
setIsPlaceholderShown( ! isEntityAvailable );
}, [ isEntityAvailable ] );

const startWithEmptyMenu = useCallback( () => {
replaceInnerBlocks( clientId, [] );
if ( navigationArea ) {
setAreaMenu( 0 );
}
setAttributes( {
navigationMenuId: undefined,
} );
setIsPlaceholderShown( true );
}, [ clientId ] );

// If the block has inner blocks, but no menu id, this was an older
// navigation block added before the block used a wp_navigation entity.
// Either this block was saved in the content or inserted by a pattern.
Expand All @@ -306,6 +317,23 @@ function Navigation( {
);
}

// Show a warning if the selected menu is no longer available.
// TODO - the user should be able to select a new one?
if ( navigationMenuId && isNavigationMenuMissing ) {
return (
<div { ...blockProps }>
<Warning>
{ __(
'Navigation menu has been deleted or is unavailable. '
) }
<Button onClick={ startWithEmptyMenu } variant="link">
{ __( 'Create a new menu?' ) }
</Button>
</Warning>
</div>
);
}
Comment on lines +322 to +335
Copy link
Contributor

Choose a reason for hiding this comment

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

This was removed in #36507, I'm not sure why it made a reappearance here.


if ( isEntityAvailable && hasAlreadyRendered ) {
return (
<div { ...blockProps }>
Expand Down Expand Up @@ -341,26 +369,13 @@ function Navigation( {
setNavigationMenuId( id );
onClose();
} }
onCreateNew={ () => {
if ( navigationArea ) {
setAreaMenu( 0 );
}
setAttributes( {
navigationMenuId: undefined,
} );
setIsPlaceholderShown( true );
} }
onCreateNew={ startWithEmptyMenu }
/>
) }
</ToolbarDropdownMenu>
</ToolbarGroup>
) }
<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
{ isDraftNavigationMenu && (
<ToolbarGroup>
<NavigationMenuPublishButton />
</ToolbarGroup>
) }
</BlockControls>
{ listViewModal }
<InspectorControls>
Expand Down Expand Up @@ -480,17 +495,20 @@ function Navigation( {
</InspectorControls>
) }
<nav { ...blockProps }>
{ ! isEntityAvailable && isPlaceholderShown && (
{ isPlaceholderShown && (
<PlaceholderComponent
onFinish={ ( post ) => {
setIsPlaceholderShown( false );
setNavigationMenuId( post.id );
if ( post ) {
setNavigationMenuId( post.id );
}
selectBlock( clientId );
} }
canSwitchNavigationMenu={ canSwitchNavigationMenu }
hasResolvedNavigationMenus={
hasResolvedNavigationMenus
}
clientId={ clientId }
/>
) }
{ ! isEntityAvailable && ! isPlaceholderShown && (
Expand Down
69 changes: 0 additions & 69 deletions packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
View file
Open in desktop

This file was deleted.

57 changes: 0 additions & 57 deletions packages/block-library/src/navigation/edit/navigation-menu-publish-button.js
View file
Open in desktop

This file was deleted.

78 changes: 16 additions & 62 deletions packages/block-library/src/navigation/edit/placeholder/index.js
View file
Open in desktop
@@ -1,16 +1,14 @@
/**
* WordPress dependencies
*/
import { serialize, createBlock } from '@wordpress/blocks';
import { createBlock } from '@wordpress/blocks';
import {
Placeholder,
Button,
DropdownMenu,
MenuGroup,
MenuItem,
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useDispatch } from '@wordpress/data';
import { useCallback, useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { navigation, Icon } from '@wordpress/icons';
Expand All @@ -23,8 +21,8 @@ import { decodeEntities } from '@wordpress/html-entities';
import useNavigationEntities from '../../use-navigation-entities';
import PlaceholderPreview from './placeholder-preview';
import menuItemsToBlocks from '../../menu-items-to-blocks';
import NavigationMenuNameModal from '../navigation-menu-name-modal';
import useNavigationMenu from '../../use-navigation-menu';
import useCreateNavigationMenu from '../use-create-navigation-menu';

const ExistingMenusDropdown = ( {
canSwitchNavigationMenu,
Expand Down Expand Up @@ -90,51 +88,25 @@ const ExistingMenusDropdown = ( {
};

export default function NavigationPlaceholder( {
clientId,
onFinish,
canSwitchNavigationMenu,
hasResolvedNavigationMenus,
} ) {
const [ selectedMenu, setSelectedMenu ] = useState();

const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );

const [ menuName, setMenuName ] = useState( '' );
const createNavigationMenu = useCreateNavigationMenu( clientId );

const [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(
false
);

const [ createEmpty, setCreateEmpty ] = useState( false );

const { saveEntityRecord } = useDispatch( coreStore );

// This callback uses data from the two placeholder steps and only creates
// a new navigation menu when the user completes the final step.
const createNavigationMenu = useCallback(
async ( title = __( 'Untitled Navigation Menu' ), blocks = [] ) => {
const record = {
title,
content: serialize( blocks ),
status: 'publish',
};

const navigationMenu = await saveEntityRecord(
'postType',
'wp_navigation',
record
);

return navigationMenu;
},
[ serialize, saveEntityRecord ]
);

const onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => {
const onFinishMenuCreation = async (
blocks,
navigationMenuTitle = null
) => {
const navigationMenu = await createNavigationMenu(
navigationMenuTitle,
blocks
);
onFinish( navigationMenu );
onFinish( navigationMenu, blocks );
};

const {
Expand All @@ -152,7 +124,7 @@ export default function NavigationPlaceholder( {
const createFromMenu = useCallback(
( name ) => {
const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
onFinishMenuCreation( name, blocks );
onFinishMenuCreation( blocks, name );
},
[ menuItems, menuItemsToBlocks, onFinish ]
);
Expand All @@ -170,14 +142,13 @@ export default function NavigationPlaceholder( {
setMenuName( name );
};

const onCreateEmptyMenu = ( name ) => {
onFinishMenuCreation( name, [] );
const onCreateEmptyMenu = () => {
onFinishMenuCreation( [] );
};

const onCreateAllPages = ( name ) => {
const onCreateAllPages = () => {
const block = [ createBlock( 'core/page-list' ) ];
onFinishMenuCreation( name, block );
setIsNewMenuModalVisible( true );
onFinishMenuCreation( block );
};

useEffect( () => {
Expand Down Expand Up @@ -225,10 +196,7 @@ export default function NavigationPlaceholder( {
<>
<Button
variant="tertiary"
onClick={ () => {
setIsNewMenuModalVisible( true );
setCreateEmpty( false );
} }
onClick={ onCreateAllPages }
>
{ __( 'Add all pages' ) }
</Button>
Expand All @@ -237,28 +205,14 @@ export default function NavigationPlaceholder( {
) : undefined }
<Button
variant="tertiary"
onClick={ () => {
setIsNewMenuModalVisible( true );
setCreateEmpty( true );
} }
onClick={ onCreateEmptyMenu }
>
{ __( 'Start empty' ) }
</Button>
</div>
</div>
</Placeholder>
) }
{ isNewMenuModalVisible && (
<NavigationMenuNameModal
title={ __( 'Create your new navigation menu' ) }
onRequestClose={ () => {
setIsNewMenuModalVisible( false );
} }
onFinish={
createEmpty ? onCreateEmptyMenu : onCreateAllPages
}
/>
) }
</>
);
}