Fix:Image Block: Hide 'noreferrer' and 'noopener' in Link Rel (#17398)

* Update the regex used when removing NEW_TAB_REL and add trimming (+2 squashed commits) Squashed commits: [cf71759c3] Accessibility:Image Block:Link Editor: Move Link Rel field below Open new tab toggle [310a23c33] Fix:Image Block:Link Editor: Hide 'noreferrer' and 'noopener' in Link Rel field * post rebases fixes Co-authored-by: Jorge Costa <jorge.costa@developer.pt>
WordPress · Nov 4, 2019 · 8b9ffec · 8b9ffec
1 parent c2f6170
commit 8b9ffec
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 13 deletions.
diff --git a/packages/block-library/src/image/constants.js b/packages/block-library/src/image/constants.js
@@ -3,6 +3,6 @@ export const LINK_DESTINATION_NONE = 'none';
 export const LINK_DESTINATION_MEDIA = 'media';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_CUSTOM = 'custom';
-export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const DEFAULT_SIZE_SLUG = 'large';
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -72,7 +72,7 @@ import { speak } from '@wordpress/a11y';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import icon from './icon';
 import ImageSize from './image-size';
-import { getUpdatedLinkTargetSettings } from './utils';
+import { getUpdatedLinkTargetSettings, removeNewTabRel } from './utils';
 
 /**
  * Module constants
@@ -585,6 +585,7 @@ export class ImageEdit extends Component {
 			sizeSlug,
 		} = attributes;
 
+		const cleanRel = removeNewTabRel( rel );
 		const isExternal = isExternalImage( id, url );
 		const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
 		const controls = (
@@ -617,18 +618,18 @@ export class ImageEdit extends Component {
 											onChange={ this.onSetNewTab }
 											checked={ linkTarget === '_blank' } />
 										<TextControl
-											label={ __( 'Link CSS Class' ) }
-											value={ linkClass || '' }
+											label={ __( 'Link Rel' ) }
+											value={ cleanRel || '' }
+											onChange={ this.onSetLinkRel }
 											onKeyPress={ stopPropagation }
 											onKeyDown={ stopPropagationRelevantKeys }
-											onChange={ this.onSetLinkClass }
 										/>
 										<TextControl
-											label={ __( 'Link Rel' ) }
-											value={ rel || '' }
-											onChange={ this.onSetLinkRel }
+											label={ __( 'Link CSS Class' ) }
+											value={ linkClass || '' }
 											onKeyPress={ stopPropagation }
 											onKeyDown={ stopPropagationRelevantKeys }
+											onChange={ this.onSetLinkClass }
 										/>
 									</>
 								}

diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -24,6 +25,8 @@ export default function save( { attributes } ) {
 		sizeSlug,
 	} = attributes;
 
+	const newRel = isEmpty( rel ) ? undefined : rel;
+
 	const classes = classnames( {
 		[ `align${ align }` ]: align,
 		[ `size-${ sizeSlug }` ]: sizeSlug,
@@ -47,7 +50,7 @@ export default function save( { attributes } ) {
 					className={ linkClass }
 					href={ href }
 					target={ linkTarget }
-					rel={ rel }
+					rel={ newRel }
 				>
 					{ image }
 				</a>

diff --git a/packages/block-library/src/image/utils.js b/packages/block-library/src/image/utils.js
@@ -1,3 +1,11 @@
+/**
+ * External dependencies
+ */
+import {
+	isEmpty,
+	each,
+} from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -12,6 +20,30 @@ export function calculatePreferedImageSize( image, container ) {
 	return { width, height };
 }
 
+export function removeNewTabRel( currentRel ) {
+	let newRel = currentRel;
+
+	if ( currentRel !== undefined && ! isEmpty( newRel ) ) {
+		if ( ! isEmpty( newRel ) ) {
+			each( NEW_TAB_REL, function( relVal ) {
+				const regExp = new RegExp( '\\b' + relVal + '\\b', 'gi' );
+				newRel = newRel.replace( regExp, '' );
+			} );
+
+			// Only trim if NEW_TAB_REL values was replaced.
+			if ( newRel !== currentRel ) {
+				newRel = newRel.trim();
+			}
+
+			if ( isEmpty( newRel ) ) {
+				newRel = undefined;
+			}
+		}
+	}
+
+	return newRel;
+}
+
 /**
  * Helper to get the link target settings to be stored.
  *
@@ -24,11 +56,11 @@ export function calculatePreferedImageSize( image, container ) {
 export function getUpdatedLinkTargetSettings( value, { rel } ) {
 	const linkTarget = value ? '_blank' : undefined;
 
-	let updatedRel = rel;
-	if ( linkTarget && ! rel ) {
-		updatedRel = NEW_TAB_REL;
-	} else if ( ! linkTarget && rel === NEW_TAB_REL ) {
+	let updatedRel;
+	if ( ! linkTarget && ! rel ) {
 		updatedRel = undefined;
+	} else {
+		updatedRel = removeNewTabRel( rel );
 	}
 
 	return {