Block API: Initial explorations to migrate to server-registered blocks

bin/get-server-blocks.php

@@ -0,0 +1,39 @@
+#!/usr/bin/env php
+<?php
+/**
+ * Generates server-registered blocks, writing to standard output. By default
+ * assumes plugin exists in a standard install `wp-content/plugins` directory.
+ * Define ABSPATH environment variable pointing to WordPress install otherwise.
+ *
+ * @package gutenberg-build
+ */
+
+// Disable error reporting which would otherwise be displayed in stdout along
+// with the JSON output.
+error_reporting( 0 );
+
+$abspath = getenv( 'ABSPATH' );
+define( 'ABSPATH', $abspath ? $abspath : dirname( dirname( dirname( dirname( dirname( __FILE__ ) ) ) ) ) . '/' );
+define( 'WPINC', 'wp-includes' );
+define( 'WP_SETUP_CONFIG', true );
+define( 'WP_USE_THEMES', false );
+require_once( ABSPATH . WPINC . '/load.php' );
+require_once( ABSPATH . WPINC . '/default-constants.php' );
+wp_fix_server_vars();
+wp_initial_constants();
+require_once( ABSPATH . WPINC . '/functions.php' );
+wp_load_translations_early();
+wp_set_lang_dir();
+require_once( dirname( dirname( __FILE__ ) ) . '/lib/blocks.php' );
+require_once( dirname( dirname( __FILE__ ) ) . '/lib/class-wp-block-type-registry.php' );
+require_once( dirname( dirname( __FILE__ ) ) . '/lib/class-wp-block-type.php' );
+require_once( dirname( dirname( __FILE__ ) ) . '/lib/client-assets.php' );
+
+// Register server-side code for individual blocks.
+foreach ( glob( dirname( dirname( __FILE__ ) ) . '/blocks/library/*/index.php' ) as $block_logic ) {
+	require_once $block_logic;
+}
+
+do_action( 'init' );
+
+echo json_encode( gutenberg_prepare_blocks_for_js() );

blocks/api/registration.js

@@ -49,6 +49,12 @@ let defaultBlockName;
  *                             registered; 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.'
@@ -113,12 +119,6 @@ export function registerBlockType( name, settings ) {
 		settings.icon = 'block-default';
 	}
 
-	settings = {
-		name,
-		attributes: get( window._wpBlocksAttributes, name, {} ),
-		...settings,
-	};
-
 	settings = applyFilters( 'blocks.registerBlockType', settings, name );
 
 	return blocks[ name ] = settings;
@@ -223,7 +223,7 @@ export function hasBlockSupport( nameOrType, feature, defaultSupports ) {
  * Determines whether or not the given block is a reusable block. This is a
  * special block type that is used to point to a global block stored via the
  * API.
- * 
+ *
  * @param {Object} blockOrType Block or Block Type to test
  * @return {Boolean}           Whether the given block is a reusable block
  */

blocks/api/test/registration.js

@@ -41,7 +41,7 @@ describe( 'blocks', () => {
 		} );
 		setUnknownTypeHandlerName( undefined );
 		setDefaultBlockName( undefined );
-		window._wpBlocksAttributes = {};
+		window._wpBlocks = {};
 		console.error = error;
 	} );
 
@@ -163,8 +163,8 @@ describe( 'blocks', () => {
 
 		it( 'should default to browser-initialized global attributes', () => {
 			const attributes = { ok: { type: 'boolean' } };
-			window._wpBlocksAttributes = {
-				'core/test-block-with-attributes': attributes,
+			window._wpBlocks = {
+				'core/test-block-with-attributes': { attributes },
 			};
 
 			const blockType = { settingName: 'settingValue', save: noop, category: 'common', title: 'block title' };

blocks/test/fixtures/core__latest-posts.json

@@ -8,7 +8,9 @@
             "displayPostDate": false,
             "layout": "list",
             "columns": 3,
-            "align": "center"
+            "align": "center",
+            "order": "desc",
+            "orderBy": "date"
         },
         "originalContent": ""
     }

blocks/test/fixtures/core__latest-posts__displayPostDate.json

@@ -8,7 +8,9 @@
             "displayPostDate": true,
             "layout": "list",
             "columns": 3,
-            "align": "center"
+            "align": "center",
+            "order": "desc",
+            "orderBy": "date"
         },
         "originalContent": ""
     }

blocks/test/full-content.js

@@ -89,7 +89,7 @@ function normalizeParsedBlocks( blocks ) {
 
 describe( 'full post content fixture', () => {
 	beforeAll( () => {
-		window._wpBlocksAttributes = require( './server-attributes.json' );
+		window._wpBlocks = require( './server-registered.json' );
 
 		// Register all blocks.
 		require( 'blocks' );

blocks/test/server-registered.json

@@ -0,0 +1 @@
+{"core\/block":{"attributes":{"ref":{"type":"number"}}},"core\/latest-posts":{"attributes":{"categories":{"type":"string"},"postsToShow":{"type":"number","default":5},"displayPostDate":{"type":"boolean","default":false},"layout":{"type":"string","default":"list"},"columns":{"type":"number","default":3},"align":{"type":"string","default":"center"},"order":{"type":"string","default":"desc"},"orderBy":{"type":"string","default":"date"}}}}

lib/client-assets.php

@@ -531,6 +531,35 @@ function gutenberg_get_post_to_edit( $post_id ) {
 	return rest_get_server()->response_to_data( $response, false );
 }
 
+/**
+ * Prepares server-registered blocks for JavaScript, returning an associative
+ * array of registered block data keyed by block name. Data includes properties
+ * of a block relevant for client registration.
+ *
+ * @return array An associative array of registered block data.
+ */
+function gutenberg_prepare_blocks_for_js() {
+	$block_registry = WP_Block_Type_Registry::get_instance();
+	$blocks         = array();
+	$keys_to_pick   = array( 'title', 'icon', 'category', 'keywords', 'supports', 'attributes' );
+
+	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
+		foreach ( $keys_to_pick as $key ) {
+			if ( ! isset( $block_type->{ $key } ) ) {
+				continue;
+			}
+
+			if ( ! isset( $blocks[ $block_name ] ) ) {
+				$blocks[ $block_name ] = array();
+			}
+
+			$blocks[ $block_name ][ $key ] = $block_type->{ $key };
+		}
+	}
+
+	return $blocks;
+}
+
 /**
  * Handles the enqueueing of block scripts and styles that are common to both
  * the editor and the front-end.
@@ -750,16 +779,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 	);
 
 	// Preload server-registered block schemas.
-	$block_registry = WP_Block_Type_Registry::get_instance();
-	$schemas        = array();
-
-	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
-		if ( isset( $block_type->attributes ) ) {
-			$schemas[ $block_name ] = $block_type->attributes;
-		}
-	}
-
-	wp_localize_script( 'wp-blocks', '_wpBlocksAttributes', $schemas );
+	wp_localize_script( 'wp-blocks', '_wpBlocks', gutenberg_prepare_blocks_for_js() );
 
 	// Get admin url for handling meta boxes.
 	$meta_box_url = admin_url( 'post.php' );

package.json

@@ -139,8 +139,8 @@
     "test": "npm run lint && npm run test-unit",
     "ci": "concurrently \"npm run lint && npm run build\" \"npm run test-unit:coverage-ci\"",
     "fixtures:clean": "rimraf \"blocks/test/fixtures/*.+(json|serialized.html)\"",
-    "fixtures:server-attributes": "./bin/get-server-block-attributes.php > blocks/test/server-attributes.json",
-    "fixtures:generate": "npm run fixtures:server-attributes && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
+    "fixtures:server-registered": "./bin/get-server-blocks.php > blocks/test/server-registered.json",
+    "fixtures:generate": "npm run fixtures:server-registered && cross-env GENERATE_MISSING_FIXTURES=y npm run test-unit",
     "fixtures:regenerate": "npm run fixtures:clean && npm run fixtures:generate",
     "package-plugin": "./bin/build-plugin-zip.sh",
     "test-unit": "jest",

phpunit/class-prepare-for-js-test.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Block types registration Tests
+ *
+ * @package Gutenberg
+ */
+
+/**
+ * Test gutenberg_prepare_blocks_for_js()
+ */
+class Prepare_For_JS_Test extends WP_UnitTestCase {
+
+	function setUp() {
+		parent::setUp();
+
+		$this->reset();
+	}
+
+	function tearDown() {
+		parent::tearDown();
+
+		$this->reset();
+	}
+
+	function reset() {
+		foreach ( WP_Block_Type_Registry::get_instance()->get_all_registered() as $name => $block_type ) {
+			WP_Block_Type_Registry::get_instance()->unregister( $name );
+		}
+	}
+
+	function test_gutenberg_prepare_blocks_for_js() {
+		$name     = 'core/paragraph';
+		$settings = array(
+			'icon'            => 'text',
+			'render_callback' => 'foo',
+		);
+
+		register_block_type( $name, $settings );
+
+		$blocks = gutenberg_prepare_blocks_for_js();
+
+		$this->assertEquals( array(
+			'core/paragraph' => array(
+				'icon' => 'text',
+			),
+		), $blocks );
+	}
+}

test/unit/setup-globals.js

@@ -54,3 +54,6 @@ global.window.userSettings = { uid: 1 };
 
 // Mock jQuery
 global.window.jQuery = { holdReady() {} };
+
+// Bootstrap server-registered blocks
+global.window._wpBlocks = require( 'blocks/test/server-registered.json' );