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

Author: gziolo

blocks/library/embed/index.js

@@ -239,7 +239,7 @@ function getEmbedBlockSettings( { title, icon, category = 'embed', transforms, k
 
 export const name = 'core/embed';
 
-export const settings =	getEmbedBlockSettings( {
+export const settings = getEmbedBlockSettings( {
 	title: __( 'Embed' ),
 	icon: 'embed-generic',
 	transforms: {

blocks/library/index.js

@@ -3,7 +3,8 @@
  */
 import * as audio from './audio';
 import * as embed from './embed';
-import { registerBlockType } from '../api';
+import * as paragraph from './paragraph';
+import { registerBlockType, setDefaultBlockName } from '../api';
 import { registerShortcodeBlock } from './shortcode';
 import { registerImageBlock } from './image';
 import { registerGalleryBlock } from './gallery';
@@ -26,14 +27,14 @@ import { registerTextColumnsBlock } from './text-columns';
 import { registerVerseBlock } from './verse';
 import { registerVideoBlock } from './video';
 import { registerReusableBlock } from './block';
-import { registerParagraphBlock } from './paragraph';
 
 export const registerCoreBlocks = () => {
 	[
 		audio,
 		embed,
 		...embed.common,
 		...embed.others,
+		paragraph,
 	].forEach( ( { name, settings } ) => {
 		registerBlockType( name, settings );
 	} );
@@ -59,5 +60,6 @@ export const registerCoreBlocks = () => {
 	registerVerseBlock();
 	registerVideoBlock();
 	registerReusableBlock();
-	registerParagraphBlock();
+
+	setDefaultBlockName( paragraph.name );
 };

blocks/library/paragraph/index.js

@@ -15,7 +15,7 @@ import { Autocomplete, PanelBody, PanelColor, withFallbackStyles } from '@wordpr
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType, createBlock, setDefaultBlockName } from '../../api';
+import { createBlock } from '../../api';
 import { blockAutocompleter, userAutocompleter } from '../../autocompleters';
 import AlignmentToolbar from '../../alignment-toolbar';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -192,97 +192,95 @@ class ParagraphBlock extends Component {
 	}
 }
 
-export const registerParagraphBlock = () => {
-	registerBlockType( 'core/paragraph', {
-		title: __( 'Paragraph' ),
+export const name = 'core/paragraph';
 
-		description: __( 'This is a simple text only block for adding a single paragraph of content.' ),
+export const settings = {
+	title: __( 'Paragraph' ),
 
-		icon: 'editor-paragraph',
+	description: __( 'This is a simple text only block for adding a single paragraph of content.' ),
 
-		category: 'common',
+	icon: 'editor-paragraph',
 
-		keywords: [ __( 'text' ) ],
+	category: 'common',
 
-		supports: {
-			className: false,
-		},
+	keywords: [ __( 'text' ) ],
 
-		attributes: {
-			content: {
-				type: 'array',
-				source: 'children',
-				selector: 'p',
-			},
-			align: {
-				type: 'string',
-			},
-			dropCap: {
-				type: 'boolean',
-				default: false,
-			},
-			placeholder: {
-				type: 'string',
-			},
-			width: {
-				type: 'string',
-			},
-			textColor: {
-				type: 'string',
-			},
-			backgroundColor: {
-				type: 'string',
-			},
-			fontSize: {
-				type: 'number',
-			},
-		},
+	supports: {
+		className: false,
+	},
 
-		transforms: {
-			from: [
-				{
-					type: 'raw',
-					isMatch: ( node ) => (
-						node.nodeName === 'P' &&
-						// Do not allow embedded content.
-						! node.querySelector( 'audio, canvas, embed, iframe, img, math, object, svg, video' )
-					),
-				},
-			],
+	attributes: {
+		content: {
+			type: 'array',
+			source: 'children',
+			selector: 'p',
 		},
-
-		merge( attributes, attributesToMerge ) {
-			return {
-				content: concatChildren( attributes.content, attributesToMerge.content ),
-			};
+		align: {
+			type: 'string',
 		},
-
-		getEditWrapperProps( attributes ) {
-			const { width } = attributes;
-			if ( [ 'wide', 'full', 'left', 'right' ].indexOf( width ) !== -1 ) {
-				return { 'data-align': width };
-			}
+		dropCap: {
+			type: 'boolean',
+			default: false,
+		},
+		placeholder: {
+			type: 'string',
+		},
+		width: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		fontSize: {
+			type: 'number',
 		},
+	},
 
-		edit: ParagraphBlock,
+	transforms: {
+		from: [
+			{
+				type: 'raw',
+				isMatch: ( node ) => (
+					node.nodeName === 'P' &&
+					// Do not allow embedded content.
+					! node.querySelector( 'audio, canvas, embed, iframe, img, math, object, svg, video' )
+				),
+			},
+		],
+	},
 
-		save( { attributes } ) {
-			const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
-			const className = classnames( {
-				[ `align${ width }` ]: width,
-				'has-background': backgroundColor,
-				'has-drop-cap': dropCap,
-			} );
-			const styles = {
-				backgroundColor: backgroundColor,
-				color: textColor,
-				fontSize: fontSize,
-				textAlign: align,
-			};
+	merge( attributes, attributesToMerge ) {
+		return {
+			content: concatChildren( attributes.content, attributesToMerge.content ),
+		};
+	},
 
-			return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
-		},
-	} );
+	getEditWrapperProps( attributes ) {
+		const { width } = attributes;
+		if ( [ 'wide', 'full', 'left', 'right' ].indexOf( width ) !== -1 ) {
+			return { 'data-align': width };
+		}
+	},
+
+	edit: ParagraphBlock,
+
+	save( { attributes } ) {
+		const { width, align, content, dropCap, backgroundColor, textColor, fontSize } = attributes;
+		const className = classnames( {
+			[ `align${ width }` ]: width,
+			'has-background': backgroundColor,
+			'has-drop-cap': dropCap,
+		} );
+		const styles = {
+			backgroundColor: backgroundColor,
+			color: textColor,
+			fontSize: fontSize,
+			textAlign: align,
+		};
 
-	setDefaultBlockName( 'core/paragraph' );
+		return <p style={ styles } className={ className ? className : undefined }>{ content }</p>;
+	},
 };

blocks/library/paragraph/test/index.js

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