Blocks: Defer registration of all core blocks until editor loads (#4514)

* Blocks: Defer registration of all core blocks until editor loads

* Blocks: Try to expose name and setting pair for block

* Blocks: Refactor embeds to be expressed as name and setting pair

* Blocks: Refactor paragraph to be exported as a name and settings pair

* Blocks: Refactor all blocks to be exported as name & settings pair

* Blocks: Register core blocks just before an instance of the editor is created

* Blocks: Refactor subhead block to be exported as name and settings constants'

blocks/api/raw-handling/test/integration/index.js

@@ -8,6 +8,7 @@ import path from 'path';
 /**
  * Internal dependencies
  */
+import { registerCoreBlocks } from '../../../../library';
 import rawHandler from '../../index';
 import serialize from '../../../serializer';
 
@@ -23,8 +24,7 @@ describe( 'raw handling: integration', () => {
 	beforeAll( () => {
 		// Load all hooks that modify blocks
 		require( 'blocks/hooks' );
-		// Load all blocks
-		require( 'blocks/library' );
+		registerCoreBlocks();
 	} );
 
 	types.forEach( ( type ) => {

blocks/index.js

@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import './hooks';
-import './library';
 
 // A "block" is the abstract term used to describe units of markup that,
 // when composed together, form the content or layout of a page.
@@ -14,6 +13,7 @@ import './library';
 // 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.
 export * from './api';
+export { registerCoreBlocks } from './library';
 export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';

blocks/library/audio/index.js

@@ -14,13 +14,14 @@ import { Component } from '@wordpress/element';
  */
 import './style.scss';
 import './editor.scss';
-import { registerBlockType } from '../../api';
 import MediaUpload from '../../media-upload';
 import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 
-registerBlockType( 'core/audio', {
+export const name = 'core/audio';
+
+export const settings = {
 	title: __( 'Audio' ),
 
 	description: __( 'The Audio block allows you to embed audio files and play them back using a simple player.' ),
@@ -178,4 +179,4 @@ registerBlockType( 'core/audio', {
 			</figure>
 		);
 	},
-} );
+};

blocks/library/audio/test/index.js

@@ -1,14 +1,14 @@
 /**
  * Internal dependencies
  */
-import '../';
+import { name, settings } from '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
 jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/audio', () => {
 	test( 'block edit matches snapshot', () => {
-		const wrapper = blockEditRender( 'core/audio' );
+		const wrapper = blockEditRender( name, settings );
 
 		expect( wrapper ).toMatchSnapshot();
 	} );

blocks/library/block/index.js

@@ -15,7 +15,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockEdit from '../../block-edit';
-import { registerBlockType } from '../../api';
 import ReusableBlockEditPanel from './edit-panel';
 
 class ReusableBlockEdit extends Component {
@@ -156,7 +155,9 @@ const ConnectedReusableBlockEdit = connect(
 	} )
 )( ReusableBlockEdit );
 
-registerBlockType( 'core/block', {
+export const name = 'core/block';
+
+export const settings = {
 	title: __( 'Reusable Block' ),
 	category: 'reusable-blocks',
 	isPrivate: true,
@@ -174,4 +175,4 @@ registerBlockType( 'core/block', {
 
 	edit: ConnectedReusableBlockEdit,
 	save: () => null,
-} );
+};

blocks/library/button/index.js

@@ -10,7 +10,6 @@ import { Dashicon, IconButton, PanelColor, withFallbackStyles } from '@wordpress
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType } from '../../api';
 import Editable from '../../editable';
 import UrlInput from '../../url-input';
 import BlockControls from '../../block-controls';
@@ -173,7 +172,9 @@ const blockAttributes = {
 	},
 };
 
-registerBlockType( 'core/button', {
+export const name = 'core/button';
+
+export const settings = {
 	title: __( 'Button' ),
 
 	description: __( 'A nice little button. Call something out with it.' ),
@@ -235,4 +236,4 @@ registerBlockType( 'core/button', {
 			);
 		},
 	} ],
-} );
+};

blocks/library/button/test/index.js

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import '../';
+import { name, settings } from '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
 describe( 'core/button', () => {
 	test( 'block edit matches snapshot', () => {
-		const wrapper = blockEditRender( 'core/button' );
+		const wrapper = blockEditRender( name, settings );
 
 		expect( wrapper ).toMatchSnapshot();
 	} );

blocks/library/categories/index.js

@@ -8,10 +8,11 @@ import { __ } from '@wordpress/i18n';
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType } from '../../api';
 import CategoriesBlock from './block';
 
-registerBlockType( 'core/categories', {
+export const name = 'core/categories';
+
+export const settings = {
 	title: __( 'Categories' ),
 
 	description: __( 'Shows a list of your site\'s categories.' ),
@@ -54,4 +55,4 @@ registerBlockType( 'core/categories', {
 	save() {
 		return null;
 	},
-} );
+};

blocks/library/code/index.js

@@ -12,9 +12,11 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import './editor.scss';
-import { registerBlockType, createBlock } from '../../api';
+import { createBlock } from '../../api';
 
-registerBlockType( 'core/code', {
+export const name = 'core/code';
+
+export const settings = {
 	title: __( 'Code' ),
 
 	description: __( 'The code block maintains spaces and tabs, great for showing code snippets.' ),
@@ -71,4 +73,4 @@ registerBlockType( 'core/code', {
 	save( { attributes } ) {
 		return <pre><code>{ attributes.content }</code></pre>;
 	},
-} );
+};

blocks/library/code/test/index.js

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import '../';
+import { name, settings } from '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
 describe( 'core/code', () => {
 	test( 'block edit matches snapshot', () => {
-		const wrapper = blockEditRender( 'core/code' );
+		const wrapper = blockEditRender( name, settings );
 
 		expect( wrapper ).toMatchSnapshot();
 	} );

blocks/library/cover-image/index.js

@@ -15,7 +15,7 @@ import classnames from 'classnames';
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType, createBlock } from '../../api';
+import { createBlock } from '../../api';
 import Editable from '../../editable';
 import AlignmentToolbar from '../../alignment-toolbar';
 import MediaUpload from '../../media-upload';
@@ -28,7 +28,9 @@ import RangeControl from '../../inspector-controls/range-control';
 
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
-registerBlockType( 'core/cover-image', {
+export const name = 'core/cover-image';
+
+export const settings = {
 	title: __( 'Cover Image' ),
 
 	description: __( 'Cover Image is a bold image block with an optional title.' ),
@@ -234,7 +236,7 @@ registerBlockType( 'core/cover-image', {
 			</section>
 		);
 	},
-} );
+};
 
 function dimRatioToClass( ratio ) {
 	return ( ratio === 0 || ratio === 50 ) ?

blocks/library/cover-image/test/index.js

@@ -1,14 +1,14 @@
 /**
  * Internal dependencies
  */
-import '../';
+import { name, settings } from '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
 jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/cover-image', () => {
 	test( 'block edit matches snapshot', () => {
-		const wrapper = blockEditRender( 'core/cover-image' );
+		const wrapper = blockEditRender( name, settings );
 
 		expect( wrapper ).toMatchSnapshot();
 	} );