[WIP] Blocks: Explore how we could divide server and client block properties

blocks/api/registration.js

@@ -88,12 +88,6 @@ const POST_FORMAT_BLOCK_MAP = {
  *                     otherwise `undefined`.
  */
 export function registerBlockType( name, settings ) {
-	settings = {
-		name,
-		...get( window._wpBlocks, name ),
-		...settings,
-	};
-
 	if ( typeof name !== 'string' ) {
 		console.error(
 			'Block names must be strings.'
@@ -112,10 +106,21 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
+	if ( typeof settings !== 'object' ) {
+		console.error(
+			'Block settings must be objects.'
+		);
+		return;
+	}
 
-	settings = applyFilters( 'blocks.registerBlockType', settings, name );
+	settings = {
+		name,
+		...applyFilters( 'blocks.registerBlockType', settings, name ),
+		// the values set server-side can't be updated on the client
+		...get( window._wpBlocks, name, {} ),
+	};
 
-	if ( ! settings || ! isFunction( settings.save ) ) {
+	if ( ! isFunction( settings.save ) ) {
 		console.error(
 			'The "save" property must be specified and must be a valid function.'
 		);

blocks/api/test/registration.js

@@ -108,7 +108,7 @@ describe( 'blocks', () => {
 
 		it( 'should reject blocks without a save function', () => {
 			const block = registerBlockType( 'my-plugin/fancy-block-5' );
-			expect( console ).toHaveErroredWith( 'The "save" property must be specified and must be a valid function.' );
+			expect( console ).toHaveErroredWith( 'Block settings must be objects.' );
 			expect( block ).toBeUndefined();
 		} );
 
@@ -161,7 +161,7 @@ describe( 'blocks', () => {
 			expect( block ).toBeUndefined();
 		} );
 
-		it( 'should default to browser-initialized global attributes', () => {
+		it( 'should not update server-initialized attributes', () => {
 			const attributes = { ok: { type: 'boolean' } };
 			window._wpBlocks = {
 				'core/test-block-with-attributes': { attributes },
@@ -176,17 +176,7 @@ describe( 'blocks', () => {
 				category: 'common',
 				title: 'block title',
 				icon: 'block-default',
-				attributes: {
-					ok: {
-						type: 'boolean',
-					},
-					className: {
-						type: 'string',
-					},
-					layout: {
-						type: 'string',
-					},
-				},
+				attributes,
 			} );
 		} );
 

blocks/library/block/index.js

@@ -158,24 +158,12 @@ const ConnectedReusableBlockEdit = connect(
 	} )
 )( ReusableBlockEdit );
 
-export const name = 'core/block';
+export { name } from './settings.json';
 
 export const settings = {
 	title: __( 'Shared Block' ),
-	category: 'shared',
-	isPrivate: true,
-
-	attributes: {
-		ref: {
-			type: 'number',
-		},
-	},
-
-	supports: {
-		customClassName: false,
-		html: false,
-	},
 
 	edit: ConnectedReusableBlockEdit,
+
 	save: () => null,
 };

blocks/library/block/index.php

@@ -31,13 +31,3 @@ function gutenberg_render_block_core_reusable_block( $attributes ) {
 
 	return gutenberg_render_block( $block );
 }
-
-register_block_type( 'core/block', array(
-	'attributes'      => array(
-		'ref' => array(
-			'type' => 'number',
-		),
-	),
-
-	'render_callback' => 'gutenberg_render_block_core_reusable_block',
-) );

blocks/library/block/settings.json

@@ -0,0 +1,15 @@
+{
+  "name": "core/block",
+  "category": "shared",
+  "isPrivate": true,
+  "supports": {
+	"customClassName": false,
+	"html": false
+  },
+  "attributes": {
+	"ref": {
+	  "type": "number"
+	}
+  },
+  "render_callback": "gutenberg_render_block_core_reusable_block"
+}

blocks/library/categories/index.js

@@ -10,7 +10,7 @@ import './editor.scss';
 import './style.scss';
 import CategoriesBlock from './block';
 
-export const name = 'core/categories';
+export { name } from './settings.json';
 
 export const settings = {
 	title: __( 'Categories' ),
@@ -19,30 +19,6 @@ export const settings = {
 
 	icon: 'list-view',
 
-	category: 'widgets',
-
-	attributes: {
-		showPostCounts: {
-			type: 'boolean',
-			default: false,
-		},
-		displayAsDropdown: {
-			type: 'boolean',
-			default: false,
-		},
-		showHierarchy: {
-			type: 'boolean',
-			default: false,
-		},
-		align: {
-			type: 'string',
-		},
-	},
-
-	supports: {
-		html: false,
-	},
-
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( 'left' === align || 'right' === align || 'full' === align ) {

blocks/library/categories/index.php

@@ -83,14 +83,3 @@ function onCatChange() {
 	<?php
 	return ob_get_clean();
 }
-
-/**
- * Registers the `core/categories` block on server.
- */
-function register_block_core_categories() {
-	register_block_type( 'core/categories', array(
-		'render_callback' => 'render_block_core_categories',
-	) );
-}
-
-add_action( 'init', 'register_block_core_categories' );

blocks/library/categories/settings.json

@@ -0,0 +1,25 @@
+{
+  "name": "core/categories",
+  "category": "widgets",
+  "supports": {
+	"html": false
+  },
+  "attributes": {
+	"showPostCounts": {
+	  "type": "boolean",
+	  "default": false
+	},
+	"displayAsDropdown": {
+	  "type": "boolean",
+	  "default": false
+	},
+	"showHierarchy": {
+	  "type": "boolean",
+	  "default": false
+	},
+	"align": {
+	  "type": "string"
+	}
+  },
+  "render_callback": "render_block_core_categories"
+}

blocks/library/embed/index.js

@@ -26,39 +26,16 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 // These embeds do not work in sandboxes
 const HOSTS_NO_PREVIEWS = [ 'facebook.com' ];
 
-function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, keywords = [] } ) {
+function getEmbedBlockSettings( { title, icon, transforms, keywords = [] } ) {
 	return {
 		title,
 
 		description: __( 'The Embed block allows you to easily add videos, images, tweets, audio, and other content to your post or page.' ),
 
 		icon,
 
-		category,
-
 		keywords,
 
-		attributes: {
-			url: {
-				type: 'string',
-			},
-			caption: {
-				type: 'array',
-				source: 'children',
-				selector: 'figcaption',
-				default: [],
-			},
-			align: {
-				type: 'string',
-			},
-			type: {
-				type: 'string',
-			},
-			providerNameSlug: {
-				type: 'string',
-			},
-		},
-
 		transforms,
 
 		getEditWrapperProps( attributes ) {
@@ -255,7 +232,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 	};
 }
 
-export const name = 'core/embed';
+export { name } from './settings.json';
 
 export const settings = getEmbedBlockSettings( {
 	title: __( 'Embed' ),

blocks/library/embed/settings.json

@@ -0,0 +1,59 @@
+{
+  "name": "core/embed",
+  "category": "embed",
+  "attributes": {
+	"url": {
+	  "type": "string"
+	},
+	"caption": {
+	  "type": "array",
+	  "source": "children",
+	  "selector": "figcaption",
+	  "default": []
+	},
+	"align": {
+	  "type": "string"
+	},
+	"type": {
+	  "type": "string"
+	},
+	"providerNameSlug": {
+	  "type": "string"
+	}
+  },
+  "variations": [
+	"core-embed/twitter",
+	"core-embed/youtube",
+	"core-embed/facebook",
+	"core-embed/instagram",
+	"core-embed/wordpress",
+	"core-embed/soundcloud",
+	"core-embed/spotify",
+	"core-embed/flickr",
+	"core-embed/vimeo",
+	"core-embed/animoto",
+	"core-embed/cloudup",
+	"core-embed/collegehumor",
+	"core-embed/dailymotion",
+	"core-embed/funnyordie",
+	"core-embed/hulu",
+	"core-embed/imgur",
+	"core-embed/issuu",
+	"core-embed/kickstarter",
+	"core-embed/meetup-com",
+	"core-embed/mixcloud",
+	"core-embed/photobucket",
+	"core-embed/polldaddy",
+	"core-embed/reddit",
+	"core-embed/reverbnation",
+	"core-embed/screencast",
+	"core-embed/scribd",
+	"core-embed/slideshare",
+	"core-embed/smugmug",
+	"core-embed/speaker",
+	"core-embed/ted",
+	"core-embed/tumblr",
+	"core-embed/videopress",
+	"core-embed/wordpress-tv"
+  ]
+}

blocks/library/latest-posts/index.js

@@ -10,7 +10,7 @@ import './editor.scss';
 import './style.scss';
 import LatestPostsBlock from './block';
 
-export const name = 'core/latest-posts';
+export { name } from './settings.json';
 
 export const settings = {
 	title: __( 'Latest Posts' ),
@@ -19,14 +19,8 @@ export const settings = {
 
 	icon: 'list-view',
 
-	category: 'widgets',
-
 	keywords: [ __( 'recent posts' ) ],
 
-	supports: {
-		html: false,
-	},
-
 	getEditWrapperProps( attributes ) {
 		const { align } = attributes;
 		if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) {