Add block variation matcher to display information from a found match (…

…#28626)
WordPress · Feb 2, 2021 · 05f0e57 · 05f0e57
1 parent 728485d
commit 05f0e57
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 44 deletions.
diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js
@@ -2,13 +2,7 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import {
-	category as categoryIcon,
-	mapMarker as linkIcon,
-	page as pageIcon,
-	postTitle as postIcon,
-	tag as tagIcon,
-} from '@wordpress/icons';
+import { mapMarker as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 
 /**
@@ -17,6 +11,7 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -29,43 +24,7 @@ export const settings = {
 
 	description: __( 'Add a page, link, or another item to your navigation.' ),
 
-	variations: [
-		{
-			name: 'link',
-			isDefault: true,
-			title: __( 'Link' ),
-			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' },
-		},
-	],
+	variations,
 
 	__experimentalLabel: ( { label } ) => label,
 

diff --git a/packages/block-library/src/navigation-link/variations.js b/packages/block-library/src/navigation-link/variations.js
@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	category as categoryIcon,
+	page as pageIcon,
+	postTitle as postIcon,
+	tag as tagIcon,
+} from '@wordpress/icons';
+const variations = [
+	{
+		name: 'link',
+		isDefault: true,
+		title: __( 'Link' ),
+		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' },
+	},
+];
+
+/**
+ * Add `isActive` function to all `navigation link` variations, if not defined.
+ * `isActive` function is used to find a variation match from a created
+ *  Block by providing its attributes.
+ */
+variations.forEach( ( variation ) => {
+	if ( variation.isActive ) return;
+	variation.isActive = ( blockAttributes, variationAttributes ) =>
+		blockAttributes.type === variationAttributes.type;
+} );
+
+export default variations;