Navigation: Drop menu suffix

lib/blocks.php

@@ -46,7 +46,7 @@ function gutenberg_reregister_core_block_types() {
 		'latest-comments.php' => 'core/latest-comments',
 		'latest-posts.php'    => 'core/latest-posts',
 		'legacy-widget.php'   => 'core/legacy-widget',
-		'navigation-menu.php' => 'core/navigation-menu',
+		'navigation.php'      => 'core/navigation',
 		'rss.php'             => 'core/rss',
 		'shortcode.php'       => 'core/shortcode',
 		'search.php'          => 'core/search',

packages/block-library/src/editor.scss

@@ -18,8 +18,8 @@
 @import "./legacy-widget/editor.scss";
 @import "./media-text/editor.scss";
 @import "./more/editor.scss";
+@import "./navigation/editor.scss";
 @import "./navigation-link/editor.scss";
-@import "./navigation-menu/editor.scss";
 @import "./nextpage/editor.scss";
 @import "./paragraph/editor.scss";
 @import "./pullquote/editor.scss";

packages/block-library/src/index.js

@@ -34,8 +34,8 @@ import * as embed from './embed';
 import * as file from './file';
 import * as html from './html';
 import * as mediaText from './media-text';
+import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
-import * as navigationMenu from './navigation-menu';
 import * as latestComments from './latest-comments';
 import * as latestPosts from './latest-posts';
 import * as legacyWidget from './legacy-widget';
@@ -178,7 +178,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 
 				;[
 				__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
-				__experimentalEnableMenuBlock ? navigationMenu : null,
+				__experimentalEnableMenuBlock ? navigation : null,
 				__experimentalEnableMenuBlock ? navigationLink : null,
 				socialLinks,
 				...socialLink.sites,

packages/block-library/src/navigation-link/editor.scss

@@ -1,5 +1,5 @@
 
-// Normalize menu items and edit containers, to look mostly the same.
+// Normalize navigation link and edit containers, to look mostly the same.
 .wp-block-navigation-link__field .components-text-control__input.components-text-control__input,
 .wp-block-navigation-link__container {
 	border-radius: 0;
@@ -12,13 +12,13 @@
 	display: flex;
 	white-space: nowrap;
 
-	// Compensate for menu item base padding.
+	// Compensate for navigation link base padding.
 	margin-left: -$grid-size;
 
 	.wp-block-navigation-link__content {
 		margin-right: $grid-size;
 
-		// This should match the padding of the menu item.
+		// This should match the padding of the navigation link.
 		padding: 0 $grid-size;
 
 		// This make it look like an input field.
@@ -75,7 +75,7 @@
 	padding: $grid-size 0;
 }
 
-.wp-block-navigation-menu .block-editor-block-list__block[data-type="core/navigation-link"] {
+.wp-block-navigation .block-editor-block-list__block[data-type="core/navigation-link"] {
 	& > .block-editor-block-list__insertion-point {
 		display: none;
 	}

packages/block-library/src/navigation-link/index.js

@@ -16,7 +16,7 @@ export { metadata, name };
 export const settings = {
 	title: __( 'Navigation Link' ),
 
-	parent: [ 'core/navigation-menu' ],
+	parent: [ 'core/navigation' ],
 
 	icon: <SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24"><Path d="M12 7.27l4.28 10.43-3.47-1.53-.81-.36-.81.36-3.47 1.53L12 7.27M12 2L4.5 20.29l.71.71L12 18l6.79 3 .71-.71L12 2z" /></SVG>,
 

packages/block-library/src/navigation-menu/edit.js → packages/block-library/src/navigation/edit.js

@@ -33,7 +33,7 @@ import useBlockNavigator from './use-block-navigator';
 import BlockNavigationList from './block-navigation-list';
 import BlockColorsStyleSelector from './block-colors-selector';
 
-function NavigationMenu( {
+function Navigation( {
 	attributes,
 	clientId,
 	pages,
@@ -53,8 +53,8 @@ function NavigationMenu( {
 	/* eslint-enable @wordpress/no-unused-vars-before-return */
 	const { navigatorToolbarButton, navigatorModal } = useBlockNavigator( clientId );
 
-	// Builds menu items from default Pages
-	const defaultPagesMenuItems = useMemo(
+	// Builds navigation links from default Pages.
+	const defaultPagesNavigationItems = useMemo(
 		() => {
 			if ( ! pages ) {
 				return null;
@@ -81,12 +81,12 @@ function NavigationMenu( {
 	//
 
 	const handleCreateEmpty = () => {
-		const emptyNavItemBlock = createBlock( 'core/navigation-link' );
-		updateNavItemBlocks( [ emptyNavItemBlock ] );
+		const emptyNavLinkBlock = createBlock( 'core/navigation-link' );
+		updateNavItemBlocks( [ emptyNavLinkBlock ] );
 	};
 
 	const handleCreateFromExistingPages = () => {
-		updateNavItemBlocks( defaultPagesMenuItems );
+		updateNavItemBlocks( defaultPagesNavigationItems );
 	};
 
 	const hasPages = hasResolvedPages && pages && pages.length;
@@ -100,7 +100,7 @@ function NavigationMenu( {
 				<InspectorControls>
 					{ hasResolvedPages && (
 						<PanelBody
-							title={ __( 'Menu Settings' ) }
+							title={ __( 'Navigation Settings' ) }
 						>
 							<CheckboxControl
 								value={ attributes.automaticallyAdd }
@@ -109,21 +109,21 @@ function NavigationMenu( {
 									handleCreateFromExistingPages();
 								} }
 								label={ __( 'Automatically add new pages' ) }
-								help={ __( 'Automatically add new top level pages to this menu.' ) }
+								help={ __( 'Automatically add new top level pages to this navigation.' ) }
 							/>
 						</PanelBody>
 					) }
 				</InspectorControls>
 				<Placeholder
-					className="wp-block-navigation-menu-placeholder"
+					className="wp-block-navigation-placeholder"
 					icon="menu"
-					label={ __( 'Navigation Menu' ) }
-					instructions={ __( 'Create a Menu from all existing pages, or create an empty one.' ) }
+					label={ __( 'Navigation' ) }
+					instructions={ __( 'Create a Navigation from all existing pages, or create an empty one.' ) }
 				>
-					<div className="wp-block-navigation-menu-placeholder__buttons">
+					<div className="wp-block-navigation-placeholder__buttons">
 						<Button
 							isDefault
-							className="wp-block-navigation-menu-placeholder__button"
+							className="wp-block-navigation-placeholder__button"
 							onClick={ handleCreateFromExistingPages }
 							disabled={ ! hasPages }
 						>
@@ -132,7 +132,7 @@ function NavigationMenu( {
 
 						<Button
 							isLink
-							className="wp-block-navigation-menu-placeholder__button"
+							className="wp-block-navigation-placeholder__button"
 							onClick={ handleCreateEmpty }
 						>
 							{ __( 'Create empty' ) }
@@ -159,13 +159,13 @@ function NavigationMenu( {
 			<InspectorControls>
 				{ hasPages && (
 					<PanelBody
-						title={ __( 'Menu Settings' ) }
+						title={ __( 'Navigation Settings' ) }
 					>
 						<CheckboxControl
 							value={ attributes.automaticallyAdd }
 							onChange={ ( automaticallyAdd ) => setAttributes( { automaticallyAdd } ) }
 							label={ __( 'Automatically add new pages' ) }
-							help={ __( 'Automatically add new top level pages to this menu.' ) }
+							help={ __( 'Automatically add new top level pages to this navigation.' ) }
 						/>
 					</PanelBody>
 				) }
@@ -176,7 +176,7 @@ function NavigationMenu( {
 				</PanelBody>
 			</InspectorControls>
 			<TextColor>
-				<div className="wp-block-navigation-menu">
+				<div className="wp-block-navigation">
 					{ ! hasExistingNavItems && isRequestingPages && <><Spinner /> { __( 'Loading Navigation…' ) } </> }
 
 					<InnerBlocks
@@ -194,7 +194,6 @@ function NavigationMenu( {
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
 		const innerBlocks = select( 'core/block-editor' ).getBlocks( clientId );
-		const hasExistingNavItems = !! innerBlocks.length;
 
 		const filterDefaultPages = {
 			parent: 0,
@@ -205,7 +204,7 @@ export default compose( [
 		const pagesSelect = [ 'core', 'getEntityRecords', [ 'postType', 'page', filterDefaultPages ] ];
 
 		return {
-			hasExistingNavItems,
+			hasExistingNavItems: !! innerBlocks.length,
 			pages: select( 'core' ).getEntityRecords( 'postType', 'page', filterDefaultPages ),
 			isRequestingPages: select( 'core/data' ).isResolving( ...pagesSelect ),
 			hasResolvedPages: select( 'core/data' ).hasFinishedResolution( ...pagesSelect ),
@@ -218,4 +217,4 @@ export default compose( [
 			},
 		};
 	} ),
-] )( NavigationMenu );
+] )( Navigation );

packages/block-library/src/navigation-menu/editor.scss → packages/block-library/src/navigation/editor.scss

@@ -1,49 +1,49 @@
 // Reduce the paddings, margins, and UI of inner-blocks.
 // @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block.
 // When that happens, leverage that instead of the following overrides.
-[data-type="core/navigation-menu"] {
+[data-type="core/navigation"] {
 	// 1. Reset margins on immediate innerblocks container.
-	.wp-block-navigation-menu .block-editor-inner-blocks > .block-editor-block-list__layout {
+	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout {
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	// 2. Remove paddings on subsequent immediate children.
-	.wp-block-navigation-menu .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
+	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
 		width: auto;
 		padding-left: 0;
 		padding-right: 0;
 		margin-left: 0; // something
 	}
 
 	// 3. Remove margins on subsequent Edit container.
-	.wp-block-navigation-menu .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
+	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit {
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	// 4. Remove vertical margins on subsequent block container.
-	.wp-block-navigation-menu .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > .block-editor-block-list__block-edit > [data-block] {
+	.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > .block-editor-block-list__block-edit > [data-block] {
 		margin-top: 0;
 		margin-bottom: 0;
 	}
 
 	// Remove the dashed outlines for child blocks.
-	&.is-hovered .wp-block-navigation-menu .block-editor-block-list__block-edit::before,
-	&.is-selected .wp-block-navigation-menu .block-editor-block-list__block-edit::before,
-	&.has-child-selected .wp-block-navigation-menu .block-editor-block-list__block-edit::before {
+	&.is-hovered .wp-block-navigation .block-editor-block-list__block-edit::before,
+	&.is-selected .wp-block-navigation .block-editor-block-list__block-edit::before,
+	&.has-child-selected .wp-block-navigation .block-editor-block-list__block-edit::before {
 		border-color: transparent !important; // !important used to keep the selector from growing any more complex.
 	}
 
 	// Hide the breadcrumb.
 	// Hide the sibling inserter.
-	.wp-block-navigation-menu .block-editor-block-list__insertion-point,
-	.wp-block-navigation-menu .block-editor-block-list__breadcrumb {
+	.wp-block-navigation .block-editor-block-list__insertion-point,
+	.wp-block-navigation .block-editor-block-list__breadcrumb {
 		display: none;
 	}
 
 	// Polish the Appender.
-	.wp-block-navigation-menu .block-list-appender {
+	.wp-block-navigation .block-list-appender {
 		margin: 0;
 
 		.block-editor-button-block-appender {
@@ -54,20 +54,20 @@
 	}
 }
 
-.wp-block-navigation-menu .block-editor-block-list__layout,
-.wp-block-navigation-menu {
+.wp-block-navigation .block-editor-block-list__layout,
+.wp-block-navigation {
 	display: flex;
 	white-space: nowrap;
 }
 
-.wp-block-navigation-menu__inserter-content {
+.wp-block-navigation__inserter-content {
 	padding: $grid-size-large;
 }
 
 /*
- * Adjust Navigation Item with Menu.
+ * Adjust Navigation Item.
  */
-.wp-block-navigation-menu .wp-block-navigation-link {
+.wp-block-navigation .wp-block-navigation-link {
 	margin-right: $grid-size;
 	margin-left: $grid-size;
 
@@ -76,7 +76,7 @@
 		margin: $grid-size;
 	}
 
-	// Provide a base menu item margin.
+	// Provide a base navigation item margin.
 	// This should be the same inside the field,
 	// and the edit container should compensate.
 	// This is to make sure the edit and view are the same.

packages/block-library/src/navigation-menu/index.js → packages/block-library/src/navigation/index.js

@@ -9,14 +9,14 @@ import { __ } from '@wordpress/i18n';
 import edit from './edit';
 import save from './save';
 
-export const name = 'core/navigation-menu';
+export const name = 'core/navigation';
 
 export const settings = {
 	title: __( 'Navigation' ),
 
 	icon: 'menu',
 
-	description: __( 'Add a navigation menu to your site.' ),
+	description: __( 'Add a navigation block to your site.' ),
 
 	keywords: [ __( 'menu' ), __( 'navigation' ), __( 'links' ) ],