diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index e83f34bc54ead..a6247b03d3177 100644
--- 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
index 915c63931cb2b..20b33eca1f4a0 100644
--- 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
index 90a80f41e2f69..4d2258d08eb16 100644
--- a/packages/block-library/src/navigation-menu-item/edit.js
+++ b/packages/block-library/src/navigation-menu-item/edit.js
@@ -1,7 +1,6 @@
/**
* External dependencies
*/
-import { invoke } from 'lodash';
import classnames from 'classnames';
/**
@@ -9,89 +8,133 @@ import classnames from 'classnames';
*/
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 = (
-
-
setAttributes( { label } ) }
- aria-label={ __( 'Navigation Label' ) }
- maxRows={ 1 }
- />
- (
-
- ) }
- renderContent={ ( { onClose } ) => (
-
- ) }
- />
-
+ setAttributes( { label: labelValue } ) }
+ label={ __( 'Navigation Label' ) }
+ hideLabelFromVision={ true }
+ />
);
} else {
content =
- { attributes.label }
+ { label }
;
}
return (
+
+
+ setIsLinkOpen( ! isLinkOpen ) }
+ />
+ { isLinkOpen &&
+ <>
+
+ { ( ! url || isEditingLink ) &&
+ event.preventDefault() }
+ autocompleteRef={ autocompleteRef }
+ />
+ }
+ { ( url && ! isEditingLink ) &&
+
+ }
+
+
+ >
+ }
+
+
.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
index b61f3699e12b5..9a51131a86b41 100644
--- 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: ,
description: __( 'Add a page, link, or other item to your Navigation Menu.' ),
diff --git a/packages/block-library/src/navigation-menu-item/menu-item-actions.js b/packages/block-library/src/navigation-menu-item/menu-item-actions.js
deleted file mode 100644
index 6e39036bab408..0000000000000
--- a/packages/block-library/src/navigation-menu-item/menu-item-actions.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
- MenuItem,
- NavigableMenu,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
-
-function MenuItemActions( {
- destination,
- moveLeft,
- moveRight,
- moveToEnd,
- moveToStart,
- onEditLableClicked,
- remove,
-} ) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-export default compose( [
- withDispatch( ( dispatch, { clientId }, { select } ) => {
- const {
- getBlockOrder,
- getBlockRootClientId,
- } = select( 'core/block-editor' );
- const parentID = getBlockRootClientId( clientId );
- const {
- moveBlocksDown,
- moveBlocksUp,
- moveBlockToPosition,
- removeBlocks,
- } = dispatch( 'core/block-editor' );
- return {
- moveToStart() {
- moveBlockToPosition( clientId, parentID, parentID, 0 );
- },
- moveRight() {
- moveBlocksDown( clientId, parentID );
- },
- moveLeft() {
- moveBlocksUp( clientId, parentID );
- },
- moveToEnd() {
- moveBlockToPosition(
- clientId,
- parentID,
- parentID,
- getBlockOrder( parentID ).length - 1
- );
- },
- remove() {
- removeBlocks( clientId );
- },
- };
- } ),
-] )( MenuItemActions );
diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js
index 3fc18a43b2259..074d683933302 100644
--- a/packages/block-library/src/navigation-menu/edit.js
+++ b/packages/block-library/src/navigation-menu/edit.js
@@ -51,7 +51,9 @@ function NavigationMenu( {
return null;
}
return pages.map( ( page ) => {
- return [ 'core/navigation-menu-item', { label: page.title.rendered, destination: page.permalink_template } ];
+ return [ 'core/navigation-menu-item',
+ { label: page.title.rendered, url: page.permalink_template },
+ ];
} );
},
[ pages ]
diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss
index a92f72eb5c170..5133b3261fb24 100644
--- a/packages/block-library/src/navigation-menu/editor.scss
+++ b/packages/block-library/src/navigation-menu/editor.scss
@@ -1,9 +1,6 @@
.wp-block-navigation-menu .block-editor-block-list__layout,
.wp-block-navigation-menu {
display: flex;
- grid-auto-columns: min-content;
- grid-auto-flow: column;
- align-items: top;
white-space: nowrap;
}
diff --git a/packages/block-library/src/navigation-menu/index.php b/packages/block-library/src/navigation-menu/index.php
index c797a65fdfc10..b49a41a06aa11 100644
--- a/packages/block-library/src/navigation-menu/index.php
+++ b/packages/block-library/src/navigation-menu/index.php
@@ -102,8 +102,8 @@ function build_navigation_menu_html( $block, $colors ) {
class="wp-block-navigation-menu-item__link ' . $colors['text_css_classes'] . '"
' . $colors['text_inline_styles'];
- if ( isset( $menu_item['attrs']['destination'] ) ) {
- $html .= ' href="' . $menu_item['attrs']['destination'] . '"';
+ if ( isset( $menu_item['attrs']['url'] ) ) {
+ $html .= ' href="' . $menu_item['attrs']['url'] . '"';
}
if ( isset( $menu_item['attrs']['title'] ) ) {
$html .= ' title="' . $menu_item['attrs']['title'] . '"';
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html
index c88644e748ebf..0ad94205cbce0 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html
@@ -1,2 +1,2 @@
-
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json
index eb71bb8b929c4..4e5ae943cb9b4 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json
@@ -5,9 +5,9 @@
"isValid": true,
"attributes": {
"label": "WordPress",
- "destination": "https://wordpress.org/",
"nofollow": false,
- "opensInNewTab": false
+ "opensInNewTab": false,
+ "url": "https://wordpress.org/"
},
"innerBlocks": [],
"originalContent": ""
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json
index 8fa4f5340bb83..2b03a8420038b 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json
@@ -3,7 +3,7 @@
"blockName": "core/navigation-menu-item",
"attrs": {
"label": "WordPress",
- "destination": "https://wordpress.org/"
+ "url": "https://wordpress.org/"
},
"innerBlocks": [],
"innerHTML": "\n",
diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html
index b5176129ef246..ecf1f0ce7ad65 100644
--- a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html
@@ -1 +1 @@
-
+
diff --git a/test/integration/full-content/server-registered.json b/test/integration/full-content/server-registered.json
index e11fe0283b44a..9d17c64f5d6ba 100644
--- a/test/integration/full-content/server-registered.json
+++ b/test/integration/full-content/server-registered.json
@@ -1 +1 @@
-{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/navigation-menu":{"category":"layout","attributes":{"automaticallyAdd":{"type":"boolean","default":false}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}}
\ No newline at end of file
+{"core\/archives":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/calendar":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"month":{"type":"integer"},"year":{"type":"integer"}}},"core\/categories":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"displayAsDropdown":{"type":"boolean","default":false},"showHierarchy":{"type":"boolean","default":false},"showPostCounts":{"type":"boolean","default":false}}},"core\/latest-comments":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"commentsToShow":{"type":"number","default":5,"minimum":1,"maximum":100},"displayAvatar":{"type":"boolean","default":true},"displayDate":{"type":"boolean","default":true},"displayExcerpt":{"type":"boolean","default":true}}},"core\/latest-posts":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostContent":{"type":"boolean","default":false},"displayPostContentRadio":{"type":"string","default":"excerpt"},"excerptLength":{"type":"number","default":55},"displayPostDate":{"type":"boolean","default":false},"postLayout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}},"core\/legacy-widget":{"attributes":{"identifier":{"type":"string"},"instance":{"type":"object"},"isCallbackWidget":{"type":"boolean"}}},"core\/navigation-menu":{"category":"layout","attributes":{"automaticallyAdd":{"type":"boolean","default":false}}},"core\/rss":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"columns":{"type":"number","default":2},"blockLayout":{"type":"string","default":"list"},"feedURL":{"type":"string","default":""},"itemsToShow":{"type":"number","default":5},"displayExcerpt":{"type":"boolean","default":false},"displayAuthor":{"type":"boolean","default":false},"displayDate":{"type":"boolean","default":false},"excerptLength":{"type":"number","default":55}}},"core\/search":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"label":{"type":"string","default":"Search"},"placeholder":{"type":"string","default":""},"buttonText":{"type":"string","default":"Search"}}},"core\/shortcode":{"attributes":{"text":{"type":"string","source":"html"}}},"core\/social-link-amazon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"amazon"}}},"core\/social-link-bandcamp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"bandcamp"}}},"core\/social-link-behance":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"behance"}}},"core\/social-link-chain":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"chain"}}},"core\/social-link-codepen":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"codepen"}}},"core\/social-link-deviantart":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"deviantart"}}},"core\/social-link-dribbble":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dribbble"}}},"core\/social-link-dropbox":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"dropbox"}}},"core\/social-link-etsy":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"etsy"}}},"core\/social-link-facebook":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"facebook"}}},"core\/social-link-feed":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"feed"}}},"core\/social-link-fivehundredpx":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"fivehundredpx"}}},"core\/social-link-flickr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"flickr"}}},"core\/social-link-foursquare":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"foursquare"}}},"core\/social-link-goodreads":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"goodreads"}}},"core\/social-link-google":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"google"}}},"core\/social-link-github":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"github"}}},"core\/social-link-instagram":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"instagram"}}},"core\/social-link-lastfm":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"lastfm"}}},"core\/social-link-linkedin":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"linkedin"}}},"core\/social-link-mail":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mail"}}},"core\/social-link-mastodon":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"mastodon"}}},"core\/social-link-meetup":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"meetup"}}},"core\/social-link-medium":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"medium"}}},"core\/social-link-pinterest":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pinterest"}}},"core\/social-link-pocket":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"pocket"}}},"core\/social-link-reddit":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"reddit"}}},"core\/social-link-skype":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"skype"}}},"core\/social-link-snapchat":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"snapchat"}}},"core\/social-link-soundcloud":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"soundcloud"}}},"core\/social-link-spotify":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"spotify"}}},"core\/social-link-tumblr":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"tumblr"}}},"core\/social-link-twitch":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitch"}}},"core\/social-link-twitter":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"twitter"}}},"core\/social-link-vimeo":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vimeo"}}},"core\/social-link-vk":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"vk"}}},"core\/social-link-wordpress":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"wordpress"}}},"core\/social-link-yelp":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"yelp"}}},"core\/social-link-youtube":{"attributes":{"url":{"type":"string"},"site":{"type":"string","default":"youtube"}}},"core\/tag-cloud":{"attributes":{"align":{"type":"string","enum":["left","center","right","wide","full"]},"className":{"type":"string"},"taxonomy":{"type":"string","default":"post_tag"},"showTagCounts":{"type":"boolean","default":false}}}}
\ No newline at end of file