diff --git a/packages/block-library/src/navigation/placeholder.js b/packages/block-library/src/navigation/placeholder.js index 0e50078babbb85..548ffd3a214348 100644 --- a/packages/block-library/src/navigation/placeholder.js +++ b/packages/block-library/src/navigation/placeholder.js @@ -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, @@ -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 ); } ); } diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap index eb7a6c163f2f33..9aa697a87c7233 100644 --- a/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap +++ b/packages/e2e-tests/specs/experiments/__snapshots__/navigation.test.js.snap @@ -2,36 +2,36 @@ exports[`Navigation Creating from existing Menus allows a navigation block to be created from existing menus 1`] = ` " - + - - + + - - - - - + + + + + - + - + - - - - + + + + - - + + " `;