Block library: Introduce block.json metadata for all client side blocks

packages/block-library/src/audio/block.json

@@ -0,0 +1,38 @@
+{
+	"name": "core/audio",
+	"category": "common",
+	"attributes": {
+		"src": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "src"
+		},
+		"caption": {
+			"type": "string",
+			"source": "html",
+			"selector": "figcaption"
+		},
+		"id": {
+			"type": "number"
+		},
+		"autoplay": {
+			"type": "boolean",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "autoplay"
+		},
+		"loop": {
+			"type": "boolean",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "loop"
+		},
+		"preload": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "audio",
+			"attribute": "preload"
+		}
+	}
+}

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

@@ -11,8 +11,11 @@ import { __ } from '@wordpress/i18n';
  */
 import edit from './edit';
 import icon from './icon';
+import metadata from './block.json';
 
-export const name = 'core/audio';
+const { name } = metadata;
+
+export { metadata, name };
 
 export const settings = {
 	title: __( 'Audio' ),
@@ -21,43 +24,6 @@ export const settings = {
 
 	icon,
 
-	category: 'common',
-
-	attributes: {
-		src: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'audio',
-			attribute: 'src',
-		},
-		caption: {
-			type: 'string',
-			source: 'html',
-			selector: 'figcaption',
-		},
-		id: {
-			type: 'number',
-		},
-		autoplay: {
-			type: 'boolean',
-			source: 'attribute',
-			selector: 'audio',
-			attribute: 'autoplay',
-		},
-		loop: {
-			type: 'boolean',
-			source: 'attribute',
-			selector: 'audio',
-			attribute: 'loop',
-		},
-		preload: {
-			type: 'string',
-			source: 'attribute',
-			selector: 'audio',
-			attribute: 'preload',
-		},
-	},
-
 	transforms: {
 		from: [
 			{

packages/block-library/src/button/block.json

@@ -0,0 +1,35 @@
+{
+	"name": "core/button",
+	"category": "layout",
+	"attributes": {
+		"url": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "href"
+		},
+		"title": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "a",
+			"attribute": "title"
+		},
+		"text": {
+			"type": "string",
+			"source": "html",
+			"selector": "a"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"textColor": {
+			"type": "string"
+		},
+		"customBackgroundColor": {
+			"type": "string"
+		},
+		"customTextColor": {
+			"type": "string"
+		}
+	}
+}

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

@@ -18,40 +18,11 @@ import {
  */
 import edit from './edit';
 import icon from './icon';
+import metadata from './block.json';
 
-const blockAttributes = {
-	url: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'a',
-		attribute: 'href',
-	},
-	title: {
-		type: 'string',
-		source: 'attribute',
-		selector: 'a',
-		attribute: 'title',
-	},
-	text: {
-		type: 'string',
-		source: 'html',
-		selector: 'a',
-	},
-	backgroundColor: {
-		type: 'string',
-	},
-	textColor: {
-		type: 'string',
-	},
-	customBackgroundColor: {
-		type: 'string',
-	},
-	customTextColor: {
-		type: 'string',
-	},
-};
+const { name, attributes: blockAttributes } = metadata;
 
-export const name = 'core/button';
+export { metadata, name };
 
 const colorsMigration = ( attributes ) => {
 	return omit( {
@@ -68,12 +39,8 @@ export const settings = {
 
 	icon,
 
-	category: 'layout',
-
 	keywords: [ __( 'link' ) ],
 
-	attributes: blockAttributes,
-
 	supports: {
 		align: true,
 		alignWide: false,

packages/block-library/src/classic/block.json

@@ -0,0 +1,10 @@
+{
+	"name": "core/freeform",
+	"category": "formatting",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "html"
+		}
+	}
+}

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

@@ -9,8 +9,11 @@ import { __, _x } from '@wordpress/i18n';
  */
 import edit from './edit';
 import icon from './icon';
+import metadata from './block.json';
 
-export const name = 'core/freeform';
+const { name } = metadata;
+
+export { metadata, name };
 
 export const settings = {
 	title: _x( 'Classic', 'block title' ),
@@ -19,15 +22,6 @@ export const settings = {
 
 	icon,
 
-	category: 'formatting',
-
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'html',
-		},
-	},
-
 	supports: {
 		className: false,
 		customClassName: false,

packages/block-library/src/code/block.json

@@ -0,0 +1,11 @@
+{
+	"name": "core/code",
+	"category": "formatting",
+	"attributes": {
+		"content": {
+			"type": "string",
+			"source": "text",
+			"selector": "code"
+		}
+	}
+}

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

@@ -9,8 +9,11 @@ import { createBlock } from '@wordpress/blocks';
  */
 import edit from './edit';
 import icon from './icon';
+import metadata from './block.json';
 
-export const name = 'core/code';
+const { name } = metadata;
+
+export { metadata, name };
 
 export const settings = {
 	title: __( 'Code' ),
@@ -19,16 +22,6 @@ export const settings = {
 
 	icon,
 
-	category: 'formatting',
-
-	attributes: {
-		content: {
-			type: 'string',
-			source: 'text',
-			selector: 'code',
-		},
-	},
-
 	supports: {
 		html: false,
 	},

packages/block-library/src/column/block.json

@@ -0,0 +1,9 @@
+{
+	"name": "core/column",
+	"category": "common",
+	"attributes": {
+		"verticalAlignment": {
+			"type": "string"
+		}
+	}
+}

packages/block-library/src/columns/column.js → packages/block-library/src/column/index.js

@@ -12,7 +12,14 @@ import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@word
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-export const name = 'core/column';
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+const { name } = metadata;
+
+export { metadata, name };
 
 const ColumnEdit = ( { attributes, updateAlignment } ) => {
 	const { verticalAlignment } = attributes;
@@ -70,14 +77,6 @@ export const settings = {
 
 	description: __( 'A single column within a columns block.' ),
 
-	category: 'common',
-
-	attributes: {
-		verticalAlignment: {
-			type: 'string',
-		},
-	},
-
 	supports: {
 		inserter: false,
 		reusable: false,

packages/block-library/src/columns/block.json

@@ -0,0 +1,13 @@
+{
+	"name": "core/columns",
+	"category": "layout",
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 2
+		},
+		"verticalAlignment": {
+			"type": "string"
+		}
+	}
+}

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

@@ -18,26 +18,17 @@ import {
 import deprecated from './deprecated';
 import edit from './edit';
 import icon from './icon';
+import metadata from './block.json';
 
-export const name = 'core/columns';
+const { name } = metadata;
+
+export { metadata, name };
 
 export const settings = {
 	title: __( 'Columns' ),
 
 	icon,
 
-	category: 'layout',
-
-	attributes: {
-		columns: {
-			type: 'number',
-			default: 2,
-		},
-		verticalAlignment: {
-			type: 'string',
-		},
-	},
-
 	description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ),
 
 	supports: {

packages/block-library/src/cover/block.json

@@ -0,0 +1,33 @@
+{
+	"name": "core/cover",
+	"category": "common",
+	"attributes": {
+		"url": {
+			"type": "string"
+		},
+		"id": {
+			"type": "number"
+		},
+		"hasParallax": {
+			"type": "boolean",
+			"default": false
+		},
+		"dimRatio": {
+			"type": "number",
+			"default": 50
+		},
+		"overlayColor": {
+			"type": "string"
+		},
+		"customOverlayColor": {
+			"type": "string"
+		},
+		"backgroundType": {
+			"type": "string",
+			"default": "image"
+		},
+		"focalPoint": {
+			"type": "object"
+		}
+	}
+}