fix: import substitution rules and apply

Author: Arukuen

src/blocks.js

@@ -22,6 +22,7 @@ import {
 	BLOCK_STATE,
 } from '~stackable/util'
 import { withVisualGuideContext } from '~stackable/higher-order'
+import { omit } from 'lodash'
 
 /**
  * WordPress dependencies
@@ -33,6 +34,19 @@ import { addFilter } from '@wordpress/hooks'
 // Register our block category.
 addStackableBlockCategory()
 
+// Fetch all substitution rules before registering
+const fetchSubstitutionRules = r => {
+	const substitutionRules = {}
+	r.keys().forEach( key => {
+		const { substitute } = r( key )
+		if ( ! substitute ) {
+			return
+		}
+		substitutionRules[ substitute.from ] = omit( substitute, 'from' )
+	} )
+	return substitutionRules
+}
+
 // Register all the blocks found
 const importAllAndRegister = r => {
 	r.keys().forEach( key => {
@@ -71,4 +85,6 @@ addFilter( 'stackable.registerBlockType.edit', 'stackable', edit => {
 	return withVisualGuideContext( edit )
 } )
 
+export const substitutionRules = fetchSubstitutionRules( require.context( './block', true, /substitute\.js$/ ) )
+
 importAllAndRegister( require.context( './block', true, /index\.js$/ ) )

src/disabled-blocks.js

@@ -8,7 +8,8 @@ import {
 	BLOCK_STATE,
 	substituteCoreIfDisabled,
 } from '~stackable/util'
-import _ from 'lodash'
+import { substitutionRules } from './blocks'
+import { cloneDeep } from 'lodash'
 
 const getDefaultVariation = variations => {
 	return variations?.find( ( { isDefault } ) => isDefault )?.name
@@ -34,7 +35,7 @@ const traverseBlocksAndSubstitute = ( blocks, whitelist ) => {
 		}
 
 		if ( whitelist.includes( blockName ) ) {
-			return substituteCoreIfDisabled( blockName, blockAttributes, innerBlocks )
+			return substituteCoreIfDisabled( blockName, blockAttributes, innerBlocks, substitutionRules )
 		}
 
 		if ( innerBlocks ) {
@@ -83,7 +84,7 @@ const applySettingsToMeta = metadata => {
 	const whitelist = metadata[ 'stk-substitution-blocks' ]
 	if ( whitelist ) {
 		variations = variations.map( variation => {
-			const newVariation = _.cloneDeep( variation )
+			const newVariation = cloneDeep( variation )
 			if ( newVariation.innerBlocks && Array.isArray( newVariation.innerBlocks ) ) {
 				newVariation.innerBlocks = traverseBlocksAndSubstitute( newVariation.innerBlocks, whitelist )
 			}

src/util/blocks.js

@@ -523,83 +523,27 @@ export const registerBlockType = ( name, _settings ) => {
  *
  * @param {string} blockName The block name
  * @param {Object} blockAttributes The block attributes
- * @param {Array} children The children blocks
+ * @param {Array} innerBlocks The children blocks
+ * @param {Object} substitutionRules The substitution rules for transforming from stackable to core blocks
  *
  * @return {Array} The resulting block definition
  */
-export const substituteCoreIfDisabled = ( blockName, blockAttributes, children ) => {
+export const substituteCoreIfDisabled = ( blockName, blockAttributes, innerBlocks, substitutionRules ) => {
 	const disabled_blocks = stackableSettings.stackable_block_states || {} // eslint-disable-line camelcase
 
-	if ( blockName === 'stackable/text' ) {
-		if ( blockName in disabled_blocks && disabled_blocks[ blockName ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			return [ 'core/paragraph', {
-				content: blockAttributes.text,
-			} ]
-		}
-		return [ 'stackable/text', blockAttributes ]
-	}
-
-	if ( blockName === 'stackable/heading' ) {
-		if ( blockName in disabled_blocks && disabled_blocks[ blockName ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			return [ 'core/heading', {
-				content: blockAttributes.text,
-				level: blockAttributes.textTag ? Number( blockAttributes.textTag.replace( 'h', '' ) ) : 2,
-			} ]
-		}
-		return [ 'stackable/heading', { ...blockAttributes } ]
-	}
-
-	if ( blockName === 'stackable/subtitle' ) {
-		if ( blockName in disabled_blocks && disabled_blocks[ blockName ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			return [ 'core/paragraph', {
-				content: blockAttributes.text,
-			} ]
-		}
-		return [ 'stackable/subtitle', blockAttributes ]
-	}
-
-	if ( blockName === 'stackable/button-group' ) {
-		if ( 'stackable/button-group|button' in disabled_blocks && disabled_blocks[ 'stackable/button-group|button' ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			return [ 'core/buttons', {}, children ]
-		}
-		if ( 'stackable/button-group|icon-button' in disabled_blocks && disabled_blocks[ 'stackable/button-group|icon-button' ] === BLOCK_STATE.DISABLED && // eslint-disable-line camelcase
-			children.length &&
-			children[ 0 ][ 0 ] === 'stackable/icon-button'
-		) {
-			return [ 'core/social-links',
-				{ align: blockAttributes.contentAlign },
-				[
-					[ 'core/social-link', { service: 'facebook' } ],
-					[ 'core/social-link', { service: 'twitter' } ],
-				],
-			]
-		}
-		return [ 'stackable/button-group', blockAttributes, children ]
-	}
-
-	if ( blockName === 'stackable/button' ) {
-		if ( 'stackable/button-group|button' in disabled_blocks && disabled_blocks[ 'stackable/button-group|button' ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			return [ 'core/button', {
-				text: blockAttributes.text,
-			} ]
+	if ( substitutionRules && blockName in substitutionRules ) {
+		const substitutionRule = substitutionRules[ blockName ]
+		// If a block have variants, let the the transform handle all the substitution
+		if ( 'variants' in substitutionRule ) {
+			return substitutionRule.transform( blockAttributes, innerBlocks, disabled_blocks )
 		}
-		return [ 'stackable/button', blockAttributes ]
-	}
-
-	if ( blockName === 'stackable/image' ) {
 		if ( blockName in disabled_blocks && disabled_blocks[ blockName ] === BLOCK_STATE.DISABLED ) { // eslint-disable-line camelcase
-			if ( blockAttributes ) {
-				return [ 'core/image', {
-					height: blockAttributes.imageHeight,
-				} ]
-			}
-			return [ 'core/image' ]
+			return [ substitutionRule.to, substitutionRule.transform( blockAttributes, innerBlocks ) ]
 		}
-		return [ 'stackable/image', blockAttributes ]
 	}
 
-	if ( children ) {
-		return [ blockName, blockAttributes, children ]
+	if ( innerBlocks ) {
+		return [ blockName, blockAttributes, innerBlocks ]
 	}
 	return [ blockName, blockAttributes ]
 }