Add/transform button to buttons (#20063)

* Implements transform on buttons

* DEV: Makes buttons transform multi block

* Improves variable names

* Adds some comments & imporoves code readability

packages/block-library/src/buttons/index.js

@@ -7,6 +7,7 @@ import { button as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import transforms from './transforms';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -26,6 +27,7 @@ export const settings = {
 		align: true,
 		alignWide: false,
 	},
+	transforms,
 	edit,
 	save,
 };

packages/block-library/src/buttons/transforms.js

@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name } from './block.json';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ 'core/button' ],
+			transform: ( buttons ) =>
+				// Creates the buttons block
+				createBlock(
+					name,
+					{},
+					// Loop the selected buttons
+					buttons.map( ( attributes ) =>
+						// Create singular button in the buttons block
+						createBlock( 'core/button', attributes )
+					)
+				),
+		},
+	],
+};
+
+export default transforms;