Add support for advanced menu item properties to Navigation screen (#…

…25062) * Set up advanced attributes on nav screen. * Add new attribs to tests.
WordPress · Sep 7, 2020 · 750ab48 · 750ab48
1 parent 2dd0fb4
commit 750ab48
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 6 deletions.
diff --git a/packages/edit-navigation/src/store/resolvers.js b/packages/edit-navigation/src/store/resolvers.js
@@ -128,6 +128,10 @@ function convertMenuItemToBlock( menuItem, innerBlocks = [] ) {
 	const attributes = {
 		label: menuItem.title.rendered,
 		url: menuItem.url,
+		title: menuItem.attr_title,
+		className: menuItem.classes.join( ' ' ),
+		description: menuItem.description,
+		rel: menuItem.xfn.join( ' ' ),
 	};
 
 	return createBlock( 'core/navigation-link', attributes, innerBlocks );

diff --git a/packages/edit-navigation/src/store/test/actions.js b/packages/edit-navigation/src/store/test/actions.js
@@ -244,6 +244,10 @@ describe( 'saveNavigationPost', () => {
 								label: 'wp.org',
 								opensInNewTab: false,
 								url: 'http://wp.org',
+								className: '',
+								rel: '',
+								description: '',
+								title: '',
 							},
 							clientId: 'navigation-link-block-client-id-1',
 							innerBlocks: [],
@@ -255,6 +259,10 @@ describe( 'saveNavigationPost', () => {
 								label: 'wp.com',
 								opensInNewTab: false,
 								url: 'http://wp.com',
+								className: '',
+								rel: '',
+								description: '',
+								title: '',
 							},
 							clientId: 'navigation-link-block-client-id-2',
 							innerBlocks: [],
@@ -278,6 +286,10 @@ describe( 'saveNavigationPost', () => {
 				url: 'http://wp.com',
 				menu_order: 1,
 				menus: [ 1 ],
+				classes: [],
+				xfn: [],
+				description: '',
+				attr_title: '',
 			},
 			{
 				id: 101,
@@ -288,6 +300,10 @@ describe( 'saveNavigationPost', () => {
 				url: 'http://wp.org',
 				menu_order: 2,
 				menus: [ 1 ],
+				classes: [],
+				xfn: [],
+				description: '',
+				attr_title: '',
 			},
 		];
 
@@ -358,6 +374,10 @@ describe( 'saveNavigationPost', () => {
 								label: 'wp.org',
 								opensInNewTab: false,
 								url: 'http://wp.org',
+								className: '',
+								rel: '',
+								description: '',
+								title: '',
 							},
 							clientId: 'navigation-link-block-client-id-1',
 							innerBlocks: [],
@@ -369,6 +389,10 @@ describe( 'saveNavigationPost', () => {
 								label: 'wp.com',
 								opensInNewTab: false,
 								url: 'http://wp.com',
+								className: '',
+								rel: '',
+								description: '',
+								title: '',
 							},
 							clientId: 'navigation-link-block-client-id-2',
 							innerBlocks: [],
@@ -392,6 +416,10 @@ describe( 'saveNavigationPost', () => {
 				url: 'http://wp.com',
 				menu_order: 1,
 				menus: [ 1 ],
+				classes: [],
+				xfn: [],
+				description: '',
+				attr_title: '',
 			},
 			{
 				id: 101,
@@ -402,6 +430,10 @@ describe( 'saveNavigationPost', () => {
 				url: 'http://wp.org',
 				menu_order: 2,
 				menus: [ 1 ],
+				classes: [],
+				xfn: [],
+				description: '',
+				attr_title: '',
 			},
 		];
 

diff --git a/packages/edit-navigation/src/store/test/resolvers.js b/packages/edit-navigation/src/store/test/resolvers.js
@@ -76,6 +76,10 @@ describe( 'getNavigationPostForMenu', () => {
 				menu_order: 1,
 				menus: [ 1 ],
 				parent: 0,
+				classes: [ 'menu', 'classes' ],
+				xfn: [ 'nofollow' ],
+				description: 'description',
+				attr_title: 'link title',
 			},
 			{
 				id: 101,
@@ -87,6 +91,10 @@ describe( 'getNavigationPostForMenu', () => {
 				menu_order: 2,
 				menus: [ 1 ],
 				parent: 0,
+				classes: [],
+				xfn: [],
+				description: '',
+				attr_title: '',
 			},
 		];
 
@@ -113,6 +121,10 @@ describe( 'getNavigationPostForMenu', () => {
 							attributes: {
 								label: 'wp.com',
 								url: 'http://wp.com',
+								className: 'menu classes',
+								rel: 'nofollow',
+								description: 'description',
+								title: 'link title',
 							},
 							clientId: 'client-id-0',
 							innerBlocks: [],
@@ -122,6 +134,10 @@ describe( 'getNavigationPostForMenu', () => {
 							attributes: {
 								label: 'wp.org',
 								url: 'http://wp.org',
+								className: '',
+								rel: '',
+								description: '',
+								title: '',
 							},
 							clientId: 'client-id-1',
 							innerBlocks: [],

diff --git a/packages/edit-navigation/src/store/test/utils.js b/packages/edit-navigation/src/store/test/utils.js
@@ -216,6 +216,8 @@ describe( 'computeCustomizedAttribute', () => {
 					label: 'wp.org',
 					opensInNewTab: false,
 					url: 'http://wp.org',
+					className: 'block classnames',
+					rel: 'external',
 				},
 				clientId: 'navigation-link-block-client-id-1',
 				innerBlocks: [],
@@ -227,6 +229,8 @@ describe( 'computeCustomizedAttribute', () => {
 					label: 'wp.com',
 					opensInNewTab: false,
 					url: 'http://wp.com',
+					className: '',
+					rel: '',
 				},
 				clientId: 'navigation-link-block-client-id-2',
 				innerBlocks: [],
@@ -271,7 +275,7 @@ describe( 'computeCustomizedAttribute', () => {
 		).toEqual( {
 			'nav_menu_item[100]': {
 				_invalid: false,
-				classes: '',
+				classes: [ 'block', 'classnames' ],
 				id: 100,
 				menu_item_parent: 0,
 				menu_order: 1,
@@ -282,11 +286,11 @@ describe( 'computeCustomizedAttribute', () => {
 				title: 'wp.org',
 				type: 'custom',
 				url: 'http://wp.org',
-				xfn: '',
+				xfn: [ 'external' ],
 			},
 			'nav_menu_item[101]': {
 				_invalid: false,
-				classes: '',
+				classes: [ '' ],
 				id: 101,
 				menu_item_parent: 0,
 				menu_order: 2,
@@ -297,7 +301,7 @@ describe( 'computeCustomizedAttribute', () => {
 				title: 'wp.com',
 				type: 'custom',
 				url: 'http://wp.com',
-				xfn: '',
+				xfn: [ '' ],
 			},
 		} );
 	} );

diff --git a/packages/edit-navigation/src/store/utils.js b/packages/edit-navigation/src/store/utils.js
@@ -154,6 +154,10 @@ export function computeCustomizedAttribute(
 				title: block.attributes?.label,
 				original_title: '',
 				url: block.attributes.url,
+				description: block.attributes.description,
+				xfn: block.attributes.rel.split( ' ' ),
+				classes: block.attributes.className.split( ' ' ),
+				attr_title: block.attributes.title,
 			};
 		} else {
 			attributes = {
@@ -166,8 +170,6 @@ export function computeCustomizedAttribute(
 			...menuItem,
 			...attributes,
 			position,
-			classes: ( menuItem.classes || [] ).join( ' ' ),
-			xfn: ( menuItem.xfn || [] ).join( ' ' ),
 			nav_menu_term_id: menuId,
 			menu_item_parent: parentId,
 			status: 'publish',