docs: add the documentation on the block template

src/__block-template/block.json

@@ -10,5 +10,15 @@
 	],
 	"textdomain": "stackable-ultimate-gutenberg-blocks",
 	"stk-type": "special",
-	"stk-demo": "https://wpstackable.com/separator-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink"
+	"stk-demo": "https://wpstackable.com/separator-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink",
+	"stk-required-blocks": [
+		"stackable/icon-label",
+		"stackable/heading",
+		"stackable/icon"
+	],
+	"stk-substitution-blocks": [
+		"stackable/text"
+	],
+	"stk-block-dependency": "stackable/button-group|button",
+	"stk-available-states": [ "enabled", "hidden" ]
 }

src/__block-template/index.js

@@ -15,6 +15,7 @@ import save from './save'
 import schema from './schema'
 import metadata from './block.json'
 import example from './example'
+import substitute from './substitute'
 
 export const settings = {
 	/**
@@ -66,6 +67,7 @@ export const settings = {
 	example,
 	edit,
 	save,
+	substitute,
 
 	// TODO: Uncomment this if we will allow transformation from other blocks to this block.
 	// transforms,

src/__block-template/substitute.js

@@ -0,0 +1,25 @@
+export const substitute = {
+	from: 'stackable/card', // The name of the current block
+	transform: ( oldAttributes, innerBlocks ) => {
+		return [
+			'stackable/columns', // The name of the new block
+			{ ...oldAttributes }, // Attributes of the new block
+			// The inner blocks of the new block
+			[
+				[
+					'stackable/column',
+					{
+						align: oldAttributes.align,
+						hasContainer: true,
+					},
+					[
+						[ 'stackable/image', { imageUrl: oldAttributes.imageUrl } ],
+						...innerBlocks,
+					],
+				],
+			],
+		]
+	},
+}
+
+export default substitute