From 4d6a2a51ea084c92a9043cc9d93138ffa0f9bc6b Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 18 Jun 2019 14:32:59 +0100 Subject: [PATCH] Add navigation menu blocks (#14856) * Add popoverProps property to DropDown component * Add navigation menu blocks --- packages/block-library/src/editor.scss | 2 + packages/block-library/src/index.js | 4 + .../src/navigation-menu-item/block.json | 26 ++++ .../src/navigation-menu-item/edit.js | 145 ++++++++++++++++++ .../src/navigation-menu-item/editor.scss | 72 +++++++++ .../src/navigation-menu-item/index.js | 28 ++++ .../navigation-menu-item/menu-item-actions.js | 111 ++++++++++++++ .../src/navigation-menu-item/save.js | 12 ++ .../src/navigation-menu/block.json | 10 ++ .../block-library/src/navigation-menu/edit.js | 58 +++++++ .../src/navigation-menu/editor.scss | 23 +++ .../src/navigation-menu/index.js | 36 +++++ .../src/navigation-menu/menu-item-inserter.js | 85 ++++++++++ .../block-library/src/navigation-menu/save.js | 12 ++ .../e2e-tests/fixtures/block-transforms.js | 12 ++ .../blocks/core__navigation-menu-item.html | 3 + .../blocks/core__navigation-menu-item.json | 15 ++ .../core__navigation-menu-item.parsed.json | 23 +++ ...core__navigation-menu-item.serialized.html | 3 + .../blocks/core__navigation-menu.html | 7 + .../blocks/core__navigation-menu.json | 26 ++++ .../blocks/core__navigation-menu.parsed.json | 35 +++++ .../core__navigation-menu.serialized.html | 5 + 23 files changed, 753 insertions(+) create mode 100644 packages/block-library/src/navigation-menu-item/block.json create mode 100644 packages/block-library/src/navigation-menu-item/edit.js create mode 100644 packages/block-library/src/navigation-menu-item/editor.scss create mode 100644 packages/block-library/src/navigation-menu-item/index.js create mode 100644 packages/block-library/src/navigation-menu-item/menu-item-actions.js create mode 100644 packages/block-library/src/navigation-menu-item/save.js create mode 100644 packages/block-library/src/navigation-menu/block.json create mode 100644 packages/block-library/src/navigation-menu/edit.js create mode 100644 packages/block-library/src/navigation-menu/editor.scss create mode 100644 packages/block-library/src/navigation-menu/index.js create mode 100644 packages/block-library/src/navigation-menu/menu-item-inserter.js create mode 100644 packages/block-library/src/navigation-menu/save.js create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__navigation-menu.serialized.html diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 99493394ed43..784850095f97 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -18,6 +18,8 @@ @import "./media-text/editor.scss"; @import "./list/editor.scss"; @import "./more/editor.scss"; +@import "./navigation-menu/editor.scss"; +@import "./navigation-menu-item/editor.scss"; @import "./nextpage/editor.scss"; @import "./paragraph/editor.scss"; @import "./preformatted/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 38e6b2723096..9724f9d9293e 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -33,6 +33,8 @@ import * as embed from './embed'; import * as file from './file'; import * as html from './html'; import * as mediaText from './media-text'; +import * as navigationMenu from './navigation-menu'; +import * as navigationMenuItem from './navigation-menu-item'; import * as latestComments from './latest-comments'; import * as latestPosts from './latest-posts'; import * as legacyWidget from './legacy-widget'; @@ -104,6 +106,8 @@ export const registerCoreBlocks = () => { process.env.GUTENBERG_PHASE === 2 ? legacyWidget : null, missing, more, + process.env.GUTENBERG_PHASE === 2 ? navigationMenu : null, + process.env.GUTENBERG_PHASE === 2 ? navigationMenuItem : null, nextpage, preformatted, pullquote, diff --git a/packages/block-library/src/navigation-menu-item/block.json b/packages/block-library/src/navigation-menu-item/block.json new file mode 100644 index 000000000000..915c63931cb2 --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/block.json @@ -0,0 +1,26 @@ +{ + "name": "core/navigation-menu-item", + "category": "layout", + "attributes": { + "label": { + "type": "string" + }, + "destination": { + "type": "string" + }, + "nofollow": { + "type": "boolean", + "default": false + }, + "title": { + "type": "string" + }, + "description": { + "type": "string" + }, + "opensInNewTab": { + "type": "boolean", + "default": false + } + } +} diff --git a/packages/block-library/src/navigation-menu-item/edit.js b/packages/block-library/src/navigation-menu-item/edit.js new file mode 100644 index 000000000000..ce5db4b33d0c --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/edit.js @@ -0,0 +1,145 @@ +/** + * External dependencies + */ +import { invoke } from 'lodash'; + +/** + * WordPress dependencies + */ +import { + Dropdown, + ExternalLink, + IconButton, + PanelBody, + TextareaControl, + TextControl, + ToggleControl, +} from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + InspectorControls, + PlainText, +} from '@wordpress/block-editor'; +import { + Fragment, + useCallback, + useRef, +} from '@wordpress/element'; + +/** + * Internal dependencies + */ +import MenuItemActions from './menu-item-actions'; +const POPOVER_PROPS = { noArrow: true }; + +function NavigationMenuItemEdit( { + attributes, + clientId, + isSelected, + setAttributes, +} ) { + const plainTextRef = useRef( null ); + const onEditLableClicked = useCallback( + ( onClose ) => () => { + onClose(); + invoke( plainTextRef, [ 'current', 'textarea', 'focus' ] ); + }, + [ plainTextRef ] + ); + let content; + if ( isSelected ) { + content = ( +
+ 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> + ); + } else { + content = attributes.label; + } + return ( + <Fragment> + <InspectorControls> + <PanelBody + title={ __( 'Menu Settings' ) } + > + <ToggleControl + checked={ attributes.opensInNewTab } + onChange={ ( opensInNewTab ) => { + setAttributes( { opensInNewTab } ); + } } + label={ __( 'Open in new tab' ) } + /> + <TextareaControl + value={ attributes.description || '' } + onChange={ ( description ) => { + setAttributes( { description } ); + } } + label={ __( 'Description' ) } + /> + </PanelBody> + <PanelBody + title={ __( 'SEO Settings' ) } + > + <TextControl + value={ attributes.title || '' } + onChange={ ( title ) => { + setAttributes( { title } ); + } } + label={ __( 'Title Attribute' ) } + help={ __( 'Provide more context about where the link goes.' ) } + /> + <ToggleControl + checked={ attributes.nofollow } + onChange={ ( nofollow ) => { + setAttributes( { nofollow } ); + } } + label={ __( 'Add nofollow to menu item' ) } + help={ ( + <Fragment> + { __( 'Don\'t let search engines follow this link.' ) } + <ExternalLink + className="wp-block-navigation-menu-item__nofollow-external-link" + href={ __( 'https://codex.wordpress.org/Nofollow' ) } + > + { __( 'What\'s this?' ) } + </ExternalLink> + </Fragment> + ) } + /> + </PanelBody> + </InspectorControls> + <div className="wp-block-navigation-menu-item"> + { content } + </div> + </Fragment> + ); +} + +export default NavigationMenuItemEdit; diff --git a/packages/block-library/src/navigation-menu-item/editor.scss b/packages/block-library/src/navigation-menu-item/editor.scss new file mode 100644 index 000000000000..51bd5b7ceae4 --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/editor.scss @@ -0,0 +1,72 @@ +.wp-block-navigation-menu-item__edit-container { + display: grid; + grid-auto-columns: min-content; + grid-auto-flow: column; + align-items: center; + white-space: nowrap; +} + +$menu-label-field-width: 140px; +.wp-block-navigation-menu-item__edit-container { + 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; + 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 { + font-family: $editor-font; + color: #0073af; + font-weight: bold; + font-size: $text-editor-font-size; +} + +.wp-block-navigation-menu-item__nofollow-external-link { + display: block; +} + +// Separator +.wp-block-navigation-menu-item__separator { + margin-top: $grid-size; + margin-bottom: $grid-size; + margin-left: 0; + margin-right: 0; + border-top: $border-width solid $light-gray-500; +} + +// Popover styles +.components-popover:not(.is-mobile).wp-block-navigation-menu-item__dropdown-content { + margin-top: -1px; + margin-left: -4px; +} + +.wp-block-navigation-menu-item__dropdown-content .components-popover__content { + padding: $grid-size 0; +} + +.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 new file mode 100644 index 000000000000..496ef9207042 --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/index.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Menu Item (Experimental)' ), + + parent: [ 'core/navigation-menu' ], + + icon: 'admin-links', + + description: __( 'Add a page, link, or other item to your Navigation Menu.' ), + + edit, + save, +}; + 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 new file mode 100644 index 000000000000..6e39036bab40 --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/menu-item-actions.js @@ -0,0 +1,111 @@ +/** + * 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 ( + <NavigableMenu> + <MenuItem + icon="admin-links" + > + { destination } + </MenuItem> + <MenuItem + onClick={ onEditLableClicked } + icon="edit" + > + { __( 'Edit label text' ) } + </MenuItem> + <div className="wp-block-navigation-menu-item__separator" /> + <MenuItem + onClick={ moveToStart } + icon="arrow-up-alt2" + > + { __( 'Move to start' ) } + </MenuItem> + <MenuItem + onClick={ moveLeft } + icon="arrow-left-alt2" + > + { __( 'Move left' ) } + </MenuItem> + <MenuItem + onClick={ moveRight } + icon="arrow-right-alt2" + > + { __( 'Move right' ) } + </MenuItem> + <MenuItem + onClick={ moveToEnd } + icon="arrow-down-alt2" + > + { __( 'Move to end' ) } + </MenuItem> + <MenuItem + icon="arrow-left-alt2" + > + { __( 'Nest underneath…' ) } + </MenuItem> + <div className="navigation-menu-item__separator" /> + <MenuItem + onClick={ remove } + icon="trash" + > + { __( 'Remove from menu' ) } + </MenuItem> + </NavigableMenu> + ); +} + +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-item/save.js b/packages/block-library/src/navigation-menu-item/save.js new file mode 100644 index 000000000000..66649929c4ac --- /dev/null +++ b/packages/block-library/src/navigation-menu-item/save.js @@ -0,0 +1,12 @@ +export default function save( { attributes } ) { + return ( + <a + href={ attributes.destination } + rel={ attributes.nofollow && 'nofollow' } + title={ attributes.title } + target={ attributes.opensInNewTab && '_blank' } + > + { attributes.label } + </a> + ); +} diff --git a/packages/block-library/src/navigation-menu/block.json b/packages/block-library/src/navigation-menu/block.json new file mode 100644 index 000000000000..ee204cfeb890 --- /dev/null +++ b/packages/block-library/src/navigation-menu/block.json @@ -0,0 +1,10 @@ +{ + "name": "core/navigation-menu", + "category": "layout", + "attributes": { + "automaticallyAdd": { + "type": "boolean", + "default": false + } + } +} diff --git a/packages/block-library/src/navigation-menu/edit.js b/packages/block-library/src/navigation-menu/edit.js new file mode 100644 index 000000000000..0818144c71ea --- /dev/null +++ b/packages/block-library/src/navigation-menu/edit.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { + Fragment, +} from '@wordpress/element'; +import { + InnerBlocks, + InspectorControls, +} from '@wordpress/block-editor'; +import { + CheckboxControl, + PanelBody, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import MenuItemInserter from './menu-item-inserter'; +import { __ } from '@wordpress/i18n'; + +function NavigationMenu( { + attributes, + clientId, + isSelected, + setAttributes, +} ) { + return ( + <Fragment> + <InspectorControls> + <PanelBody + title={ __( 'Menu Settings' ) } + > + <CheckboxControl + value={ attributes.automaticallyAdd } + onChange={ ( automaticallyAdd ) => { + setAttributes( { automaticallyAdd } ); + } } + label={ __( 'Automatically add new pages' ) } + help={ __( 'Automatically add new top level pages to this menu.' ) } + /> + </PanelBody> + </InspectorControls> + <div className="wp-block-navigation-menu"> + <InnerBlocks + allowedBlocks={ [ 'core/navigation-menu-item' ] } + /> + { isSelected && ( + <MenuItemInserter + rootClientId={ clientId } + /> + ) } + </div> + </Fragment> + ); +} + +export default NavigationMenu; diff --git a/packages/block-library/src/navigation-menu/editor.scss b/packages/block-library/src/navigation-menu/editor.scss new file mode 100644 index 000000000000..e52ad5b6ec28 --- /dev/null +++ b/packages/block-library/src/navigation-menu/editor.scss @@ -0,0 +1,23 @@ +.wp-block-navigation-menu .block-editor-block-list__layout, +.wp-block-navigation-menu { + display: grid; + grid-auto-columns: min-content; + grid-auto-flow: column; + align-items: center; + white-space: nowrap; +} + +// Todo: corerctly allow custom inserters and remove the need for this display none. +.wp-block-navigation-menu .block-editor-block-list__layout .block-list-appender { + display: none; +} + +// Custom inserter +.wp-block-navigation-menu__inserter { + display: inline-block; +} + +.wp-block-navigation-menu__inserter-content { + width: 350px; + padding: $grid-size-large; +} diff --git a/packages/block-library/src/navigation-menu/index.js b/packages/block-library/src/navigation-menu/index.js new file mode 100644 index 000000000000..8ca8e0c3fe56 --- /dev/null +++ b/packages/block-library/src/navigation-menu/index.js @@ -0,0 +1,36 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Navigation Menu (Experimental)' ), + + icon: 'menu', + + description: __( 'Add a navigation menu to your site.' ), + + keywords: [ __( 'menu' ), __( 'navigation' ), __( 'links' ) ], + + supports: { + align: [ 'wide', 'full' ], + anchor: true, + html: false, + inserter: false, + }, + + edit, + + save, + +}; diff --git a/packages/block-library/src/navigation-menu/menu-item-inserter.js b/packages/block-library/src/navigation-menu/menu-item-inserter.js new file mode 100644 index 000000000000..34a506e448e6 --- /dev/null +++ b/packages/block-library/src/navigation-menu/menu-item-inserter.js @@ -0,0 +1,85 @@ +/** + * WordPress dependencies + */ +import { compose } from '@wordpress/compose'; +import { withDispatch } from '@wordpress/data'; +import { + Dropdown, + IconButton, + MenuItem, + NavigableMenu, + TextControl, +} from '@wordpress/components'; +import { useState, useMemo, useCallback } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { createBlock } from '@wordpress/blocks'; +import { isURL } from '@wordpress/url'; + +function MenuItemInserter( { insertMenuItem } ) { + const [ searchInput, setSearchInput ] = useState( '' ); + const isUrlInput = useMemo( () => isURL( searchInput ), [ searchInput ] ); + const onMenuItemClick = useCallback( () => { + insertMenuItem( { + destination: searchInput, + } ); + }, [ insertMenuItem, searchInput ] ); + + return ( + <Dropdown + className="wp-block-navigation-menu__inserter" + position="bottom center" + renderToggle={ ( { isOpen, onToggle } ) => ( + <IconButton + icon="insert" + label={ __( 'Insert a new menu item' ) } + onClick={ onToggle } + aria-expanded={ isOpen } + /> + ) } + renderContent={ () => ( + <div className="wp-block-navigation-menu__inserter-content"> + <TextControl + value={ searchInput } + label={ __( 'Search or paste a link' ) } + onChange={ setSearchInput } + /> + { isUrlInput && ( + <NavigableMenu> + <MenuItem + onClick={ onMenuItemClick } + icon="admin-links" + > + { searchInput } + </MenuItem> + </NavigableMenu> + ) } + </div> + ) } + /> + ); +} + +export default compose( [ + withDispatch( ( dispatch, props, { select } ) => { + return { + insertMenuItem( attributes ) { + const { + getBlockOrder, + } = select( 'core/block-editor' ); + const { + insertBlock, + } = dispatch( 'core/block-editor' ); + const index = getBlockOrder( props.rootClientId ).length; + const insertedBlock = createBlock( + 'core/navigation-menu-item', + attributes + ); + insertBlock( + insertedBlock, + index, + props.rootClientId + ); + }, + }; + } ), +] )( MenuItemInserter ); diff --git a/packages/block-library/src/navigation-menu/save.js b/packages/block-library/src/navigation-menu/save.js new file mode 100644 index 000000000000..9d40874cdffd --- /dev/null +++ b/packages/block-library/src/navigation-menu/save.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save() { + return ( + <nav> + <InnerBlocks.Content /> + </nav> + ); +} diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js index 723552c024b5..7391c1bc7adb 100644 --- a/packages/e2e-tests/fixtures/block-transforms.js +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -304,6 +304,18 @@ export const EXPECTED_TRANSFORMS = { 'Group', ], }, + 'core__navigation-menu': { + originalBlock: 'Navigation Menu (Experimental)', + availableTransforms: [ + 'Group', + ], + }, + 'core__navigation-menu-item': { + originalBlock: 'Menu Item (Experimental)', + availableTransforms: [ + 'Group', + ], + }, core__nextpage: { originalBlock: 'Page Break', availableTransforms: [ diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html new file mode 100644 index 000000000000..fe1d420b45f9 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.html @@ -0,0 +1,3 @@ +<!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} --> +<a class="wp-block-navigation-menu-item" href="https://wordpress.org/">WordPress</a> +<!-- /wp:navigation-menu-item --> diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json new file mode 100644 index 000000000000..8672293bfb6a --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.json @@ -0,0 +1,15 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/navigation-menu-item", + "isValid": true, + "attributes": { + "label": "WordPress", + "destination": "https://wordpress.org/", + "nofollow": false, + "opensInNewTab": false + }, + "innerBlocks": [], + "originalContent": "<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>" + } +] 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 new file mode 100644 index 000000000000..543509ab24b4 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.parsed.json @@ -0,0 +1,23 @@ +[ + { + "blockName": "core/navigation-menu-item", + "attrs": { + "label": "WordPress", + "destination": "https://wordpress.org/" + }, + "innerBlocks": [], + "innerHTML": "\n<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n", + "innerContent": [ + "\n<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\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 new file mode 100644 index 000000000000..23da06ad987c --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu-item.serialized.html @@ -0,0 +1,3 @@ +<!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} --> +<a href="https://wordpress.org/" class="wp-block-navigation-menu-item">WordPress</a> +<!-- /wp:navigation-menu-item --> diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu.html b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.html new file mode 100644 index 000000000000..fcd6c46d6bff --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.html @@ -0,0 +1,7 @@ +<!-- wp:navigation-menu --> +<nav class="wp-block-navigation-menu"> + <!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} --> + <a class="wp-block-navigation-menu-item" href="https://wordpress.org/">WordPress</a> + <!-- /wp:navigation-menu-item --> +</nav> +<!-- /wp:navigation-menu --> diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu.json b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.json new file mode 100644 index 000000000000..6776ac5dad72 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.json @@ -0,0 +1,26 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/navigation-menu", + "isValid": true, + "attributes": { + "automaticallyAdd": false + }, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/navigation-menu-item", + "isValid": true, + "attributes": { + "label": "WordPress", + "destination": "https://wordpress.org/", + "nofollow": false, + "opensInNewTab": false + }, + "innerBlocks": [], + "originalContent": "<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>" + } + ], + "originalContent": "<nav class=\"wp-block-navigation-menu\">\n\t\n</nav>" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu.parsed.json b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.parsed.json new file mode 100644 index 000000000000..65c2aecba3e2 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.parsed.json @@ -0,0 +1,35 @@ +[ + { + "blockName": "core/navigation-menu", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/navigation-menu-item", + "attrs": { + "label": "WordPress", + "destination": "https://wordpress.org/" + }, + "innerBlocks": [], + "innerHTML": "\n\t<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n\t", + "innerContent": [ + "\n\t<a class=\"wp-block-navigation-menu-item\" href=\"https://wordpress.org/\">WordPress</a>\n\t" + ] + } + ], + "innerHTML": "\n<nav class=\"wp-block-navigation-menu\">\n\t\n</nav>\n", + "innerContent": [ + "\n<nav class=\"wp-block-navigation-menu\">\n\t", + null, + "\n</nav>\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__navigation-menu.serialized.html b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.serialized.html new file mode 100644 index 000000000000..0d1fd66c6a2a --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__navigation-menu.serialized.html @@ -0,0 +1,5 @@ +<!-- wp:navigation-menu --> +<nav class="wp-block-navigation-menu"><!-- wp:navigation-menu-item {"label":"WordPress","destination":"https://wordpress.org/"} --> +<a href="https://wordpress.org/" class="wp-block-navigation-menu-item">WordPress</a> +<!-- /wp:navigation-menu-item --></nav> +<!-- /wp:navigation-menu -->