Blocks: Add a data store to manage the block/categories registration

blocks/api/categories.js

@@ -1,27 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-
-/**
- * Block categories are defined groups for organizing blocks.
- *
- * @var {Array} categories
- */
-const categories = [
-	{ slug: 'common', title: __( 'Common Blocks' ) },
-	{ slug: 'formatting', title: __( 'Formatting' ) },
-	{ slug: 'layout', title: __( 'Layout Elements' ) },
-	{ slug: 'widgets', title: __( 'Widgets' ) },
-	{ slug: 'embed', title: __( 'Embeds' ) },
-	{ slug: 'shared', title: __( 'Shared Blocks' ) },
-];
+import { select } from '@wordpress/data';
 
 /**
  * Returns all the block categories.
  *
  * @return {Array} Block categories.
  */
 export function getCategories() {
-	return categories;
+	return select( 'core/blocks' ).getCategories();
 }

blocks/api/registration.js

@@ -9,11 +9,7 @@ import { get, isFunction, some } from 'lodash';
  * WordPress dependencies
  */
 import { applyFilters } from '@wordpress/hooks';
-
-/**
- * Internal dependencies
- */
-import { getCategories } from './categories';
+import { select, dispatch } from '@wordpress/data';
 
 /**
  * Defined behavior of a block type.
@@ -40,29 +36,6 @@ import { getCategories } from './categories';
  *                                           interacted with in an editor.
  */
 
-/**
- * Block type definitions keyed by block name.
- *
- * @type {Object.<string,WPBlockType>}
- */
-const blocks = {};
-
-const categories = getCategories();
-
-/**
- * Name of block handling unknown types.
- *
- * @type {?string}
- */
-let unknownTypeHandlerName;
-
-/**
- * Name of the default block.
- *
- * @type {?string}
- */
-let defaultBlockName;
-
 /**
  * Constant mapping post formats to the expected default block.
  *
@@ -106,7 +79,7 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
-	if ( blocks[ name ] ) {
+	if ( select( 'core/blocks' ).getBlockType( name ) ) {
 		console.error(
 			'Block "' + name + '" is already registered.'
 		);
@@ -139,7 +112,10 @@ export function registerBlockType( name, settings ) {
 		);
 		return;
 	}
-	if ( 'category' in settings && ! some( categories, { slug: settings.category } ) ) {
+	if (
+		'category' in settings &&
+		! some( select( 'core/blocks' ).getCategories(), { slug: settings.category } )
+	) {
 		console.error(
 			'The block "' + name + '" must have a registered category.'
 		);
@@ -161,7 +137,9 @@ export function registerBlockType( name, settings ) {
 		settings.icon = 'block-default';
 	}
 
-	return blocks[ name ] = settings;
+	dispatch( 'core/blocks' ).addBlockTypes( settings );
+
+	return settings;
 }
 
 /**
@@ -173,14 +151,14 @@ export function registerBlockType( name, settings ) {
  *                     unregistered; otherwise `undefined`.
  */
 export function unregisterBlockType( name ) {
-	if ( ! blocks[ name ] ) {
+	const oldBlock = select( 'core/blocks' ).getBlockType( name );
+	if ( ! oldBlock ) {
 		console.error(
 			'Block "' + name + '" is not registered.'
 		);
 		return;
 	}
-	const oldBlock = blocks[ name ];
-	delete blocks[ name ];
+	dispatch( 'core/blocks' ).removeBlockTypes( name );
 	return oldBlock;
 }
 
@@ -190,7 +168,7 @@ export function unregisterBlockType( name ) {
  * @param {string} name Block name.
  */
 export function setUnknownTypeHandlerName( name ) {
-	unknownTypeHandlerName = name;
+	dispatch( 'core/blocks' ).setFallbackBlockType( name );
 }
 
 /**
@@ -200,7 +178,7 @@ export function setUnknownTypeHandlerName( name ) {
  * @return {?string} Blog name.
  */
 export function getUnknownTypeHandlerName() {
-	return unknownTypeHandlerName;
+	return select( 'core/blocks' ).getFallbackBlockTypeName();
 }
 
 /**
@@ -209,7 +187,7 @@ export function getUnknownTypeHandlerName() {
  * @param {string} name Block name.
  */
 export function setDefaultBlockName( name ) {
-	defaultBlockName = name;
+	dispatch( 'core/blocks' ).setDefaultBlockType( name );
 }
 
 /**
@@ -218,7 +196,7 @@ export function setDefaultBlockName( name ) {
  * @return {?string} Block name.
  */
 export function getDefaultBlockName() {
-	return defaultBlockName;
+	return select( 'core/blocks' ).getDefaultBlockTypeName();
 }
 
 /**
@@ -243,7 +221,7 @@ export function getDefaultBlockForPostFormat( postFormat ) {
  * @return {?Object} Block type.
  */
 export function getBlockType( name ) {
-	return blocks[ name ];
+	return select( 'core/blocks' ).getBlockType( name );
 }
 
 /**
@@ -252,7 +230,7 @@ export function getBlockType( name ) {
  * @return {Array} Block settings.
  */
 export function getBlockTypes() {
-	return Object.values( blocks );
+	return select( 'core/blocks' ).getBlockTypes();
 }
 
 /**

blocks/api/test/registration.js

@@ -31,6 +31,9 @@ describe( 'blocks', () => {
 	beforeAll( () => {
 		// Load all hooks that modify blocks
 		require( 'editor/hooks' );
+
+		// Initialize the block store
+		require( '../../store' );
 	} );
 
 	afterEach( () => {

blocks/api/test/templates.js

@@ -11,6 +11,11 @@ import { getBlockTypes, unregisterBlockType, registerBlockType } from '../regist
 import { doBlocksMatchTemplate, synchronizeBlocksWithTemplate } from '../templates';
 
 describe( 'templates', () => {
+	beforeAll( () => {
+		// Initialize the block store
+		require( '../../store' );
+	} );
+
 	afterEach( () => {
 		getBlockTypes().forEach( ( block ) => {
 			unregisterBlockType( block.name );

blocks/api/test/utils.js

@@ -11,6 +11,11 @@ import { getBlockTypes, unregisterBlockType, registerBlockType, setDefaultBlockN
 import { isUnmodifiedDefaultBlock } from '../utils';
 
 describe( 'block helpers', () => {
+	beforeAll( () => {
+		// Initialize the block store
+		require( '../../store' );
+	} );
+
 	afterEach( () => {
 		setDefaultBlockName( undefined );
 		getBlockTypes().forEach( ( block ) => {

blocks/api/test/validation.js

@@ -29,6 +29,10 @@ describe( 'validation', () => {
 		category: 'common',
 		title: 'block title',
 	};
+	beforeAll( () => {
+		// Initialize the block store
+		require( '../../store' );
+	} );
 
 	afterEach( () => {
 		setUnknownTypeHandlerName( undefined );

blocks/index.js

@@ -7,4 +7,5 @@
 //
 // Blocks are inferred from the HTML source of a post through a parsing mechanism
 // and then stored as objects in state, from which it is then rendered for editing.
+import './store';
 export * from './api';

blocks/store/actions.js

@@ -0,0 +1,60 @@
+/**
+ * External dependencies
+ */
+import { castArray } from 'lodash';
+
+/**
+ * Returns an action object used in signalling that block types have been added.
+ *
+ * @param {Array|Object} blockTypes Block types received.
+ *
+ * @return {Object} Action object.
+ */
+export function addBlockTypes( blockTypes ) {
+	return {
+		type: 'ADD_BLOCK_TYPES',
+		blockTypes: castArray( blockTypes ),
+	};
+}
+
+/**
+ * Returns an action object used to remove a registered block type.
+ *
+ * @param {string|Array} names Block name.
+ *
+ * @return {Object} Action object.
+ */
+export function removeBlockTypes( names ) {
+	return {
+		type: 'REMOVE_BLOCK_TYPES',
+		names: castArray( names ),
+	};
+}
+
+/**
+ * Returns an action object used to set the default block type.
+ *
+ * @param {string} name Block name.
+ *
+ * @return {Object} Action object.
+ */
+export function setDefaultBlockType( name ) {
+	return {
+		type: 'SET_DEFAULT_BLOCK_TYPE',
+		name,
+	};
+}
+
+/**
+ * Returns an action object used to set the fallback block type.
+ *
+ * @param {string} name Block name.
+ *
+ * @return {Object} Action object.
+ */
+export function setFallbackBlockType( name ) {
+	return {
+		type: 'SET_FALLBACK_BLOCK_TYPE',
+		name,
+	};
+}

blocks/store/index.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+
+registerStore( 'core/blocks', { reducer, selectors, actions } );

blocks/store/reducer.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import { filter, map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { combineReducers } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Module Constants
+ */
+export const DEFAULT_CATEGORIES = [
+	{ slug: 'common', title: __( 'Common Blocks' ) },
+	{ slug: 'formatting', title: __( 'Formatting' ) },
+	{ slug: 'layout', title: __( 'Layout Elements' ) },
+	{ slug: 'widgets', title: __( 'Widgets' ) },
+	{ slug: 'embed', title: __( 'Embeds' ) },
+	{ slug: 'shared', title: __( 'Shared Blocks' ) },
+];
+
+/**
+ * Reducer managing the block types
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function blockTypes( state = { types: [] }, action ) {
+	switch ( action.type ) {
+		case 'ADD_BLOCK_TYPES':
+			const addedNames = map( action.blockTypes, ( blockType ) => blockType.name );
+			const previousState = filter(
+				state.types,
+				( blockType ) => addedNames.indexOf( blockType.name ) === -1
+			);
+			return {
+				...state,
+				types: [ ...previousState, ...action.blockTypes ],
+			};
+		case 'REMOVE_BLOCK_TYPES':
+			return {
+				...state,
+				types: filter( state.types, ( blockType ) => action.names.indexOf( blockType.name ) === -1 ),
+				defaultBlockType: action.names.indexOf( state.defaultBlockType ) !== -1 ? undefined : state.defaultBlockType,
+				fallbackBlockType: action.names.indexOf( state.fallbackBlockType ) !== -1 ? undefined : state.fallbackBlockType,
+			};
+		case 'SET_DEFAULT_BLOCK_TYPE':
+			return {
+				...state,
+				defaultBlockType: action.name,
+			};
+		case 'SET_FALLBACK_BLOCK_TYPE':
+			return {
+				...state,
+				fallbackBlockType: action.name,
+			};
+	}
+
+	return state;
+}
+
+/**
+ * Reducer managing the categories
+ *
+ * @param {Object} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {Object} Updated state.
+ */
+export function categories( state = DEFAULT_CATEGORIES, action ) {
+	if ( action.type === 'ADD_CATEGORIES' ) {
+		const addedSlugs = map( action.categories, ( category ) => category.slug );
+		const previousState = filter( state, ( category ) => addedSlugs.indexOf( category.slug ) === -1 );
+		return [ ...previousState, ...action.categories ];
+	}
+
+	return state;
+}
+
+export default combineReducers( {
+	blockTypes,
+	categories,
+} );