Update: Refactor button edit to use a functional component (#18006)

WordPress · Nov 4, 2019 · 7017152 · 7017152
1 parent 208cc9f
commit 7017152
Showing 1 changed file with 149 additions and 166 deletions.
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Component,
 	useCallback,
 } from '@wordpress/element';
 import {
@@ -74,177 +73,161 @@ function BorderPanel( { borderRadius = '', setAttributes } ) {
 	);
 }
 
-class ButtonEdit extends Component {
-	constructor() {
-		super( ...arguments );
-		this.nodeRef = null;
-		this.bindRef = this.bindRef.bind( this );
-		this.onSetLinkRel = this.onSetLinkRel.bind( this );
-		this.onToggleOpenInNewTab = this.onToggleOpenInNewTab.bind( this );
-	}
-
-	bindRef( node ) {
-		if ( ! node ) {
-			return;
-		}
-		this.nodeRef = node;
-	}
-
-	onSetLinkRel( value ) {
-		this.props.setAttributes( { rel: value } );
-	}
-
-	onToggleOpenInNewTab( value ) {
-		const { rel } = this.props.attributes;
-		const linkTarget = value ? '_blank' : undefined;
-
-		let updatedRel = rel;
-		if ( linkTarget && ! rel ) {
-			updatedRel = NEW_TAB_REL;
-		} else if ( ! linkTarget && rel === NEW_TAB_REL ) {
-			updatedRel = undefined;
-		}
-
-		this.props.setAttributes( {
-			linkTarget,
-			rel: updatedRel,
-		} );
-	}
-
-	render() {
-		const {
-			attributes,
-			backgroundColor,
-			textColor,
-			setBackgroundColor,
-			setTextColor,
-			fallbackBackgroundColor,
-			fallbackTextColor,
-			setAttributes,
-			className,
-			instanceId,
-			isSelected,
-		} = this.props;
-
-		const {
-			borderRadius,
-			linkTarget,
-			placeholder,
-			rel,
-			text,
-			title,
-			url,
-			customGradient,
-		} = attributes;
+function ButtonEdit( {
+	attributes,
+	backgroundColor,
+	textColor,
+	setBackgroundColor,
+	setTextColor,
+	fallbackBackgroundColor,
+	fallbackTextColor,
+	setAttributes,
+	className,
+	instanceId,
+	isSelected,
+} ) {
+	const {
+		borderRadius,
+		linkTarget,
+		placeholder,
+		rel,
+		text,
+		title,
+		url,
+		customGradient,
+	} = attributes;
+	const onSetLinkRel = useCallback(
+		( value ) => {
+			setAttributes( { rel: value } );
+		},
+		[ setAttributes ]
+	);
 
-		const linkId = `wp-block-button__inline-link-${ instanceId }`;
+	const onToggleOpenInNewTab = useCallback(
+		( value ) => {
+			const newLinkTarget = value ? '_blank' : undefined;
+
+			let updatedRel = rel;
+			if ( newLinkTarget && ! rel ) {
+				updatedRel = NEW_TAB_REL;
+			} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
+				updatedRel = undefined;
+			}
+
+			setAttributes( {
+				linkTarget: newLinkTarget,
+				rel: updatedRel,
+			} );
+		},
+		[ rel, setAttributes ]
+	);
 
-		return (
-			<div className={ className } title={ title } ref={ this.bindRef }>
-				<RichText
-					placeholder={ placeholder || __( 'Add text…' ) }
-					value={ text }
-					onChange={ ( value ) => setAttributes( { text: value } ) }
-					withoutInteractiveFormatting
-					className={ classnames(
-						'wp-block-button__link', {
-							'has-background': backgroundColor.color || customGradient,
-							[ backgroundColor.class ]: ! customGradient && backgroundColor.class,
-							'has-text-color': textColor.color,
-							[ textColor.class ]: textColor.class,
-							'no-border-radius': borderRadius === 0,
-						}
-					) }
-					style={ {
-						backgroundColor: ! customGradient && backgroundColor.color,
-						background: customGradient,
-						color: textColor.color,
-						borderRadius: borderRadius ? borderRadius + 'px' : undefined,
-					} }
+	const linkId = `wp-block-button__inline-link-${ instanceId }`;
+	return (
+		<div className={ className } title={ title }>
+			<RichText
+				placeholder={ placeholder || __( 'Add text…' ) }
+				value={ text }
+				onChange={ ( value ) => setAttributes( { text: value } ) }
+				withoutInteractiveFormatting
+				className={ classnames(
+					'wp-block-button__link', {
+						'has-background': backgroundColor.color || customGradient,
+						[ backgroundColor.class ]: ! customGradient && backgroundColor.class,
+						'has-text-color': textColor.color,
+						[ textColor.class ]: textColor.class,
+						'no-border-radius': borderRadius === 0,
+					}
+				) }
+				style={ {
+					backgroundColor: ! customGradient && backgroundColor.color,
+					background: customGradient,
+					color: textColor.color,
+					borderRadius: borderRadius ? borderRadius + 'px' : undefined,
+				} }
+			/>
+			<BaseControl
+				label={ __( 'Link' ) }
+				className="wp-block-button__inline-link"
+				id={ linkId }>
+				<URLInput
+					className="wp-block-button__inline-link-input"
+					value={ url }
+					/* eslint-disable jsx-a11y/no-autofocus */
+					// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
+					autoFocus={ false }
+					/* eslint-enable jsx-a11y/no-autofocus */
+					onChange={ ( value ) => setAttributes( { url: value } ) }
+					disableSuggestions={ ! isSelected }
+					id={ linkId }
+					isFullWidth
+					hasBorder
 				/>
-				<BaseControl
-					label={ __( 'Link' ) }
-					className="wp-block-button__inline-link"
-					id={ linkId }>
-					<URLInput
-						className="wp-block-button__inline-link-input"
-						value={ url }
-						/* eslint-disable jsx-a11y/no-autofocus */
-						// Disable Reason: The rule is meant to prevent enabling auto-focus, not disabling it.
-						autoFocus={ false }
-						/* eslint-enable jsx-a11y/no-autofocus */
-						onChange={ ( value ) => setAttributes( { url: value } ) }
-						disableSuggestions={ ! isSelected }
-						id={ linkId }
-						isFullWidth
-						hasBorder
-					/>
-				</BaseControl>
-				<InspectorControls>
-					<PanelColorSettings
-						title={ __( 'Color Settings' ) }
-						colorSettings={ [
-							{
-								value: backgroundColor.color,
-								onChange: ( newColor ) => {
-									setAttributes( { customGradient: undefined } );
-									setBackgroundColor( newColor );
-								},
-								label: __( 'Background Color' ),
-							},
-							{
-								value: textColor.color,
-								onChange: setTextColor,
-								label: __( 'Text Color' ),
+			</BaseControl>
+			<InspectorControls>
+				<PanelColorSettings
+					title={ __( 'Color Settings' ) }
+					colorSettings={ [
+						{
+							value: backgroundColor.color,
+							onChange: ( newColor ) => {
+								setAttributes( { customGradient: undefined } );
+								setBackgroundColor( newColor );
 							},
-						] }
-					>
-						<ContrastChecker
-							{ ...{
-								// Text is considered large if font size is greater or equal to 18pt or 24px,
-								// currently that's not the case for button.
-								isLargeText: false,
-								textColor: textColor.color,
-								backgroundColor: backgroundColor.color,
-								fallbackBackgroundColor,
-								fallbackTextColor,
-							} }
-						/>
-					</PanelColorSettings>
-					<PanelBody title={ __( 'Gradient' ) }>
-						<__experimentalGradientPickerControl
-							onChange={
-								( newGradient ) => {
-									setAttributes( {
-										customGradient: newGradient,
-										backgroundColor: undefined,
-										customBackgroundColor: undefined,
-									} );
-								}
+							label: __( 'Background Color' ),
+						},
+						{
+							value: textColor.color,
+							onChange: setTextColor,
+							label: __( 'Text Color' ),
+						},
+					] }
+				>
+					<ContrastChecker
+						{ ...{
+							// Text is considered large if font size is greater or equal to 18pt or 24px,
+							// currently that's not the case for button.
+							isLargeText: false,
+							textColor: textColor.color,
+							backgroundColor: backgroundColor.color,
+							fallbackBackgroundColor,
+							fallbackTextColor,
+						} }
+					/>
+				</PanelColorSettings>
+				<PanelBody title={ __( 'Gradient' ) }>
+					<__experimentalGradientPickerControl
+						onChange={
+							( newGradient ) => {
+								setAttributes( {
+									customGradient: newGradient,
+									backgroundColor: undefined,
+									customBackgroundColor: undefined,
+								} );
 							}
-							value={ customGradient }
-						/>
-					</PanelBody>
-					<BorderPanel
-						borderRadius={ borderRadius }
-						setAttributes={ setAttributes }
+						}
+						value={ customGradient }
+					/>
+				</PanelBody>
+				<BorderPanel
+					borderRadius={ borderRadius }
+					setAttributes={ setAttributes }
+				/>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ onToggleOpenInNewTab }
+						checked={ linkTarget === '_blank' }
 					/>
-					<PanelBody title={ __( 'Link settings' ) }>
-						<ToggleControl
-							label={ __( 'Open in new tab' ) }
-							onChange={ this.onToggleOpenInNewTab }
-							checked={ linkTarget === '_blank' }
-						/>
-						<TextControl
-							label={ __( 'Link rel' ) }
-							value={ rel || '' }
-							onChange={ this.onSetLinkRel }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			</div>
-		);
-	}
+					<TextControl
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ onSetLinkRel }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		</div>
+	);
 }
 
 export default compose( [