Refactor more block (#23758)

* refactor more block * Update unit tests. * change comment * revert placeholder functionality * fix prev values Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
WordPress · Jul 9, 2020 · 805bdf8 · 805bdf8
1 parent 8bb3c97
commit 805bdf8
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 64 deletions.
diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js
@@ -3,82 +3,64 @@
  */
 import { __ } from '@wordpress/i18n';
 import { PanelBody, ToggleControl } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
 import { ENTER } from '@wordpress/keycodes';
 import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
 
-export default class MoreEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onChangeInput = this.onChangeInput.bind( this );
-		this.onKeyDown = this.onKeyDown.bind( this );
+const DEFAULT_TEXT = __( 'Read more' );
 
-		this.state = {
-			defaultText: __( 'Read more' ),
-		};
-	}
+export default function MoreEdit( {
+	attributes: { customText, noTeaser },
+	insertBlocksAfter,
+	setAttributes,
+} ) {
+	const [ placeholder, setPlaceholder ] = useState( DEFAULT_TEXT );
 
-	onChangeInput( event ) {
+	const onChangeInput = ( event ) => {
 		// Set defaultText to an empty string, allowing the user to clear/replace the input field's text
-		this.setState( {
-			defaultText: '',
-		} );
+		setPlaceholder( '' );
+		setAttributes( { customText: event.target.value || undefined } );
+	};
 
-		const value =
-			event.target.value.length === 0 ? undefined : event.target.value;
-		this.props.setAttributes( { customText: value } );
-	}
-
-	onKeyDown( event ) {
-		const { keyCode } = event;
-		const { insertBlocksAfter } = this.props;
+	const onKeyDown = ( { keyCode } ) => {
 		if ( keyCode === ENTER ) {
 			insertBlocksAfter( [ createBlock( getDefaultBlockName() ) ] );
 		}
-	}
+	};
 
-	getHideExcerptHelp( checked ) {
-		return checked
+	const getHideExcerptHelp = ( checked ) =>
+		checked
 			? __( 'The excerpt is hidden.' )
 			: __( 'The excerpt is visible.' );
-	}
-
-	render() {
-		const { customText, noTeaser } = this.props.attributes;
-		const { setAttributes } = this.props;
 
-		const toggleHideExcerpt = () =>
-			setAttributes( { noTeaser: ! noTeaser } );
-		const { defaultText } = this.state;
-		const value = customText !== undefined ? customText : defaultText;
-		const inputLength = value.length + 1.2;
-		const currentWidth = { width: inputLength + 'em' };
+	const toggleHideExcerpt = () => setAttributes( { noTeaser: ! noTeaser } );
+	const value = customText ?? placeholder;
+	const style = { width: `${ value.length + 1.2 }em` };
 
-		return (
-			<>
-				<InspectorControls>
-					<PanelBody>
-						<ToggleControl
-							label={ __(
-								'Hide the excerpt on the full content page'
-							) }
-							checked={ !! noTeaser }
-							onChange={ toggleHideExcerpt }
-							help={ this.getHideExcerptHelp }
-						/>
-					</PanelBody>
-				</InspectorControls>
-				<div className="wp-block-more">
-					<input
-						type="text"
-						value={ value }
-						onChange={ this.onChangeInput }
-						onKeyDown={ this.onKeyDown }
-						style={ currentWidth }
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody>
+					<ToggleControl
+						label={ __(
+							'Hide the excerpt on the full content page'
+						) }
+						checked={ !! noTeaser }
+						onChange={ toggleHideExcerpt }
+						help={ getHideExcerptHelp }
 					/>
-				</div>
-			</>
-		);
-	}
+				</PanelBody>
+			</InspectorControls>
+			<div className="wp-block-more">
+				<input
+					type="text"
+					value={ value }
+					onChange={ onChangeInput }
+					onKeyDown={ onKeyDown }
+					style={ style }
+				/>
+			</div>
+		</>
+	);
 }
diff --git a/packages/block-library/src/more/save.js b/packages/block-library/src/more/save.js
@@ -8,9 +8,7 @@ import { compact } from 'lodash';
  */
 import { RawHTML } from '@wordpress/element';
 
-export default function save( { attributes } ) {
-	const { customText, noTeaser } = attributes;
-
+export default function save( { attributes: { customText, noTeaser } } ) {
 	const moreTag = customText ? `<!--more ${ customText }-->` : '<!--more-->';
 
 	const noTeaserTag = noTeaser ? '<!--noteaser-->' : '';