Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Standardise and fix parsing and serialization of blocks and nav menu items #31004

Merged
merged 48 commits into from
May 4, 2021
Merged

Standardise and fix parsing and serialization of blocks and nav menu items #31004

Show file tree
Hide file tree
Changes from 45 commits
Commits
Show all changes
48 commits
Select commit Hold shift + click to select a range
9905c0d
Create correct nav link block variations from menu data type
getdave Apr 20, 2021
00d7040
Set menu object type based on block type
getdave Apr 20, 2021
6005551
Correctly hydrate nav block itself from stored menu object fields.
getdave Apr 20, 2021
4a00a65
Fix to store/retrieve nav link type from/to the menu item’s “object” …
getdave Apr 21, 2021
b5a5f5a
Fix up Nav Block to use object field for type
getdave Apr 21, 2021
0304ca4
Avoid storing menu objects with “custom” as type.
getdave Apr 21, 2021
3fd02d4
Only set id and type on the generated block if the object and object_…
getdave Apr 21, 2021
481c8d5
Add test to cover correct creation of core/navigation-link block vari…
getdave Apr 21, 2021
02ab08f
Conditional persist block id and type attrs to menu object fields
getdave Apr 21, 2021
29ef10a
Add tests to cover conversion from blocks to menu objects
getdave Apr 21, 2021
aa2b9f2
Revert changes to fallback variations isActive detection logic
getdave Apr 21, 2021
c155f0a
Remove accidental new line in file causes “changes”
getdave Apr 21, 2021
74a8f12
Create mapping utils to map menu items to blocks and vice versa
getdave Apr 23, 2021
4749b62
Genericise conversion util and share
getdave Apr 23, 2021
741d811
Doc block for conversion util
getdave Apr 23, 2021
4d5ce11
Add simple conversion of kind on the nav block itself
getdave Apr 23, 2021
6d24f15
Correct type to kind conversion on block
getdave Apr 23, 2021
3528abc
Fix up
getdave Apr 23, 2021
5ce0c37
Simplify mapper function
getdave Apr 26, 2021
7dc340e
Fix broken test
getdave Apr 26, 2021
c5102e3
Extract mapping functions to shared utils and test
getdave Apr 26, 2021
710e615
Fix snapshot test to account for new attributes
getdave Apr 26, 2021
46d4ae6
Only map id if it is not a custom link
getdave Apr 27, 2021
0562160
Update nav block snapshot to include new attributes
getdave Apr 27, 2021
a28f7a5
Fix test that could never have passed
getdave Apr 27, 2021
0bff9c4
Allow for pass through mapping if a mapping is not defined for this a…
getdave Apr 27, 2021
7d24fc3
Update packages/edit-navigation/src/store/utils.js
getdave Apr 29, 2021
3648914
Refactor to create per block/menuItem conversion rather than on per f…
getdave Apr 29, 2021
0873d9c
Doc blocks
getdave Apr 29, 2021
9caccfd
Reuse menu to blocks conversion util on navigation-link block
getdave Apr 29, 2021
7250810
Fix resolver unit tests
getdave Apr 29, 2021
fde6003
Add new resolver test to assert on entity type conversion
getdave Apr 29, 2021
70aa6ad
Update snapshots
getdave Apr 29, 2021
57e8697
Fix nav editor snapshots to remove IDs from custom link types
getdave Apr 29, 2021
761f678
Avoid overwriting the ID attribute when calling onChange with no ID prop
getdave Apr 29, 2021
83f42d1
Adds full conversion cycle tests
getdave Apr 30, 2021
667c818
Fix invalid test that wasn’t performing correct assertion
getdave Apr 30, 2021
0bd64e8
Refactor conversions to omit default values.
getdave Apr 30, 2021
9d88bf8
Update tests to expect default or omitted values upon conversion
getdave Apr 30, 2021
b4dc564
Delete unused tests
getdave Apr 30, 2021
7080f0d
Code documentation for generator test steps
getdave Apr 30, 2021
b3c1b14
Update snapshot to remove omitted attributes
getdave Apr 30, 2021
ca250c4
Update block’s mapping code and update associated e2e snapshot
getdave Apr 30, 2021
6a62bab
Fix bug with custom block label not being persisted correctly to nav …
getdave Apr 30, 2021
7497fa6
Fix mapping of “tag” to “post_tag” and add test coverage
getdave Apr 30, 2021
2893305
Add typedefs for nav_menu_item
getdave May 4, 2021
4ec0e71
Allow for unsetting of target attribute
getdave May 4, 2021
ef58f7a
Remove “custom” default for block variation
getdave May 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions packages/block-library/src/navigation-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -523,10 +523,10 @@ export default function NavigationLinkEdit( {
title: newTitle = '',
url: newURL = '',
opensInNewTab: newOpensInNewTab,
id,
id: newId,
kind: newKind = '',
type: newType = '',
} = {} ) =>
} = {} ) => {
setAttributes( {
url: encodeURI( newURL ),
label: ( () => {
Expand All @@ -552,7 +552,12 @@ export default function NavigationLinkEdit( {
return escape( normalizedURL );
} )(),
opensInNewTab: newOpensInNewTab,
id,
// `id` represents the DB ID of the entity which this link represents (eg: Post ID).
// Therefore we must not inadvertently set it to `undefined` if the `onChange` is called with no `id` value.
// This is possible when a setting changes such as the `opensInNewTab`.
getdave marked this conversation as resolved.
Show resolved Hide resolved
...( newId && {
id: newId,
} ),
...( newKind && {
kind: newKind,
} ),
Expand All @@ -561,8 +566,8 @@ export default function NavigationLinkEdit( {
newType !== 'post-format' && {
type: newType,
} ),
} )
}
} );
} }
/>
</Popover>
) }
Expand Down
97 changes: 97 additions & 0 deletions packages/block-library/src/navigation/map-menu-items-to-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/**
* WordPress dependencies
*/
import { createBlock, parse } from '@wordpress/blocks';

/**
* Convert block attributes to menu item.
*
* For more documentation on the individual fields present on a menu item please see:
* https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L789
*
* @param {Object} menuItem the menu item to be converted to block attributes.
* @param {Object} menuItem.title stores the raw and rendered versions of the title/label for this menu item.
* @param {Array} menuItem.xfn the XFN relationships expressed in the link of this menu item.
* @param {Array} menuItem.classes the HTML class attributes for this menu item.
* @param {string} menuItem.attr_title the HTML title attribute for this menu item.
* @param {string} menuItem.object The type of object originally represented, such as 'category', 'post', or 'attachment'.
* @param {string} menuItem.object_id The DB ID of the original object this menu item represents, e.g. ID for posts and term_id for categories.
* @param {string} menuItem.description The description of this menu item.
* @param {string} menuItem.url The URL to which this menu item points.
* @param {string} menuItem.type The family of objects originally represented, such as 'post_type' or 'taxonomy'.
* @param {string} menuItem.target The target attribute of the link element for this menu item.
getdave marked this conversation as resolved.
Show resolved Hide resolved
* @return {Object} the block attributes converted from the menu item.
*/
export const menuItemToBlockAttributes = ( {
title: menuItemTitleField,
xfn,
classes,
// eslint-disable-next-line camelcase
attr_title,
object,
// eslint-disable-next-line camelcase
object_id,
description,
url,
type: menuItemTypeField,
target,
} ) => {
return {
label: menuItemTitleField?.rendered || '',
type: object || 'custom',
kind: menuItemTypeField?.replace( '_', '-' ) || 'custom',
getdave marked this conversation as resolved.
Show resolved Hide resolved
url: url || '',
...( xfn?.length &&
xfn.join( ' ' ).trim() && {
rel: xfn.join( ' ' ).trim(),
} ),
...( classes?.length &&
classes.join( ' ' ).trim() && {
className: classes.join( ' ' ).trim(),
} ),
...( attr_title?.length && {
title: attr_title,
} ),
// eslint-disable-next-line camelcase
...( object_id &&
'custom' !== object && {
id: object_id,
} ),
...( description?.length && {
description,
} ),
...( target === '_blank' && {
opensInNewTab: true,
} ),
};
};

/**
* A recursive function that maps menu item nodes to blocks.
*
* @param {Object[]} menuItems An array of menu items.
* @return {WPBlock[]} An array of blocks.
*/
export default function mapMenuItemsToBlocks( menuItems ) {
return menuItems.map( ( menuItem ) => {
if ( menuItem.type === 'block' ) {
const [ block ] = parse( menuItem.content.raw );

if ( ! block ) {
return createBlock( 'core/freeform', {
content: menuItem.content,
} );
}

return block;
}

const attributes = menuItemToBlockAttributes( menuItem );

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

return createBlock( 'core/navigation-link', attributes, innerBlocks );
} );
}
59 changes: 2 additions & 57 deletions packages/block-library/src/navigation/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
/**
* External dependencies
*/
import { some } from 'lodash';

/**
* WordPress dependencies
*/
import { createBlock, parse } from '@wordpress/blocks';
import { createBlock } from '@wordpress/blocks';
import {
Button,
DropdownMenu,
Expand All @@ -29,59 +24,9 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import createDataTree from './create-data-tree';
import mapMenuItemsToBlocks from './map-menu-items-to-blocks';
import PlaceholderPreview from './placeholder-preview';

/**
* A recursive function that maps menu item nodes to blocks.
*
* @param {Object[]} menuItems An array of menu items.
* @return {WPBlock[]} An array of blocks.
*/
function mapMenuItemsToBlocks( menuItems ) {
return menuItems.map( ( menuItem ) => {
if ( menuItem.type === 'block' ) {
const [ block ] = parse( menuItem.content.raw );

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 );
} );
}

/**
* Convert a flat menu item structure to a nested blocks structure.
*
Expand Down
32 changes: 16 additions & 16 deletions packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,36 @@ exports[`Navigation editor allows creation of a menu when there are no current m

exports[`Navigation editor displays the first menu from the REST response when at least one menu exists 1`] = `
"<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Home\\",\\"type\\":\\"custom\\",\\"url\\":\\"http://localhost:8889/\\",\\"kind\\":\\"custom\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Accusamus quo repellat illum magnam quas\\",\\"type\\":\\"page\\",\\"id\\":41,\\"url\\":\\"http://localhost:8889/?page_id=41\\",\\"kind\\":\\"post-type\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Debitis cum consequatur sit doloremque\\",\\"type\\":\\"page\\",\\"id\\":51,\\"url\\":\\"http://localhost:8889/?page_id=51\\",\\"kind\\":\\"post-type\\"} /-->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Est ea vero non nihil officiis in\\",\\"type\\":\\"page\\",\\"id\\":53,\\"url\\":\\"http://localhost:8889/?page_id=53\\",\\"kind\\":\\"post-type\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Fuga odio quis tempora\\",\\"type\\":\\"page\\",\\"id\\":56,\\"url\\":\\"http://localhost:8889/?page_id=56\\",\\"kind\\":\\"post-type\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"In consectetur repellendus eveniet maiores aperiam\\",\\"type\\":\\"page\\",\\"id\\":15,\\"url\\":\\"http://localhost:8889/?page_id=15\\",\\"kind\\":\\"post-type\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Mollitia maiores consequatur ea dolorem blanditiis\\",\\"type\\":\\"page\\",\\"id\\":45,\\"url\\":\\"http://localhost:8889/?page_id=45\\",\\"kind\\":\\"post-type\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Necessitatibus nisi qui qui necessitatibus quaerat possimus\\",\\"type\\":\\"page\\",\\"id\\":27,\\"url\\":\\"http://localhost:8889/?page_id=27\\",\\"kind\\":\\"post-type\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Nulla omnis autem dolores eligendi\\",\\"type\\":\\"page\\",\\"id\\":43,\\"url\\":\\"http://localhost:8889/?page_id=43\\",\\"kind\\":\\"post-type\\"} /-->

<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Sample Page\\",\\"type\\":\\"page\\",\\"id\\":2,\\"url\\":\\"http://localhost:8889/?page_id=2\\",\\"kind\\":\\"post-type\\"} /-->

<!-- 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\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- 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\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- 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\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- 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\\",\\"rel\\":\\"\\",\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"Beatae qui labore voluptas eveniet officia quia voluptas qui porro sequi et aut est\\",\\"type\\":\\"category\\",\\"description\\":\\"Ratione nemo ut aut ullam sed assumenda quis est exercitationem\\",\\"id\\":7,\\"url\\":\\"http://localhost:8889/?cat=7\\",\\"kind\\":\\"taxonomy\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Et minus itaque velit tempore hic quisquam saepe quas asperiores\\",\\"type\\":\\"category\\",\\"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\\",\\"id\\":19,\\"url\\":\\"http://localhost:8889/?cat=19\\",\\"kind\\":\\"taxonomy\\"} -->
<!-- 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\\":\\"category\\",\\"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\\",\\"id\\":6,\\"url\\":\\"http://localhost:8889/?cat=6\\",\\"kind\\":\\"taxonomy\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Illo quis sit impedit itaque expedita earum deserunt magni doloremque velit eum id error\\",\\"type\\":\\"category\\",\\"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\\",\\"id\\":16,\\"url\\":\\"http://localhost:8889/?cat=16\\",\\"kind\\":\\"taxonomy\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->
<!-- /wp:navigation-link -->

<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"https://wordpress.org\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"description\\":\\"\\",\\"rel\\":\\"\\",\\"url\\":\\"https://google.com\\",\\"title\\":\\"\\",\\"className\\":\\"\\"} /-->
<!-- wp:navigation-link {\\"label\\":\\"WordPress.org\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://wordpress.org\\",\\"kind\\":\\"custom\\"} -->
<!-- wp:navigation-link {\\"label\\":\\"Google\\",\\"type\\":\\"custom\\",\\"url\\":\\"https://google.com\\",\\"kind\\":\\"custom\\"} /-->
<!-- /wp:navigation-link -->
<!-- /wp:navigation -->"
`;
Loading