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.

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

Navigation: Experiment with adding navigation link variations #29011

Closed
wants to merge 2 commits into from
Closed
Changes from 1 commit
Commits
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
Next Next commit
Experiment with adding navigation link varations
  • Loading branch information
gwwar committed Feb 15, 2021
commit 7027b6f75d8b2bdb591bf7dbb35051a663e81ef2
15 changes: 13 additions & 2 deletions packages/block-library/src/navigation-link/edit.js
Original file line number Diff line number Diff line change
@@ -109,9 +109,10 @@ const useIsDraggingWithin = ( elementRef ) => {
* /wp/v2/search.
*
* @param {string} type Link block's type attribute.
* @param {string} objectType Link block's object type attribute. (post-type|taxonomy)
* @return {{ type?: string, subtype?: string }} Search query params.
*/
function getSuggestionsQuery( type ) {
function getSuggestionsQuery( type, objectType ) {
switch ( type ) {
case 'post':
case 'page':
@@ -121,6 +122,12 @@ function getSuggestionsQuery( type ) {
case 'tag':
return { type: 'term', subtype: 'post_tag' };
default:
if ( objectType === 'taxonomy' ) {
return { type: 'term', subtype: type };
}
if ( objectType === 'post-type' ) {
return { type: 'post', subtype: type };
}
return {};
}
}
@@ -152,6 +159,7 @@ function NavigationLinkEdit( {
description,
rel,
title,
objectType,
} = attributes;
const link = {
url,
@@ -406,7 +414,10 @@ function NavigationLinkEdit( {
} }
noDirectEntry={ !! type }
noURLSuggestion={ !! type }
suggestionsQuery={ getSuggestionsQuery( type ) }
suggestionsQuery={ getSuggestionsQuery(
type,
objectType
) }
onChange={ ( {
title: newTitle = '',
url: newURL = '',
93 changes: 65 additions & 28 deletions packages/block-library/src/navigation-link/variations.js
Original file line number Diff line number Diff line change
@@ -8,6 +8,10 @@ import {
postTitle as postIcon,
tag as tagIcon,
} from '@wordpress/icons';

import apiFetch from '@wordpress/api-fetch';
import { registerBlockVariation } from '@wordpress/blocks';

const variations = [
{
name: 'link',
@@ -16,34 +20,6 @@ const variations = [
description: __( 'A link to a URL.' ),
attributes: {},
},
{
name: 'post',
icon: postIcon,
title: __( 'Post Link' ),
description: __( 'A link to a post.' ),
attributes: { type: 'post' },
},
{
name: 'page',
icon: pageIcon,
title: __( 'Page Link' ),
description: __( 'A link to a page.' ),
attributes: { type: 'page' },
},
{
name: 'category',
icon: categoryIcon,
title: __( 'Category Link' ),
description: __( 'A link to a category.' ),
attributes: { type: 'category' },
},
{
name: 'tag',
icon: tagIcon,
title: __( 'Tag Link' ),
description: __( 'A link to a tag.' ),
attributes: { type: 'tag' },
},
];

/**
@@ -57,4 +33,65 @@ variations.forEach( ( variation ) => {
blockAttributes.type === variationAttributes.type;
} );

const ICON_MAP = {
post: postIcon,
page: pageIcon,
tag: tagIcon,
category: categoryIcon,
};

Promise.all( [
apiFetch( {
path: '/wp/v2/types?context=edit&per_page=-1&show_in_nav_menus=true',
type: 'GET',
} ),
apiFetch( {
path:
'/wp/v2/taxonomies?context=edit&per_page=-1&show_in_nav_menus=true',
type: 'GET',
} ),
] ).then( function ( [ postTypes, taxonomies ] ) {
const postTypeKeys = Object.keys( postTypes );
for ( const type of postTypeKeys ) {
const postType = postTypes[ type ];
//customizer actually sets type = 'post-type', and 'object' = $post_type->name
registerBlockVariation( 'core/navigation-link', {
name: postType.slug, //TODO: can this be trusted to be unique?
attributes: { type: postType.slug, objectType: 'post-type' },
title: postType?.labels?.menu_name, //TODO: should this be passed through as a new type.label for description
...( ICON_MAP[ postType.slug ] && {
icon: ICON_MAP[ postType.slug ],
} ), //TODO: what about custom post type/taxonomy icons?
} );
}
const taxonomyKeys = Object.keys( taxonomies );
for ( const taxonomyKey of taxonomyKeys ) {
//customizer actually sets type = 'taxonomy', and 'object' = $taxonomy->name
//it also has a custom hook for: $item_types = apply_filters( 'customize_nav_menu_available_item_types', $item_types );
//TODO needs research for data structure choices, we likely need taxonomy|post_type and name, or term/post_type id
const taxonomy = taxonomies[ taxonomyKey ];
//tag is post_tag
if ( taxonomyKey === 'post_tag' ) {
registerBlockVariation( 'core/navigation-link', {
name: 'tag',
attributes: { type: 'tag', objectType: 'taxonomy' },
title: taxonomy?.labels?.menu_name,
icon: ICON_MAP.tag,
} );
} else {
registerBlockVariation( 'core/navigation-link', {
name: taxonomy.slug, //TODO: can this be trusted to be unique?
attributes: {
type: taxonomy.slug,
objectType: 'taxonomy',
},
title: taxonomy?.labels?.menu_name,
...( ICON_MAP[ taxonomy.slug ] && {
icon: ICON_MAP[ taxonomy.slug ],
} ),
} );
}
}
} );

export default variations;