First pass at Navigation screen (#21036)

* First pass at Navigation screen

Adds a new Navigation screen, a new edit-navigation package, and a very
rough UI for editing menus using the Navigation block.

* Add explanatory comment

* Remove console logs

* Move inline styles to scss

Co-authored-by: Daniel Richards <[email protected]>

docs/manifest.json

@@ -1301,6 +1301,12 @@
 		"markdown_source": "../packages/e2e-tests/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/edit-navigation",
+		"slug": "packages-edit-navigation",
+		"markdown_source": "../packages/edit-navigation/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/edit-post",
 		"slug": "packages-edit-post",

gutenberg.php

@@ -54,6 +54,16 @@ function gutenberg_menu() {
 				'the_gutenberg_widgets'
 			);
 		}
+		if ( array_key_exists( 'gutenberg-navigation', get_option( 'gutenberg-experiments' ) ) ) {
+			add_submenu_page(
+				'gutenberg',
+				__( 'Navigation (beta)', 'gutenberg' ),
+				__( 'Navigation (beta)', 'gutenberg' ),
+				'edit_theme_options',
+				'gutenberg-navigation',
+				'gutenberg_navigation_page'
+			);
+		}
 		if ( array_key_exists( 'gutenberg-full-site-editing', get_option( 'gutenberg-experiments' ) ) ) {
 			add_submenu_page(
 				'gutenberg',

lib/client-assets.php

@@ -396,6 +396,15 @@ function gutenberg_register_packages_styles( &$styles ) {
 	);
 	$styles->add_data( 'wp-list-reusable-block', 'rtl', 'replace' );
 
+	gutenberg_override_style(
+		$styles,
+		'wp-edit-navigation',
+		gutenberg_url( 'build/edit-navigation/style.css' ),
+		array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ),
+		filemtime( gutenberg_dir_path() . 'build/edit-navigation/style.css' )
+	);
+	$styles->add_data( 'wp-edit-navigation', 'rtl', 'replace' );
+
 	gutenberg_override_style(
 		$styles,
 		'wp-edit-site',

lib/experiments-page.php

@@ -51,6 +51,17 @@ function gutenberg_initialize_experiments_settings() {
 			'id'    => 'gutenberg-widget-experiments',
 		)
 	);
+	add_settings_field(
+		'gutenberg-navigation',
+		__( 'Navigation', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Navigation screen', 'gutenberg' ),
+			'id'    => 'gutenberg-navigation',
+		)
+	);
 	add_settings_field(
 		'gutenberg-block-directory',
 		__( 'Block Directory', 'gutenberg' ),

lib/load.php

@@ -74,6 +74,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/demo.php';
 require dirname( __FILE__ ) . '/widgets.php';
 require dirname( __FILE__ ) . '/widgets-page.php';
+require dirname( __FILE__ ) . '/navigation-page.php';
 require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';
 require dirname( __FILE__ ) . '/edit-site-page.php';

lib/navigation-page.php

@@ -0,0 +1,101 @@
+<?php
+/**
+ * Bootstraping the Gutenberg Navigation page.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * The main entry point for the Gutenberg Navigation page.
+ *
+ * @since 7.8.0
+ */
+function gutenberg_navigation_page() {
+	?>
+	<div
+		id="navigation-editor"
+		class="edit-navigation"
+	>
+	</div>
+	<?php
+}
+
+/**
+ * Initialize the Gutenberg Navigation page.
+ *
+ * @since 7.8.0
+ *
+ * @param string $hook Page.
+ */
+function gutenberg_navigation_init( $hook ) {
+	if ( 'gutenberg_page_gutenberg-navigation' !== $hook ) {
+			return;
+	}
+
+	// Media settings.
+	$max_upload_size = wp_max_upload_size();
+	if ( ! $max_upload_size ) {
+		$max_upload_size = 0;
+	}
+
+	/** This filter is documented in wp-admin/includes/media.php */
+	$image_size_names = apply_filters(
+		'image_size_names_choose',
+		array(
+			'thumbnail' => __( 'Thumbnail', 'gutenberg' ),
+			'medium'    => __( 'Medium', 'gutenberg' ),
+			'large'     => __( 'Large', 'gutenberg' ),
+			'full'      => __( 'Full Size', 'gutenberg' ),
+		)
+	);
+
+	$available_image_sizes = array();
+	foreach ( $image_size_names as $image_size_slug => $image_size_name ) {
+		$available_image_sizes[] = array(
+			'slug' => $image_size_slug,
+			'name' => $image_size_name,
+		);
+	}
+
+	$settings = array(
+		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
+		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
+		'imageSizes'             => $available_image_sizes,
+		'isRTL'                  => is_rtl(),
+		'maxUploadFileSize'      => $max_upload_size,
+	);
+
+	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
+	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
+
+	if ( false !== $color_palette ) {
+		$settings['colors'] = $color_palette;
+	}
+
+	if ( false !== $font_sizes ) {
+		$settings['fontSizes'] = $font_sizes;
+	}
+
+	wp_add_inline_script(
+		'wp-edit-navigation',
+		sprintf(
+			'wp.domReady( function() {
+				wp.editNavigation.initialize( "navigation-editor", %s );
+			} );',
+			wp_json_encode( gutenberg_experiments_editor_settings( $settings ) )
+		)
+	);
+
+	// Preload server-registered block schemas.
+	wp_add_inline_script(
+		'wp-blocks',
+		'wp.blocks.unstable__bootstrapServerSideBlockDefinitions(' . wp_json_encode( get_block_editor_server_block_settings() ) . ');'
+	);
+
+	wp_enqueue_script( 'wp-edit-navigation' );
+	wp_enqueue_style( 'wp-edit-navigation' );
+	wp_enqueue_style( 'wp-block-library' );
+	wp_enqueue_script( 'wp-format-library' );
+	wp_enqueue_style( 'wp-format-library' );
+}
+add_action( 'admin_enqueue_scripts', 'gutenberg_navigation_init' );

package.json

@@ -38,6 +38,7 @@
 		"@wordpress/deprecated": "file:packages/deprecated",
 		"@wordpress/dom": "file:packages/dom",
 		"@wordpress/dom-ready": "file:packages/dom-ready",
+		"@wordpress/edit-navigation": "file:packages/edit-navigation",
 		"@wordpress/edit-post": "file:packages/edit-post",
 		"@wordpress/edit-site": "file:packages/edit-site",
 		"@wordpress/edit-widgets": "file:packages/edit-widgets",

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

@@ -277,6 +277,10 @@ function Navigation( {
 								className: 'wp-block-navigation__container',
 							} }
 							__experimentalCaptureToolbars={ true }
+							// Template lock set to false here so that the Nav
+							// Block on the experimental menus screen does not
+							// inherit templateLock={ 'all' }.
+							templateLock={ false }
 						/>
 					</Block.nav>
 				</BackgroundColor>

packages/core-data/src/entities.js

@@ -67,6 +67,27 @@ export const defaultEntities = [
 		plural: 'comments',
 		label: __( 'Comment' ),
 	},
+	{
+		name: 'menu',
+		kind: 'root',
+		baseURL: '/__experimental/menus',
+		plural: 'menus',
+		label: __( 'Menu' ),
+	},
+	{
+		name: 'menuItem',
+		kind: 'root',
+		baseURL: '/__experimental/menu-items',
+		plural: 'menuItems',
+		label: __( 'Menu Item' ),
+	},
+	{
+		name: 'menuLocation',
+		kind: 'root',
+		baseURL: '/__experimental/menu-locations',
+		plural: 'menuLocations',
+		label: __( 'Menu Location' ),
+	},
 ];
 
 export const kinds = [

packages/edit-navigation/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/edit-navigation/README.md

@@ -0,0 +1,5 @@
+- Package name
+- Package description
+- Installation details
+- Usage example
+- `Code is Poetry` logo (`<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>`)

packages/edit-navigation/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "@wordpress/edit-navigation",
+	"version": "1.0.0-beta.0",
+	"private": true,
+	"description": "Module for the Navigation page in WordPress.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/edit-navigation/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/edit-navigation"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@babel/runtime": "^7.8.3",
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/block-library": "file:../block-library",
+		"@wordpress/blocks": "file:../blocks",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/data": "file:../data",
+		"@wordpress/data-controls": "file:../data-controls",
+		"@wordpress/dom-ready": "file:../dom-ready",
+		"@wordpress/element": "file:../element",
+		"@wordpress/hooks": "file:../hooks",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/media-utils": "file:../media-utils",
+		"@wordpress/notices": "file:../notices",
+		"lodash": "^4.17.15",
+		"rememo": "^3.0.0"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/edit-navigation/src/components/layout/index.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	DropZoneProvider,
+	FocusReturnProvider,
+	Popover,
+	SlotFillProvider,
+	TabPanel,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import MenusEditor from '../menus-editor';
+import MenuLocationsEditor from '../menu-locations-editor';
+
+export default function Layout( { blockEditorSettings } ) {
+	return (
+		<>
+			<SlotFillProvider>
+				<DropZoneProvider>
+					<FocusReturnProvider>
+						{ /* <Notices /> */ }
+						<Popover.Slot name="block-toolbar" />
+						<TabPanel
+							tabs={ [
+								{
+									name: 'menus',
+									title: __( 'Edit Navigation' ),
+								},
+								{
+									name: 'menu-locations',
+									title: __( 'Manage Locations' ),
+								},
+							] }
+						>
+							{ ( tab ) => (
+								<>
+									{ tab.name === 'menus' && (
+										<MenusEditor
+											blockEditorSettings={
+												blockEditorSettings
+											}
+										/>
+									) }
+									{ tab.name === 'menu-locations' && (
+										<MenuLocationsEditor />
+									) }
+								</>
+							) }
+						</TabPanel>
+						<Popover.Slot />
+					</FocusReturnProvider>
+				</DropZoneProvider>
+			</SlotFillProvider>
+		</>
+	);
+}