Navigation: add transformations from a link to other allowed nav bloc…

…ks (#34978)
WordPress · Sep 23, 2021 · c821076 · c821076
1 parent f2c0752
commit c821076
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 15 deletions.
diff --git a/packages/block-library/src/navigation-link/index.js b/packages/block-library/src/navigation-link/index.js
@@ -5,7 +5,6 @@ import { _x } from '@wordpress/i18n';
 import { customLink as linkIcon } from '@wordpress/icons';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { addFilter } from '@wordpress/hooks';
-import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,6 +13,7 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import { enhanceNavigationLinkVariations } from './hooks';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -85,20 +85,7 @@ export const settings = {
 			},
 		},
 	],
-	transforms: {
-		to: [
-			{
-				type: 'block',
-				blocks: [ 'core/navigation-submenu' ],
-				transform: ( attributes, innerBlocks ) =>
-					createBlock(
-						'core/navigation-submenu',
-						attributes,
-						innerBlocks
-					),
-			},
-		],
-	},
+	transforms,
 };
 
 // importing this file includes side effects. This is whitelisted in block-library/package.json under sideEffects

diff --git a/packages/block-library/src/navigation-link/transforms.js b/packages/block-library/src/navigation-link/transforms.js
@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/home-link' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/social-links' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/navigation-submenu' ],
+			transform: ( attributes, innerBlocks ) =>
+				createBlock(
+					'core/navigation-submenu',
+					attributes,
+					innerBlocks
+				),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ],
+			transform: () => {
+				return createBlock( 'core/spacer' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			transform: () => {
+				return createBlock( 'core/site-logo' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/home-link' ],
+			transform: () => {
+				return createBlock( 'core/home-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/social-links' ],
+			transform: () => {
+				return createBlock( 'core/social-links' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			transform: () => {
+				return createBlock( 'core/search' );
+			},
+		},
+	],
+};
+
+export default transforms;
diff --git a/packages/block-library/src/navigation-submenu/index.js b/packages/block-library/src/navigation-submenu/index.js
@@ -10,6 +10,7 @@ import { addSubmenu } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -23,4 +24,6 @@ export const settings = {
 	edit,
 
 	save,
+
+	transforms,
 };
diff --git a/packages/block-library/src/navigation-submenu/transforms.js b/packages/block-library/src/navigation-submenu/transforms.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/navigation-link' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: ( attributes ) =>
+				createBlock( 'core/navigation-link', attributes ),
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: () => {
+				return createBlock( 'core/spacer' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: () => {
+				return createBlock( 'core/site-logo' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/home-link' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: () => {
+				return createBlock( 'core/home-link' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/social-links' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: () => {
+				return createBlock( 'core/social-links' );
+			},
+		},
+		{
+			type: 'block',
+			blocks: [ 'core/search' ],
+			isMatch: ( attributes, block ) => block?.innerBlocks?.length === 0,
+			transform: () => {
+				return createBlock( 'core/search' );
+			},
+		},
+	],
+};
+
+export default transforms;