Own file for heading block's edit function

WordPress · May 8, 2018 · b25ba3d · b25ba3d
1 parent e5a9b16
commit b25ba3d
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 74 deletions.
diff --git a/core-blocks/heading/edit.js b/core-blocks/heading/edit.js
@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+
+import { __, sprintf } from '@wordpress/i18n';
+import { Fragment } from '@wordpress/element';
+import { PanelBody, Toolbar } from '@wordpress/components';
+import { createBlock } from '@wordpress/blocks';
+import { RichText, BlockControls, InspectorControls, AlignmentToolbar } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+export default function HeadingEdit( {
+	attributes,
+	setAttributes,
+	mergeBlocks,
+	insertBlocksAfter,
+	onReplace,
+	className,
+} ) {
+	const { align, content, nodeName, placeholder } = attributes;
+
+	return (
+		<Fragment>
+			<BlockControls
+				controls={ '234'.split( '' ).map( ( level ) => ( {
+					icon: 'heading',
+					title: sprintf( __( 'Heading %s' ), level ),
+					isActive: 'H' + level === nodeName,
+					onClick: () => setAttributes( { nodeName: 'H' + level } ),
+					subscript: level,
+				} ) ) }
+			/>
+			<InspectorControls>
+				<PanelBody title={ __( 'Heading Settings' ) }>
+					<p>{ __( 'Level' ) }</p>
+					<Toolbar
+						controls={ '123456'.split( '' ).map( ( level ) => ( {
+							icon: 'heading',
+							title: sprintf( __( 'Heading %s' ), level ),
+							isActive: 'H' + level === nodeName,
+							onClick: () => setAttributes( { nodeName: 'H' + level } ),
+							subscript: level,
+						} ) ) }
+					/>
+					<p>{ __( 'Text Alignment' ) }</p>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<RichText
+				wrapperClassName="wp-block-heading"
+				tagName={ nodeName.toLowerCase() }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				onMerge={ mergeBlocks }
+				onSplit={
+					insertBlocksAfter ?
+						( before, after, ...blocks ) => {
+							setAttributes( { content: before } );
+							insertBlocksAfter( [
+								...blocks,
+								createBlock( 'core/paragraph', { content: after } ),
+							] );
+						} :
+						undefined
+				}
+				onRemove={ () => onReplace( [] ) }
+				style={ { textAlign: align } }
+				className={ className }
+				placeholder={ placeholder || __( 'Write heading…' ) }
+			/>
+		</Fragment>
+	);
+}
diff --git a/core-blocks/heading/index.js b/core-blocks/heading/index.js
@@ -1,21 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
-import { concatChildren, Fragment } from '@wordpress/element';
-import { PanelBody, Toolbar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { concatChildren } from '@wordpress/element';
 import { createBlock, getPhrasingContentSchema } from '@wordpress/blocks';
-import {
-	RichText,
-	BlockControls,
-	InspectorControls,
-	AlignmentToolbar,
-} from '@wordpress/editor';
+import { RichText } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import './editor.scss';
+import edit from './edit';
 
 export const name = 'core/heading';
 
@@ -111,70 +105,7 @@ export const settings = {
 		};
 	},
 
-	edit( { attributes, setAttributes, mergeBlocks, insertBlocksAfter, onReplace, className } ) {
-		const { align, content, nodeName, placeholder } = attributes;
-
-		return (
-			<Fragment>
-				<BlockControls
-					controls={
-						'234'.split( '' ).map( ( level ) => ( {
-							icon: 'heading',
-							title: sprintf( __( 'Heading %s' ), level ),
-							isActive: 'H' + level === nodeName,
-							onClick: () => setAttributes( { nodeName: 'H' + level } ),
-							subscript: level,
-						} ) )
-					}
-				/>
-				<InspectorControls>
-					<PanelBody title={ __( 'Heading Settings' ) }>
-						<p>{ __( 'Level' ) }</p>
-						<Toolbar
-							controls={
-								'123456'.split( '' ).map( ( level ) => ( {
-									icon: 'heading',
-									title: sprintf( __( 'Heading %s' ), level ),
-									isActive: 'H' + level === nodeName,
-									onClick: () => setAttributes( { nodeName: 'H' + level } ),
-									subscript: level,
-								} ) )
-							}
-						/>
-						<p>{ __( 'Text Alignment' ) }</p>
-						<AlignmentToolbar
-							value={ align }
-							onChange={ ( nextAlign ) => {
-								setAttributes( { align: nextAlign } );
-							} }
-						/>
-					</PanelBody>
-				</InspectorControls>
-				<RichText
-					wrapperClassName="wp-block-heading"
-					tagName={ nodeName.toLowerCase() }
-					value={ content }
-					onChange={ ( value ) => setAttributes( { content: value } ) }
-					onMerge={ mergeBlocks }
-					onSplit={
-						insertBlocksAfter ?
-							( before, after, ...blocks ) => {
-								setAttributes( { content: before } );
-								insertBlocksAfter( [
-									...blocks,
-									createBlock( 'core/paragraph', { content: after } ),
-								] );
-							} :
-							undefined
-					}
-					onRemove={ () => onReplace( [] ) }
-					style={ { textAlign: align } }
-					className={ className }
-					placeholder={ placeholder || __( 'Write heading…' ) }
-				/>
-			</Fragment>
-		);
-	},
+	edit,
 
 	save( { attributes } ) {
 		const { align, nodeName, content } = attributes;