diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 9edc4d2db9767..69fbaee175419 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -12,7 +12,6 @@ import { ExternalLink, IconButton, withSpokenMessages, - Slot, } from '@wordpress/components'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; import { getRectangleFromRange } from '@wordpress/dom'; @@ -32,6 +31,7 @@ import { URLInput, URLPopover } from '@wordpress/block-editor'; */ import { createLinkFormat, isValidHref } from './utils'; import OpenInNewTabToggle from './open-in-new-tab-toggle'; +import NoFollowToggle from './no-follow-toggle'; const stopKeyPropagation = ( event ) => event.stopPropagation(); @@ -266,16 +266,18 @@ class InlineLinkUI extends Component { focusOnMount={ showInput ? 'firstElement' : false } renderSettings={ () => (
- + -
) } > diff --git a/packages/format-library/src/link/no-follow-toggle.js b/packages/format-library/src/link/no-follow-toggle.js new file mode 100644 index 0000000000000..9477a68f9db80 --- /dev/null +++ b/packages/format-library/src/link/no-follow-toggle.js @@ -0,0 +1,64 @@ +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; +import { ToggleControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +class NoFollowToggle extends Component { + isChecked() { + const { rel } = this.props.attributes; + + if ( ! rel ) { + return false; + } + + return rel.split( ' ' ).includes( 'nofollow' ); + } + + toggle() { + const { setLinkAttributes, attributes } = this.props; + + const rel = attributes.rel; + + if ( this.isChecked() ) { + if ( ! rel ) { + return; + } + + const newRel = rel.split( ' ' ).filter( ( relItem ) => { + return relItem !== 'nofollow'; + } ).join( ' ' ); + + setLinkAttributes( { + ...attributes, + rel: newRel, + } ); + return; + } + + if ( ! rel ) { + setLinkAttributes( { + ...attributes, + rel: 'nofollow', + } ); + } else { + setLinkAttributes( { + ...attributes, + rel: [ rel, 'nofollow' ].join( ' ' ), + } ); + } + } + + render() { + return ( + + ); + } +} + +export default NoFollowToggle; diff --git a/packages/format-library/src/link/open-in-new-tab-toggle.js b/packages/format-library/src/link/open-in-new-tab-toggle.js index ae6730ce88358..02c0ae2b7261d 100644 --- a/packages/format-library/src/link/open-in-new-tab-toggle.js +++ b/packages/format-library/src/link/open-in-new-tab-toggle.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { Fill, ToggleControl } from '@wordpress/components'; +import { ToggleControl } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; class OpenInNewTabToggle extends Component { @@ -73,14 +73,4 @@ class OpenInNewTabToggle extends Component { } } -const OpenInNewTabToggleWrapper = () => { - return ( - - { ( props ) => ( - - ) } - - ); -}; - -export default OpenInNewTabToggleWrapper; +export default OpenInNewTabToggle;