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

Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks #36024

Merged
merged 4 commits into from
Nov 3, 2021
Merged

Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks #36024

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
86d3e43
Add automatic wp_navigation creation
talldan Oct 28, 2021
cdaef53
Remove unused file
talldan Nov 2, 2021
c8af4c5
Remove unusued useState
talldan Nov 2, 2021
5e7f9cd
Update animations
talldan Nov 2, 2021
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
64 changes: 47 additions & 17 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 @@ -38,10 +38,12 @@ import { __ } from '@wordpress/i18n';
import useListViewModal from './use-list-view-modal';
import useNavigationMenu from '../use-navigation-menu';
import Placeholder from './placeholder';
import PlaceholderPreview from './placeholder/placeholder-preview';
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 @@ -75,8 +77,8 @@ function detectColors( colorsDetectionElement, setColor, setBackground ) {
function Navigation( {
attributes,
setAttributes,
isSelected,
clientId,
isSelected,
className,
backgroundColor,
setBackgroundColor,
Expand Down Expand Up @@ -108,13 +110,26 @@ function Navigation( {
`navigationMenu/${ navigationMenuId }`
);

const innerBlocks = useSelect(
( select ) => select( blockEditorStore ).getBlocks( clientId ),
const { innerBlocks, isInnerBlockSelected } = useSelect(
( select ) => {
const { getBlocks, hasSelectedInnerBlock } = select(
blockEditorStore
);
return {
innerBlocks: getBlocks( clientId ),
isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
};
},
[ clientId ]
);
const hasExistingNavItems = !! innerBlocks.length;
const { replaceInnerBlocks, selectBlock } = useDispatch( blockEditorStore );

const [
hasSavedUnsavedInnerBlocks,
setHasSavedUnsavedInnerBlocks,
] = useState( false );

const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
! hasExistingNavItems
);
Expand All @@ -127,10 +142,13 @@ function Navigation( {
isNavigationMenuResolved,
isNavigationMenuMissing,
canSwitchNavigationMenu,
hasResolvedNavigationMenu,
hasResolvedNavigationMenus,
navigationMenus,
navigationMenu,
} = useNavigationMenu( navigationMenuId );

const navRef = useRef();
const isDraftNavigationMenu = navigationMenu?.status === 'draft';

const { listViewToolbarButton, listViewModal } = useListViewModal(
clientId
Expand Down Expand Up @@ -203,19 +221,23 @@ function Navigation( {

// 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.
// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
// with a prompt to 'save'.
const hasUnsavedBlocks =
hasExistingNavItems && navigationMenuId === undefined;
// that automatically saves the menu.
const hasUnsavedBlocks = hasExistingNavItems && ! isEntityAvailable;
if ( hasUnsavedBlocks ) {
return (
<UnsavedInnerBlocks
blockProps={ blockProps }
blocks={ innerBlocks }
isSelected={ isSelected }
onSave={ ( post ) =>
setAttributes( { navigationMenuId: post.id } )
}
navigationMenus={ navigationMenus }
hasSelection={ isSelected || isInnerBlockSelected }
hasSavedUnsavedInnerBlocks={ hasSavedUnsavedInnerBlocks }
onSave={ ( post ) => {
setHasSavedUnsavedInnerBlocks( true );
Copy link
Contributor

Choose a reason for hiding this comment

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

Where do we reset the value of this flag? Aren't we supposed to reset it somewhere to "false"?

// Switch to using the wp_navigation entity.
setAttributes( { navigationMenuId: post.id } );
} }
/>
);
}
Expand Down Expand Up @@ -261,8 +283,8 @@ function Navigation( {
>
<RecursionProvider>
<BlockControls>
<ToolbarGroup>
{ isEntityAvailable && (
{ ! isDraftNavigationMenu && isEntityAvailable && (
<ToolbarGroup>
<ToolbarDropdownMenu
label={ __( 'Select Menu' ) }
text={ __( 'Select Menu' ) }
Expand All @@ -279,8 +301,8 @@ function Navigation( {
/>
) }
</ToolbarDropdownMenu>
) }
</ToolbarGroup>
</ToolbarGroup>
) }
{ hasItemJustificationControls && (
<JustifyToolbar
value={ itemsJustification }
Expand All @@ -295,6 +317,11 @@ function Navigation( {
/>
) }
<ToolbarGroup>{ listViewToolbarButton }</ToolbarGroup>
<ToolbarGroup>
{ isDraftNavigationMenu && (
<NavigationMenuPublishButton />
) }
</ToolbarGroup>
</BlockControls>
{ listViewModal }
<InspectorControls>
Expand Down Expand Up @@ -420,11 +447,14 @@ function Navigation( {
selectBlock( clientId );
} }
canSwitchNavigationMenu={ canSwitchNavigationMenu }
hasResolvedNavigationMenu={
hasResolvedNavigationMenu
hasResolvedNavigationMenus={
hasResolvedNavigationMenus
}
/>
) }
{ ! isEntityAvailable && ! isPlaceholderShown && (
<PlaceholderPreview isLoading />
) }
{ ! isPlaceholderShown && (
<ResponsiveWrapper
id={ clientId }
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/navigation/edit/navigation-menu-name-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ import { __ } from '@wordpress/i18n';

export default function NavigationMenuNameModal( {
title,
finishButtonText = __( 'Create' ),
onFinish,
onRequestClose,
value = '',
} ) {
const [ name, setName ] = useState( '' );
const [ name, setName ] = useState( value );

return (
<Modal
Expand Down Expand Up @@ -57,7 +59,7 @@ export default function NavigationMenuNameModal( {
disabled={ ! name.length }
aria-disabled={ ! name.length }
>
{ __( 'Create' ) }
{ finishButtonText }
</Button>
</FlexItem>
</Flex>
Expand Down
57 changes: 57 additions & 0 deletions packages/block-library/src/navigation/edit/navigation-menu-publish-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/**
* WordPress dependencies
*/
import { ToolbarButton } from '@wordpress/components';
import {
useEntityId,
useEntityProp,
store as coreStore,
} from '@wordpress/core-data';
import { useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import NavigationMenuNameModal from './navigation-menu-name-modal';

export default function NavigationMenuPublishButton() {
const [ isNameModalVisible, setIsNameModalVisible ] = useState( false );
const id = useEntityId( 'postType', 'wp_navigation' );
const [ navigationMenuTitle ] = useEntityProp(
'postType',
'wp_navigation',
'title'
);
const { editEntityRecord, saveEditedEntityRecord } = useDispatch(
coreStore
);

return (
<>
<ToolbarButton onClick={ () => setIsNameModalVisible( true ) }>
{ __( 'Save as' ) }
</ToolbarButton>
{ isNameModalVisible && (
<NavigationMenuNameModal
title={ __( 'Save your new navigation menu' ) }
value={ navigationMenuTitle }
onRequestClose={ () => setIsNameModalVisible( false ) }
finishButtonText={ __( 'Save' ) }
onFinish={ ( updatedTitle ) => {
editEntityRecord( 'postType', 'wp_navigation', id, {
title: updatedTitle,
status: 'publish',
} );
saveEditedEntityRecord(
'postType',
'wp_navigation',
id
);
} }
/>
) }
</>
);
}
6 changes: 3 additions & 3 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 @@ -88,7 +88,7 @@ const ExistingMenusDropdown = ( {
export default function NavigationPlaceholder( {
onFinish,
canSwitchNavigationMenu,
hasResolvedNavigationMenu,
hasResolvedNavigationMenus,
} ) {
const [ selectedMenu, setSelectedMenu ] = useState();

Expand Down Expand Up @@ -189,10 +189,10 @@ export default function NavigationPlaceholder( {

return (
<>
{ ( ! hasResolvedNavigationMenu || isStillLoading ) && (
{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
<PlaceholderPreview isLoading />
) }
{ hasResolvedNavigationMenu && ! isStillLoading && (
{ hasResolvedNavigationMenus && ! isStillLoading && (
<Placeholder className="wp-block-navigation-placeholder">
<PlaceholderPreview />
<div className="wp-block-navigation-placeholder__controls">
Expand Down
Loading