diff --git a/packages/block-library/src/more/edit.js b/packages/block-library/src/more/edit.js
index a7d04b54cde75c..32598a332edc27 100644
--- 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 (
- <>
-