diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 1790848421809..33ebe079c5e89 100644 --- 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 ( -