New block: Custom Navigation Menu

blocks/library/index.js

@@ -23,6 +23,7 @@ import * as html from './html';
 import * as latestPosts from './latest-posts';
 import * as list from './list';
 import * as more from './more';
+import * as navigationMenu from './navigation-menu';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
@@ -79,6 +80,7 @@ export const registerCoreBlocks = () => {
 		html,
 		latestPosts,
 		more,
+		navigationMenu,
 		preformatted,
 		pullquote,
 		reusableBlock,

blocks/library/navigation-menu/block.js

@@ -0,0 +1,215 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { filter, forEach, isEmpty, isUndefined } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import {
+	Button,
+	Placeholder,
+	Toolbar,
+	SelectControl,
+	Spinner,
+	withAPIData,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+import BlockControls from '../../block-controls';
+import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import InspectorControls from '../../inspector-controls';
+import MenuItem from './item';
+import MenuPlaceholder from './placeholder';
+
+function getOptionsFromMenu( menus, selected ) {
+	if ( ! menus ) {
+		return [];
+	}
+
+	const options = menus.map( item => ( {
+		value: item.id,
+		label: item.name,
+	} ) );
+	if ( ! selected ) {
+		options.unshift( { value: '', label: __( 'Select' ) } );
+	}
+	return options;
+}
+
+function sortMenuItems( items ) {
+	return [ ...items ].sort( ( a, b ) => {
+		return a.menu_order - b.menu_order;
+	} );
+}
+
+function getMenuChildren( list, data ) {
+	forEach( list, function( item, i ) {
+		const children = filter( data, { menu_item_parent: item.id } );
+		list[ i ].children = getMenuChildren( children, data );
+	} );
+	return sortMenuItems( list );
+}
+
+function getMenuWithChildren( data ) {
+	const items = filter( data, { menu_item_parent: 0 } );
+	const sorted = sortMenuItems( items );
+	return getMenuChildren( sorted, data );
+}
+
+class NavigationMenuBlock extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.setMenu = this.setMenu.bind( this );
+		this.renderMenu = this.renderMenu.bind( this );
+		this.renderMenuLevel = this.renderMenuLevel.bind( this );
+	}
+
+	setMenu( value ) {
+		const { setAttributes } = this.props;
+		if ( value ) {
+			setAttributes( { selected: value } );
+		}
+	}
+
+	renderMenuLevel( items ) {
+		if ( ! items || items.length < 1 ) {
+			return null;
+		}
+
+		const { layout } = this.props.attributes;
+		const isTopLevel = items[ 0 ].menu_item_parent === 0;
+		const isHorizontal = layout === 'horizontal';
+		const className = classnames( {
+			[ this.props.className ]: isTopLevel,
+			'is-horizontal': isHorizontal,
+			'is-vertical': ! isHorizontal,
+		} );
+
+		return (
+			<ul
+				key="navigation-menu"
+				className={ className }
+			>
+				{ items.map( ( item, i ) => {
+					return (
+						<MenuItem key={ i } item={ item }>
+							{ item.children && this.renderMenuLevel( item.children ) }
+						</MenuItem>
+					);
+				} ) }
+			</ul>
+		);
+	}
+
+	renderMenu() {
+		const { data, isLoading } = this.props.items;
+
+		if ( isUndefined( data ) || isEmpty( data ) || isLoading ) {
+			return (
+				<Placeholder
+					key="navigation-menu"
+					icon="menu"
+					label={ __( 'Navigation Menu' ) }
+				>
+					{ ! Array.isArray( data ) ?
+						<Spinner /> :
+						<Button href="customize.php?autofocus[panel]=nav_menus" target="_blank">
+							{ __( 'No items found in this menu.' ) }
+						</Button>
+					}
+				</Placeholder>
+			);
+		}
+
+		const nestedData = getMenuWithChildren( data );
+		return this.renderMenuLevel( nestedData );
+	}
+
+	render() {
+		const { attributes, focus, setAttributes } = this.props;
+		const { align, layout, selected } = attributes;
+		const { data: menus, isLoading } = this.props.menus;
+
+		const menuSelectControl = (
+			<SelectControl
+				label={ __( 'Select an existing menu' ) }
+				value={ selected }
+				onChange={ this.setMenu }
+				options={ getOptionsFromMenu( menus, selected ) }
+			/>
+		);
+
+		const inspectorControls = focus && (
+			<InspectorControls key="inspector">
+				<h3>{ __( 'Menu Settings' ) }</h3>
+				{ ! isLoading && menuSelectControl }
+			</InspectorControls>
+		);
+
+		const layoutControls = [
+			{
+				icon: 'list-view',
+				title: __( 'Vertical View' ),
+				onClick: () => setAttributes( { layout: 'vertical' } ),
+				isActive: layout === 'vertical',
+			},
+			{
+				icon: 'grid-view',
+				title: __( 'Horizontal View' ),
+				onClick: () => setAttributes( { layout: 'horizontal' } ),
+				isActive: layout === 'horizontal',
+			},
+		];
+
+		let displayBlock = (
+			<MenuPlaceholder
+				key="navigation-menu"
+				menus={ menus }
+				selected={ false }
+				setMenu={ this.setMenu } >
+				{ menuSelectControl }
+			</MenuPlaceholder>
+		);
+
+		if ( !! selected ) {
+			displayBlock = this.renderMenu();
+		}
+
+		return [
+			inspectorControls,
+			focus && (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+						controls={ [ 'center', 'wide', 'full' ] }
+					/>
+					<Toolbar controls={ layoutControls } />
+				</BlockControls>
+			),
+			displayBlock,
+		];
+	}
+}
+
+export default withAPIData( props => {
+	const { selected } = props.attributes;
+	const queryString = selected ? `menus=${ selected }` : '';
+	const itemsUrl = selected ? `/wp/v2/menu-items?${ queryString }` : false;
+
+	return {
+		menus: '/wp/v2/menus',
+		items: itemsUrl,
+	};
+} )( NavigationMenuBlock );

blocks/library/navigation-menu/editor.scss

@@ -0,0 +1,24 @@
+.gutenberg .wp-block-navigation-menu {
+	padding-left: 2.5em;
+	&.is-vertical ul {
+		padding-left: 2.5em;
+	}
+	&.is-horizontal {
+		padding-left: 0;
+		ul {
+			border: 1px solid $light-gray-500;
+			border-top: none;
+			background: white;
+
+			ul {
+				border: none;
+			}
+
+		}
+	}
+}
+
+.gutenberg [data-align="full"] .wp-block-navigation-menu {
+	padding-left: 2em;
+	padding-right: 2em;
+}

blocks/library/navigation-menu/index.js

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+import './style.scss';
+import NavMenuBlock from './block';
+
+export const name = 'core/navigation-menu';
+
+export const settings = {
+	title: __( 'Navigation Menu' ),
+
+	description: __( 'Show a list of menu items.' ),
+
+	icon: 'menu',
+
+	category: 'widgets',
+
+	keywords: [ __( 'navigation menu' ) ],
+
+	supports: {
+		html: false,
+	},
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit: NavMenuBlock,
+
+	save() {
+		return null;
+	},
+};

blocks/library/navigation-menu/index.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Server-side rendering of the `core/navigation-menu` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/navigation-menu` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the post content with navigtion menu added.
+ */
+function gutenberg_render_block_core_navigation_menu( $attributes ) {
+
+	$menu_id = (int) $attributes['selected'];
+
+	if ( ! $menu_id ) {
+		return '';
+	}
+
+	$menu = wp_get_nav_menu_object( $menu_id );
+
+	if ( ! $menu ) {
+		return '';
+	}
+
+	$class = "wp-block-navigation-menu align{$attributes['align']}";
+	if ( isset( $attributes['layout'] ) && 'horizontal' === $attributes['layout'] ) {
+		$class .= ' is-horizontal';
+	}
+
+	return wp_nav_menu( array(
+		'menu' => $menu,
+		'menu_class' => $class,
+		'fallback_cb' => false,
+		'echo' => false,
+	) );
+}
+
+register_block_type( 'core/navigation-menu', array(
+	'attributes' => array(
+		'selected' => array(
+			'type' => 'int',
+		),
+		'layout'   => array(
+			'type'    => 'string',
+			'default' => 'vertical',
+		),
+		'align'    => array(
+			'type'    => 'string',
+			'default' => 'center',
+		),
+	),
+	'render_callback' => 'gutenberg_render_block_core_navigation_menu',
+) );

blocks/library/navigation-menu/item.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/utils';
+
+class MenuItem extends Component {
+	render() {
+		const { children, item } = this.props;
+		const classes = classnames( item.classes, {
+			'menu-item-has-children': !! children,
+		} );
+
+		return (
+			<li className={ classes }>
+				<a title={ item.title } rel={ item.xfn } href={ item.url } target="_blank">
+					{ decodeEntities( item.title.trim() ) || __( '(Untitled)' ) }
+				</a>
+				{ children }
+			</li>
+		);
+	}
+}
+
+export default MenuItem;