Skip to content

Commit

Permalink
Navigation: Handle block menu items (#24846)
Browse files Browse the repository at this point in the history 
* Navigation: Handle block menu items

Handle menu items with type = 'block' when creating a Navigation block
from an existing menu.

* Navigation: Update E2E test snapshots
  • Loading branch information
@noisysocks
noisysocks committed Sep 25, 2020
1 parent 39a424b commit bf0b8ab
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 34 deletions.
62 changes: 44 additions & 18 deletions packages/block-library/src/navigation/placeholder.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
/**
* External dependencies
*/
import { some } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { createBlock } from '@wordpress/blocks';
import { createBlock, parse } from '@wordpress/blocks';
import {
Button,
CustomSelectControl,
Expand Down Expand Up @@ -76,26 +77,51 @@ function getSelectedMenu( selectedCreateOption ) {
/**
* A recursive function that maps menu item nodes to blocks.
*
* @param {Object[]} nodes An array of menu items.
*
* @param {Object[]} menuItems An array of menu items.
* @return {WPBlock[]} An array of blocks.
*/
function mapMenuItemsToBlocks( nodes ) {
return nodes.map( ( { title, type, link: url, id, children } ) => {
const innerBlocks =
children && children.length ? mapMenuItemsToBlocks( children ) : [];
function mapMenuItemsToBlocks( menuItems ) {
return menuItems.map( ( menuItem ) => {
if ( menuItem.type === 'block' ) {
const [ block ] = parse( menuItem.content.raw );

return createBlock(
'core/navigation-link',
{
type,
id,
url,
label: ! title.rendered ? __( '(no title)' ) : title.rendered,
opensInNewTab: false,
},
innerBlocks
);
if ( ! block ) {
return createBlock( 'core/freeform', {
content: menuItem.content,
} );
}

return block;
}

const attributes = {
label: ! menuItem.title.rendered
? __( '(no title)' )
: menuItem.title.rendered,
opensInNewTab: menuItem.target === '_blank',
};

if ( menuItem.url ) {
attributes.url = menuItem.url;
}

if ( menuItem.description ) {
attributes.description = menuItem.description;
}

if ( menuItem.xfn?.length && some( menuItem.xfn ) ) {
attributes.rel = menuItem.xfn.join( ' ' );
}

if ( menuItem.classes?.length && some( menuItem.classes ) ) {
attributes.className = menuItem.classes.join( ' ' );
}

const innerBlocks = menuItem.children?.length
? mapMenuItemsToBlocks( menuItem.children )
: [];

return createBlock( 'core/navigation-link', attributes, innerBlocks );
} );
}

Expand Down
32 changes: 16 additions & 16 deletions packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,36 @@

exports[`Navigation Creating from existing Menus allows a navigation block to be created from existing menus 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"horizontal\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"id\\":94} /-->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"url\\":\\"https://localhost:8889/\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"post_type\\",\\"id\\":95} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"post_type\\",\\"id\\":96} /-->
<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"url\\":\\"https://localhost:8889/?page_id=41\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"url\\":\\"https://localhost:8889/?page_id=51\\"} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"post_type\\",\\"id\\":97} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"post_type\\",\\"id\\":98} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"post_type\\",\\"id\\":99} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"post_type\\",\\"id\\":100} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"post_type\\",\\"id\\":101} /-->
<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"url\\":\\"https://localhost:8889/?page_id=53\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"url\\":\\"https://localhost:8889/?page_id=56\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"url\\":\\"https://localhost:8889/?page_id=15\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"url\\":\\"https://localhost:8889/?page_id=45\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"url\\":\\"https://localhost:8889/?page_id=27\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"post_type\\",\\"id\\":102} /-->
<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"url\\":\\"https://localhost:8889/?page_id=43\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"post_type\\",\\"id\\":103} /-->
<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"url\\":\\"https://localhost:8889/?page_id=2\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"taxonomy\\",\\"id\\":104} -->
<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"taxonomy\\",\\"id\\":105} -->
<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"type\\":\\"taxonomy\\",\\"id\\":106} -->
<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"taxonomy\\",\\"id\\":107} /-->
<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"url\\":\\"https://localhost:8889/?cat=7\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"description\\":\\"Vel fuga enim rerum perspiciatis sapiente mollitia magni ut molestiae labore quae quia quia libero perspiciatis voluptatem quidem deleniti eveniet laboriosam doloribus dolor laborum accusantium modi ducimus itaque rerum cum nostrum\\",\\"url\\":\\"https://localhost:8889/?cat=19\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Et quas a et mollitia et voluptas optio voluptate quia quo unde aut in nostrum iste impedit quisquam id aut\\",\\"description\\":\\"Quas sit labore earum omnis eos sint iste est possimus harum aut soluta sint optio quos distinctio inventore voluptate non ut aliquam ad ut voluptates fugiat numquam magnam modi repellendus modi laudantium et debitis officia est voluptatum quidem unde molestiae animi vero fuga accusamus nam\\",\\"url\\":\\"https://localhost:8889/?cat=6\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"description\\":\\"Doloremque vero sunt officiis iste voluptatibus voluptas molestiae sint asperiores recusandae amet praesentium et explicabo nesciunt similique voluptatum laudantium amet officiis quas distinctio quis enim nihil tempora\\",\\"url\\":\\"https://localhost:8889/?cat=16\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"id\\":108} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"id\\":109} /-->
<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"url\\":\\"https://wordpress.org\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"url\\":\\"https://google.com\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation -->"
`;
Expand Down

0 comments on commit bf0b8ab

Please sign in to comment.