Merge pull request #3460 from Parsely/fix/actions-bar-embed-in-highlight

Author: acicovic

build/content-helper/dashboard-page.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => '3fccf4875848f7b21bfe');
+<?php return array('dependencies' => array('react', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-escape-html', 'wp-i18n', 'wp-notices', 'wp-primitives', 'wp-url'), 'version' => 'd32bef74f4fde0b9ec6b');

build/content-helper/dashboard-page.js

@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Button, CheckboxControl, Icon, Tooltip } from '@wordpress/components';
+import { Button, CheckboxControl, Icon } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { check, closeSmall, info, undo } from '@wordpress/icons';
+import { check, closeSmall, help, undo } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -135,22 +135,20 @@ export const PreviewActions = ( {
 								>{ __( 'Reject', 'wp-parsely' ) }</Button>
 								<VerticalDivider size={ 48 } color="#1e1e1e" />
 								{ ! selectedText &&
-									<Tooltip text={ __( 'Highlight text on the page to customize link placement.', 'wp-parsely' ) }>
-										<div className="traffic-boost-preview-actions-hint">
-											<div className="traffic-boost-preview-actions-hint-text">
-												{ __( 'Highlight to customize', 'wp-parsely' ) }
-											</div>
-											<Icon icon={ info } />
+									<div className="traffic-boost-preview-actions-hint">
+										<Icon icon={ help } />
+										<div className="traffic-boost-preview-actions-hint-text">
+											{ __( 'TIP: Customize by selecting different text.', 'wp-parsely' ) }
 										</div>
-									</Tooltip>
+									</div>
 								}
 								{ selectedText && (
 									<Button
 										variant="tertiary"
 										onClick={ onRestoreOriginal }
 										icon={ undo }
 									>
-										{ __( 'Clear changes', 'wp-parsely' ) }
+										{ __( 'Revert', 'wp-parsely' ) }
 									</Button>
 								) }
 							</>
@@ -181,7 +179,7 @@ export const PreviewActions = ( {
 									onClick={ onRestoreOriginal }
 									icon={ undo }
 								>
-									{ __( 'Clear changes', 'wp-parsely' ) }
+									{ __( 'Revert', 'wp-parsely' ) }
 								</Button>
 							</>
 						) }

src/content-helper/dashboard-page/pages/traffic-boost/preview/components/preview-actions.tsx

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Spinner } from '@wordpress/components';
-import { throttle, usePrevious } from '@wordpress/compose';
+import { usePrevious } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useMemo, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -15,7 +15,6 @@ import { ErrorIcon } from '../../../../../common/icons/error-icon';
 import { TRAFFIC_BOOST_LOADING_MESSAGES, TrafficBoostLink } from '../../provider';
 import { TrafficBoostStore } from '../../store';
 import { useIframeHighlight } from '../hooks/use-iframe-highlight';
-import useResize from '../hooks/use-resize';
 import { TextSelection } from '../preview';
 import { getContentArea, isExternalURL } from '../utils';
 import { PreviewActions } from './preview-actions';
@@ -114,7 +113,6 @@ export const PreviewIframe = ( {
 		highlightSmartLink,
 		highlightLinkType,
 		removeSmartLinkHighlights,
-		adjustActionsBarPosition,
 	} = useIframeHighlight( {
 		iframeRef,
 		contentAreaRef,
@@ -125,20 +123,6 @@ export const PreviewIframe = ( {
 		actionsBar,
 	} );
 
-	useResize( iframeRef, throttle(
-		// At most every 250ms on resize events, check that the actions bar is fully visible
-		// and adjust its position if needed.
-		useCallback(
-			() => {
-				if ( iframeRef.current !== null ) {
-					adjustActionsBarPosition( iframeRef.current );
-				}
-			},
-			[ adjustActionsBarPosition ]
-		),
-		250
-	) );
-
 	/**
 	 * Hides the admin bar from the iframe if the preview is in frontend mode.
 	 *
@@ -179,6 +163,11 @@ export const PreviewIframe = ( {
 		iframeDocument.addEventListener( 'click', ( event ) => {
 			const target = event.target as HTMLElement;
 
+			// Allow clicks on the actions bar.
+			if ( target.closest && target.closest( '.parsely-traffic-boost-actions-container' ) ) {
+				return;
+			}
+
 			// If the link is outside the content area, don't handle it.
 			if ( ! contentAreaRef.current?.contains( target ) ) {
 				event.preventDefault();