Update HTML anchor explaination text (#16142)

Update the HTML anchor text to be more user friendly to anyone who doesn't already know what HTML anchors are.

packages/block-editor/src/hooks/anchor.js

@@ -7,7 +7,7 @@ import { assign, has } from 'lodash';
  * WordPress dependencies
  */
 import { addFilter } from '@wordpress/hooks';
-import { TextControl } from '@wordpress/components';
+import { TextControl, ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { hasBlockSupport } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
@@ -70,8 +70,17 @@ export const withInspectorControl = createHigherOrderComponent( ( BlockEdit ) =>
 					<BlockEdit { ...props } />
 					<InspectorAdvancedControls>
 						<TextControl
+							className="html-anchor-control"
 							label={ __( 'HTML Anchor' ) }
-							help={ __( 'Anchors lets you link directly to a section on a page.' ) }
+							help={ (
+								<>
+									{ __( 'Enter a word or two — without spaces — to make a unique web address just for this heading, 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 || '' }
 							onChange={ ( nextValue ) => {
 								nextValue = nextValue.replace( ANCHOR_REGEX, '-' );

packages/block-editor/src/hooks/anchor.scss

@@ -0,0 +1,4 @@
+.html-anchor-control .components-external-link {
+	display: block;
+	margin-top: $grid-size;
+}

packages/block-editor/src/style.scss

@@ -32,3 +32,4 @@
 @import "./components/url-popover/style.scss";
 @import "./components/warning/style.scss";
 @import "./components/writing-flow/style.scss";
+@import "./hooks/anchor.scss";