From d9a4fb4125664534038ea2633831d3fa4c720130 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:47:22 -0700
Subject: [PATCH] Update the anchor to use HelpText

---
 packages/block-editor/src/hooks/anchor.js | 51 +++++++++++++++--------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index c946054c512798..333af2dd017126 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -7,7 +7,12 @@ import { has } from 'lodash';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
+import {
+	PanelBody,
+	TextControl,
+	HelpText,
+	ExternalLink,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -73,22 +78,6 @@ export const withInspectorControl = createHigherOrderComponent(
 					<TextControl
 						className="html-anchor-control"
 						label={ __( 'HTML anchor' ) }
-						help={
-							<>
-								{ __(
-									'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
-								) }{ ' ' }
-								{
-									<ExternalLink
-										href={
-											'https://wordpress.org/support/article/page-jumps/'
-										}
-									>
-										{ __( 'Learn more about anchors' ) }
-									</ExternalLink>
-								}
-							</>
-						}
 						value={ props.attributes.anchor || '' }
 						placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
 						onChange={ ( nextValue ) => {
@@ -99,6 +88,23 @@ export const withInspectorControl = createHigherOrderComponent(
 						} }
 						autoCapitalize="none"
 						autoComplete="off"
+						separatorType="none"
+						help={
+							isWeb && (
+								<>
+									{ __(
+										'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+									) }
+									<ExternalLink
+										href={
+											'https://wordpress.org/support/article/page-jumps/'
+										}
+									>
+										{ __( 'Learn more about anchors' ) }
+									</ExternalLink>
+								</>
+							)
+						}
 					/>
 				);
 
@@ -120,6 +126,17 @@ export const withInspectorControl = createHigherOrderComponent(
 							<InspectorControls>
 								<PanelBody title={ __( 'Heading settings' ) }>
 									{ textControl }
+									<HelpText
+										url="https://wordpress.org/support/article/page-jumps/"
+										r
+										moreLinkText={ __(
+											'Learn more about anchors'
+										) }
+									>
+										{ __(
+											'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+										) }
+									</HelpText>
 								</PanelBody>
 							</InspectorControls>
 						) }