Nav menu item enhancements: display toolbar and remove dropdown (#17986)

* Display toolbar and remove dropdown from menu item * Fixes block toolbar misalignment on IE. * Replace destination and deal with keypresses. * Update fixture. * Keydown management and attempt at close on blur. * Add definitive menu item icon. * Fix label/input styling. * Clean up styles after rebase. * Refactor stop propagation . * Remove duplicate dependency comments * Navigation Block: Rename 'destination' to 'url' in server-side code
WordPress · Nov 4, 2019 · 8a92171 · 8a92171
1 parent 16d6da2
commit 8a92171
Show file tree

Hide file tree

Showing 14 changed files with 117 additions and 215 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -49,6 +49,8 @@
 .block-editor-block-toolbar__slot {
 	// Required for IE11.
 	display: inline-block;
+	// Fix for toolbar button misalignment on IE11
+	line-height: 0;
 
 	// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
 	@supports (position: sticky) {

diff --git a/packages/block-library/src/navigation-menu-item/block.json b/packages/block-library/src/navigation-menu-item/block.json
@@ -5,9 +5,6 @@
 		"label": {
 			"type": "string"
 		},
-		"destination": {
-			"type": "string"
-		},
 		"nofollow": {
 			"type": "boolean",
 			"default": false
@@ -21,6 +18,9 @@
 		"opensInNewTab": {
 			"type": "boolean",
 			"default": false
+		},
+		"url": {
+			"type": "string"
 		}
 	}
 }
diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js
@@ -1,97 +1,140 @@
 /**
  * External dependencies
  */
-import { invoke } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import {
-	Dropdown,
 	ExternalLink,
-	IconButton,
 	PanelBody,
 	TextareaControl,
 	TextControl,
+	Toolbar,
 	ToggleControl,
+	ToolbarButton,
 } from '@wordpress/components';
+import {
+	LEFT,
+	RIGHT,
+	UP,
+	DOWN,
+	BACKSPACE,
+	ENTER,
+} from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
+	BlockControls,
 	InnerBlocks,
 	InspectorControls,
-	PlainText,
+	URLPopover,
 } from '@wordpress/block-editor';
 import {
 	Fragment,
-	useCallback,
 	useRef,
+	useState,
 } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import MenuItemActions from './menu-item-actions';
-const POPOVER_PROPS = { noArrow: true };
-
 function NavigationMenuItemEdit( {
 	attributes,
-	clientId,
 	isSelected,
 	isParentOfSelectedBlock,
 	setAttributes,
 } ) {
 	const plainTextRef = useRef( null );
-	const onEditLableClicked = useCallback(
-		( onClose ) => () => {
-			onClose();
-			invoke( plainTextRef, [ 'current', 'textarea', 'focus' ] );
-		},
-		[ plainTextRef ]
-	);
+	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	const [ isEditingLink, setIsEditingLink ] = useState( false );
+	const [ urlInput, setUrlInput ] = useState( null );
+
+	const inputValue = urlInput !== null ? urlInput : url;
+
+	const onKeyDown = ( event ) => {
+		if ( [ LEFT, DOWN, RIGHT, UP, BACKSPACE, ENTER ].indexOf( event.keyCode ) > -1 ) {
+			// Stop the key event from propagating up to ObserveTyping.startTypingInTextField.
+			event.stopPropagation();
+		}
+	};
+
+	const closeURLPopover = () => {
+		setIsEditingLink( false );
+		setUrlInput( null );
+		setIsLinkOpen( false );
+	};
+
+	const autocompleteRef = useRef( null );
+
+	const onFocusOutside = ( event ) => {
+		const autocompleteElement = autocompleteRef.current;
+		if ( autocompleteElement && autocompleteElement.contains( event.target ) ) {
+			return;
+		}
+		closeURLPopover();
+	};
+
+	const stopPropagation = ( event ) => {
+		event.stopPropagation();
+	};
+
+	const { label, url } = attributes;
 	let content;
 	if ( isSelected ) {
 		content = (
-			<div className="wp-block-navigation-menu-item__edit-container">
-				<PlainText
-					ref={ plainTextRef }
-					className="wp-block-navigation-menu-item__field"
-					value={ attributes.label }
-					onChange={ ( label ) => setAttributes( { label } ) }
-					aria-label={ __( 'Navigation Label' ) }
-					maxRows={ 1 }
-				/>
-				<Dropdown
-					contentClassName="wp-block-navigation-menu-item__dropdown-content"
-					position="bottom left"
-					popoverProps={ POPOVER_PROPS }
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<IconButton
-							icon={ isOpen ? 'arrow-up-alt2' : 'arrow-down-alt2' }
-							label={ __( 'More options' ) }
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-						/>
-					) }
-					renderContent={ ( { onClose } ) => (
-						<MenuItemActions
-							clientId={ clientId }
-							destination={ attributes.destination }
-							onEditLableClicked={ onEditLableClicked( onClose ) }
-						/>
-					) }
-				/>
-			</div>
+			<TextControl
+				ref={ plainTextRef }
+				className="wp-block-navigation-menu-item__field"
+				value={ label }
+				onChange={ ( labelValue ) => setAttributes( { label: labelValue } ) }
+				label={ __( 'Navigation Label' ) }
+				hideLabelFromVision={ true }
+			/>
 		);
 	} else {
 		content = <div className="wp-block-navigation-menu-item__container">
-			{ attributes.label }
+			{ label }
 		</div>;
 	}
 
 	return (
 		<Fragment>
+			<BlockControls>
+				<Toolbar>
+					<ToolbarButton
+						name="link"
+						icon="admin-links"
+						title={ __( 'Link' ) }
+						onClick={ () => setIsLinkOpen( ! isLinkOpen ) }
+					/>
+					{ isLinkOpen &&
+					<>
+						<URLPopover
+							className="wp-block-navigation-menu-item__inline-link-input"
+							onClose={ closeURLPopover }
+							onFocusOutside={ onFocusOutside }
+						>
+							{ ( ! url || isEditingLink ) &&
+							<URLPopover.LinkEditor
+								value={ inputValue }
+								onChangeInputValue={ setUrlInput }
+								onKeyPress={ stopPropagation }
+								onKeyDown={ onKeyDown }
+								onSubmit={ ( event ) => event.preventDefault() }
+								autocompleteRef={ autocompleteRef }
+							/>
+							}
+							{ ( url && ! isEditingLink ) &&
+								<URLPopover.LinkViewer
+									onKeyPress={ stopPropagation }
+									url={ url }
+								/>
+							}
+
+						</URLPopover>
+					</>
+					}
+				</Toolbar>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody
 					title={ __( 'Menu Settings' ) }

diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss
@@ -1,41 +1,14 @@
-$menu-label-field-width: 140px;
-
-.wp-block-navigation-menu-item__edit-container {
-	display: grid;
-	grid-auto-columns: min-content;
-	grid-auto-flow: column;
-	align-items: center;
-	white-space: nowrap;
-	border: 1px solid $light-gray-500;
-	// two pixes comes from two times one pixel border
-	width: $menu-label-field-width + $icon-button-size + 2px;
-	padding-left: 1px;
-}
-
-.wp-block-navigation-menu-item__edit-container .wp-block-navigation-menu-item__field {
-	border-right: 1px solid $light-gray-500 !important;
-	width: $menu-label-field-width;
-	border: none;
+.wp-block-navigation-menu-item__field .components-text-control__input.components-text-control__input,
+.wp-block-navigation-menu-item__container {
 	border-radius: 0;
-	padding-left: $grid-size-large;
-
-	min-height: $icon-button-size - 1px;
-	line-height: $icon-button-size - 1px;
-
-	&,
-	&:focus {
-		color: $dark-gray-500;
-	}
-}
-
-.wp-block-navigation-menu-item {
+	padding: $block-padding;
 	font-family: $editor-font;
 	font-weight: bold;
 	font-size: $text-editor-font-size;
+	background-color: var(--background-color-menu-link);
+	color: var(--color-menu-link);
 
-	.wp-block-navigation-menu-item__container,
-	&.is-editing .editor-plain-text {
-		background-color: var(--background-color-menu-link);
+	&:focus {
 		color: var(--color-menu-link);
 	}
 }
@@ -61,10 +34,6 @@ $menu-label-field-width: 140px;
 }
 
 .wp-block-navigation-menu .block-editor-block-list__block[data-type="core/navigation-menu-item"] {
-	& > .block-editor-block-list__block-edit > div[role="toolbar"] {
-		display: none;
-	}
-
 	& > .block-editor-block-list__insertion-point {
 		display: none;
 	}

diff --git a/packages/block-library/src/navigation-menu-item/index.js b/packages/block-library/src/navigation-menu-item/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-
+import { Path, SVG } from '@wordpress/components';
 /**
  * Internal dependencies
  */
@@ -18,7 +18,7 @@ export const settings = {
 
 	parent: [ 'core/navigation-menu' ],
 
-	icon: 'admin-links',
+	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>,
 
 	description: __( 'Add a page, link, or other item to your Navigation Menu.' ),