From 3eafe48a86bcc54359c4c6756e8367320757e6af Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 2 Jul 2021 20:03:35 -0700
Subject: [PATCH 01/33] Simply External Link component

---
 .../src/external-link/index.native.js         | 21 +++++++++++++------
 .../src/external-link/style.native.scss       |  7 +++++++
 2 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/src/external-link/style.native.scss

diff --git a/packages/components/src/external-link/index.native.js b/packages/components/src/external-link/index.native.js
index 84b02b2e92775f..c053893722296f 100644
--- a/packages/components/src/external-link/index.native.js
+++ b/packages/components/src/external-link/index.native.js
@@ -2,23 +2,32 @@
  * External dependencies
  */
 
-import { TouchableOpacity, Text, Linking } from 'react-native';
+import { Text, Linking } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { external, Icon } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+import style from './style.native.scss';
 
 export function ExternalLink( { href, children } ) {
+	const externalLink = usePreferredColorSchemeStyle(
+		style[ 'external-link' ],
+		style[ 'external-link__dark' ]
+	);
+
 	return (
-		<TouchableOpacity
+		<Text
+			style={ externalLink }
 			onPress={ () => Linking.openURL( href ) }
 			accessibilityLabel={ __( 'Open link in a browser' ) }
 		>
-			<Text>{ children }</Text>
-			<Icon icon={ external } />
-		</TouchableOpacity>
+			{ children }
+		</Text>
 	);
 }
 
diff --git a/packages/components/src/external-link/style.native.scss b/packages/components/src/external-link/style.native.scss
new file mode 100644
index 00000000000000..8bbc5bec3bc51d
--- /dev/null
+++ b/packages/components/src/external-link/style.native.scss
@@ -0,0 +1,7 @@
+.external-link {
+	color: $blue-50;
+}
+
+.external-link__dark {
+	color: $blue-30;
+}

From 268032b89bb67df0e6b6add106223c62e93af5c5 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 2 Jul 2021 20:42:16 -0700
Subject: [PATCH 02/33] Update the Anchor Hook to use ExternalLink

Add a space character to give the link some space.
---
 packages/block-editor/src/hooks/anchor.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index 07024b78c51f66..c1deca86d3e047 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -77,9 +77,8 @@ export const withInspectorControl = createHigherOrderComponent(
 							<>
 								{ __(
 									'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.'
-								) }
-
-								{ isWeb && (
+								) }{ ' ' }
+								{
 									<ExternalLink
 										href={
 											'https://wordpress.org/support/article/page-jumps/'
@@ -87,7 +86,7 @@ export const withInspectorControl = createHigherOrderComponent(
 									>
 										{ __( 'Learn more about anchors' ) }
 									</ExternalLink>
-								) }
+								}
 							</>
 						}
 						value={ props.attributes.anchor || '' }

From 776e27c2d030f77cb04200618ff9f58b179367cc Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 2 Jul 2021 20:47:47 -0700
Subject: [PATCH 03/33] Remove FooterMessageLink and replace it with
 ExternalLink

---
 .../block-library/src/image/edit.native.js    |  8 ++--
 packages/components/src/index.native.js       |  1 -
 .../bottom-sheet-text-control/README.md       |  9 ++---
 .../footer-message-link/README.md             | 37 -------------------
 .../footer-message-link/styles.native.scss    |  7 ----
 5 files changed, 9 insertions(+), 53 deletions(-)
 delete mode 100644 packages/components/src/mobile/bottom-sheet/footer-message-link/README.md
 delete mode 100644 packages/components/src/mobile/bottom-sheet/footer-message-link/styles.native.scss

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 1233abbcdca605..9db6847cd2ef26 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -28,6 +28,7 @@ import {
 	BottomSheetSelectControl,
 	FooterMessageControl,
 	FooterMessageLink,
+	ExternalLink,
 	Badge,
 } from '@wordpress/components';
 import {
@@ -443,12 +444,13 @@ export class ImageEdit extends Component {
 						{ __(
 							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
 						) }
-						<FooterMessageLink
+						<ExternalLink
 							href={
 								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
 							}
-							value={ __( 'What is alt text?' ) }
-						/>
+						>
+							{ __( 'What is alt text?' ) }
+						</ExternalLink>
 					</>
 				}
 			/>
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 626c3f03da0bae..c98525028f865d 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -96,7 +96,6 @@ export { default as ColorSettings } from './mobile/color-settings';
 export { default as SegmentedControls } from './mobile/segmented-control';
 export { default as FocalPointSettingsPanel } from './mobile/focal-point-settings-panel';
 export { default as BottomSheetTextControl } from './mobile/bottom-sheet-text-control';
-export { default as FooterMessageLink } from './mobile/bottom-sheet/footer-message-link/footer-message-link';
 export { LinkPicker } from './mobile/link-picker';
 export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-screen';
 export { default as LinkSettings } from './mobile/link-settings';
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/README.md b/packages/components/src/mobile/bottom-sheet-text-control/README.md
index e23680f5ba2beb..24d924fa300524 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-text-control/README.md
@@ -10,7 +10,7 @@
 // This is a paraphrased example from the image block's edit.native.js file
 import {
 	BottomSheetSelectControl,
-	FooterMessageLink,
+	ExternalLink,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -34,10 +34,9 @@ const MyTextControl = () => {
 				footerNote={
 					<>
 						{ __( 'A footer note to add to the component! ' ) }
-						<FooterMessageLink
-							href={ 'https://wordpress.org/' }
-							value={ __( 'Visit WordPress.org' ) }
-						/>
+						<ExternalLink href={ 'https://wordpress.org/' } >
+							{ __( 'Visit WordPress.org' ) }
+						</ExternalLink>
 					</>
 				}
 			/>
diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-link/README.md b/packages/components/src/mobile/bottom-sheet/footer-message-link/README.md
deleted file mode 100644
index 61df444a200975..00000000000000
--- a/packages/components/src/mobile/bottom-sheet/footer-message-link/README.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# Footer Message Link
-
-FooterMessageLink allows for adding a link within a FooterMessageControl component.
-
-### Usage
-
-```jsx
-return (
-	<FooterMessageControl
-		value={
-			<>
-				{ __( 'Example footer text. ' ) }
-				<FooterMessageLink
-					href={ 'https://www.wordpress.org/' }
-					value={ __( 'Visit WordPress.org!' ) }
-				/>
-			</>
-		}
-	/>
-);
-```
-
-### Props
-
-#### href
-
-The URL that is being linked to and that will open in a browser tab when selected.
-
--   Type: `String`
--   Required: Yes
-
-#### value
-
-The "clickable" text that will be displayed to the user.
-
--   Type: `String`
--   Required: Yes
diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-link/styles.native.scss b/packages/components/src/mobile/bottom-sheet/footer-message-link/styles.native.scss
deleted file mode 100644
index d612defade6294..00000000000000
--- a/packages/components/src/mobile/bottom-sheet/footer-message-link/styles.native.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.footerMessageLink {
-	color: $blue-50;
-}
-
-.footerMessageLinkDark {
-	color: $blue-30;
-}

From f0e6c45c6e487ad2d2f127b575c3041c9bcec3be Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:02:11 -0700
Subject: [PATCH 04/33] Update external link readme

---
 .../components/src/external-link/README.md    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/components/src/external-link/README.md b/packages/components/src/external-link/README.md
index 73fe8b5c3fbdd0..2494aa119a1cfb 100644
--- a/packages/components/src/external-link/README.md
+++ b/packages/components/src/external-link/README.md
@@ -1,5 +1,7 @@
 # ExternalLink
 
+Renders a hyperlink that, when tapped or clicked, opens in a new window. 
+
 ## Usage
 
 ```jsx
@@ -9,3 +11,30 @@ const MyExternalLink = () => (
 	<ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink>
 );
 ```
+
+## Props
+
+The text that's displayed within the component's tags will be "clickable" and link to any URL provided via the `href` prop. As outlined below, the `href` prop is the only required prop. 
+
+There are two other optional props that are web only. That is, they're not available for use with the React Native implementation of the editor.
+
+### `href`
+
+The URL that is being linked to and will open in a new window when tapped or clicked.
+
+-   Type: `String`
+-   Required: Yes
+
+### `className` (web only)
+
+An optional CSS class that's added to the hyperlink's HTML. 
+
+-   Type: `String`
+-   Required: No
+
+### `rel` (web only)
+
+A <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel">rel attribute</>.
+
+-   Type: `String`
+-   Required: No

From a43a43ea2eacbf3fd92f80d13cc85a1ddb2e8a49 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:10:29 -0700
Subject: [PATCH 05/33] Add New HelpText Component.

---
 .../components/src/mobile/help-text/README.md | 31 +++++++++++++
 .../src/mobile/help-text/index.native.js      | 45 +++++++++++++++++++
 .../src/mobile/help-text/styles.scss          |  7 +++
 3 files changed, 83 insertions(+)
 create mode 100644 packages/components/src/mobile/help-text/README.md
 create mode 100644 packages/components/src/mobile/help-text/index.native.js
 create mode 100644 packages/components/src/mobile/help-text/styles.scss

diff --git a/packages/components/src/mobile/help-text/README.md b/packages/components/src/mobile/help-text/README.md
new file mode 100644
index 00000000000000..eb06fb4dab4a4f
--- /dev/null
+++ b/packages/components/src/mobile/help-text/README.md
@@ -0,0 +1,31 @@
+# HelpText
+
+Renders a help text shell with a ExternalLink appended at the end.
+
+## Usage
+
+```jsx
+import { HelpText } from '@wordpress/components';
+
+const HelpfulText = () => (
+	<HelpText url="https://wordpress.org" moreLinkText="Learn More">WordPress is an easy to use publishing tool</HelpText>
+);
+```
+
+## Props
+
+The text that's displayed within the component's tags will be "clickable" and extenal link will be added at the end.
+
+### `url`
+
+An optional URL that is being linked to and will open in a new window when tapped or clicked.
+
+-   Type: `String`
+-   Required: No
+
+### `moreLinkText` 
+
+An optional Text as the click abel text at the end.
+
+-   Type: `String`
+-   Required: No
diff --git a/packages/components/src/mobile/help-text/index.native.js b/packages/components/src/mobile/help-text/index.native.js
new file mode 100644
index 00000000000000..e9388d572ae9fe
--- /dev/null
+++ b/packages/components/src/mobile/help-text/index.native.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { View, Text, AccessibilityInfo, Linking } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
+
+const HelpText = ( { moreLinkText, children, url } ) => {
+	if ( typeof children === 'string' ) {
+		children = (
+			<Text style={ styles[ 'help-text__text' ] }>{ children }</Text>
+		);
+	}
+	return (
+		<View>
+			<Text
+				accessibilityRole={ url ? 'link' : 'text' }
+				accessibilityHint={
+					url ? __( 'Opens link in a browser' ) : null
+				}
+				onPress={ () => {
+					AccessibilityInfo.isScreenReaderEnabled().then(
+						( enabled ) => enabled && Linking.openURL( url )
+					);
+				} }
+			>
+				{ children }
+				{ url && (
+					<ExternalLink url={ url }>{ moreLinkText }</ExternalLink>
+				) }
+			</Text>
+		</View>
+	);
+};
+
+export default HelpText;
diff --git a/packages/components/src/mobile/help-text/styles.scss b/packages/components/src/mobile/help-text/styles.scss
new file mode 100644
index 00000000000000..7e86627dc94369
--- /dev/null
+++ b/packages/components/src/mobile/help-text/styles.scss
@@ -0,0 +1,7 @@
+.help-text {
+	font-size: 12px;
+}
+
+.help-text__text {
+	color: $gray;
+}

From 81ff9e17e0292f6e916e33a623271030971e76f4 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:12:27 -0700
Subject: [PATCH 06/33] Include the Help Text in components

---
 packages/components/src/index.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index c98525028f865d..cc47dca52a0f84 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -108,7 +108,7 @@ export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
-export { default as Gridicons } from './mobile/gridicons';
+export { default as HelpText } from './mobile/help-text';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';

From ecc59c9cac816b483987c43c9c0603e1e30cb71c Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:12:54 -0700
Subject: [PATCH 07/33] Update BottomSheet text control

---
 .../bottom-sheet-text-control/README.md       |  6 +++---
 .../bottom-sheet-text-control/index.native.js | 19 ++++++-------------
 .../bottom-sheet-text-control/styles.scss     |  2 +-
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/mobile/bottom-sheet-text-control/README.md b/packages/components/src/mobile/bottom-sheet-text-control/README.md
index 24d924fa300524..88c8e05da037db 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/README.md
+++ b/packages/components/src/mobile/bottom-sheet-text-control/README.md
@@ -31,7 +31,7 @@ const MyTextControl = () => {
 				placeholder={ __( 'Generic placeholder text' ) }
 				label={ __( 'Generic label' ) }
 				icon={ textColor }
-				footerNote={
+				help={
 					<>
 						{ __( 'A footer note to add to the component! ' ) }
 						<ExternalLink href={ 'https://wordpress.org/' } >
@@ -82,9 +82,9 @@ The icon to display alongside the control.
 -   Type: `String`
 -   Required: No
 
-#### footerNote
+#### help
 
 An optional note to display in the component's footer area.
 
--   Type: `String`
+-   Type: `Component`
 -   Required: No
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
index 820f8e16da2960..bb6773abe137f9 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
+++ b/packages/components/src/mobile/bottom-sheet-text-control/index.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TextInput } from 'react-native';
+import { TextInput, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -10,11 +10,7 @@ import { useNavigation } from '@react-navigation/native';
 import { useState } from '@wordpress/element';
 import { Icon, chevronRight } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	BottomSheet,
-	PanelBody,
-	FooterMessageControl,
-} from '@wordpress/components';
+import { BottomSheet, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -27,7 +23,7 @@ const BottomSheetTextControl = ( {
 	placeholder,
 	label,
 	icon,
-	footerNote,
+	help,
 } ) => {
 	const [ showSubSheet, setShowSubSheet ] = useState( false );
 	const navigation = useNavigation();
@@ -88,12 +84,9 @@ const BottomSheetTextControl = ( {
 				</PanelBody>
 			</>
 
-			{ footerNote && (
-				<PanelBody style={ styles.textFooternote }>
-					<FooterMessageControl
-						label={ footerNote }
-						textAlign="left"
-					/>
+			{ !! help && (
+				<PanelBody>
+					<View style={ styles.textFooternote }>{ help }</View>
 				</PanelBody>
 			) }
 		</BottomSheet.SubSheet>
diff --git a/packages/components/src/mobile/bottom-sheet-text-control/styles.scss b/packages/components/src/mobile/bottom-sheet-text-control/styles.scss
index f50712d403a747..b3197411e7286b 100644
--- a/packages/components/src/mobile/bottom-sheet-text-control/styles.scss
+++ b/packages/components/src/mobile/bottom-sheet-text-control/styles.scss
@@ -8,7 +8,7 @@
 }
 
 .textFooternote {
-	padding: 0 16px 24px;
+	padding: 12px 0;
 }
 
 .horizontalBorder {

From f3edfeb2c2c6931d162ef5d2af4ce1decb6040ec Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:22:09 -0700
Subject: [PATCH 08/33] Add accessibilityRole and accessibilityHint to
 ExternalLink

---
 packages/components/src/external-link/index.native.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/external-link/index.native.js b/packages/components/src/external-link/index.native.js
index c053893722296f..88f7f04641fd04 100644
--- a/packages/components/src/external-link/index.native.js
+++ b/packages/components/src/external-link/index.native.js
@@ -24,7 +24,9 @@ export function ExternalLink( { href, children } ) {
 		<Text
 			style={ externalLink }
 			onPress={ () => Linking.openURL( href ) }
-			accessibilityLabel={ __( 'Open link in a browser' ) }
+			accessibilityLabel={ children }
+			accessibilityHint={ __( 'Opens link in a browser' ) }
+			accessibilityRole={ 'link' }
 		>
 			{ children }
 		</Text>

From 4d2ff4f6141d691af7e3f0b67108c0667b73282b Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:24:26 -0700
Subject: [PATCH 09/33] Update Image Edit to use HelpText

---
 .../block-library/src/image/edit.native.js    | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index 9db6847cd2ef26..a3ee18c9b25079 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -29,6 +29,7 @@ import {
 	FooterMessageControl,
 	FooterMessageLink,
 	ExternalLink,
+	HelpText,
 	Badge,
 } from '@wordpress/components';
 import {
@@ -439,19 +440,17 @@ export class ImageEdit extends Component {
 				placeholder={ __( 'Add alt text' ) }
 				label={ __( 'Alt Text' ) }
 				icon={ textColor }
-				footerNote={
-					<>
+				help={
+					<HelpText
+						url={
+							'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+						}
+						moreLinkText={ __( 'What is alt text?' ) }
+					>
 						{ __(
 							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
 						) }
-						<ExternalLink
-							href={
-								'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-							}
-						>
-							{ __( 'What is alt text?' ) }
-						</ExternalLink>
-					</>
+					</HelpText>
 				}
 			/>
 		);

From 9e751d12665f548c8b199c4e5205968e8e22ecc7 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Tue, 6 Jul 2021 22:45:50 -0700
Subject: [PATCH 10/33] Move Help Text

---
 docs/manifest.json                                |  6 ++++++
 .../src/{mobile => }/help-text/README.md          |  0
 packages/components/src/help-text/index.js        | 15 +++++++++++++++
 .../src/{mobile => }/help-text/index.native.js    |  0
 .../src/{mobile => }/help-text/styles.scss        |  0
 packages/components/src/index.js                  |  1 +
 packages/components/src/index.native.js           |  2 +-
 7 files changed, 23 insertions(+), 1 deletion(-)
 rename packages/components/src/{mobile => }/help-text/README.md (100%)
 create mode 100644 packages/components/src/help-text/index.js
 rename packages/components/src/{mobile => }/help-text/index.native.js (100%)
 rename packages/components/src/{mobile => }/help-text/styles.scss (100%)

diff --git a/docs/manifest.json b/docs/manifest.json
index 4264870ae044a4..f64da7b121e1b6 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -941,6 +941,12 @@
 		"markdown_source": "../packages/components/src/heading/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "HelpText",
+		"slug": "help-text",
+		"markdown_source": "../packages/components/src/help-text/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "NavigateRegions",
 		"slug": "navigate-regions",
diff --git a/packages/components/src/mobile/help-text/README.md b/packages/components/src/help-text/README.md
similarity index 100%
rename from packages/components/src/mobile/help-text/README.md
rename to packages/components/src/help-text/README.md
diff --git a/packages/components/src/help-text/index.js b/packages/components/src/help-text/index.js
new file mode 100644
index 00000000000000..e0f67e3409a229
--- /dev/null
+++ b/packages/components/src/help-text/index.js
@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { ExternalLink } from '@wordpress/components';
+
+const HelpText = ( { moreLinkText, children, url } ) => {
+	return (
+		<div>
+			{ children }
+			{ url && <ExternalLink url={ url }>{ moreLinkText }</ExternalLink> }
+		</div>
+	);
+};
+
+export default HelpText;
diff --git a/packages/components/src/mobile/help-text/index.native.js b/packages/components/src/help-text/index.native.js
similarity index 100%
rename from packages/components/src/mobile/help-text/index.native.js
rename to packages/components/src/help-text/index.native.js
diff --git a/packages/components/src/mobile/help-text/styles.scss b/packages/components/src/help-text/styles.scss
similarity index 100%
rename from packages/components/src/mobile/help-text/styles.scss
rename to packages/components/src/help-text/styles.scss
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index b605bd852db998..a6457ec8d7a123 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -76,6 +76,7 @@ export { Grid as __experimentalGrid } from './grid';
 export { default as Guide } from './guide';
 export { default as GuidePage } from './guide/page';
 export { Heading as __experimentalHeading } from './heading';
+export { default as HelpText } from './help-text';
 export { HStack as __experimentalHStack } from './h-stack';
 export { default as Icon } from './icon';
 export { default as IconButton } from './button/deprecated';
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index cc47dca52a0f84..82dac4fd7f466d 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -39,6 +39,7 @@ export { default as PanelActions } from './panel/actions';
 export { default as Button } from './button';
 export { default as __experimentalText } from './text';
 export { default as ExternalLink } from './external-link';
+export { default as HelpText } from './help-text';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
 export { default as SandBox } from './sandbox';
@@ -108,7 +109,6 @@ export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
-export { default as HelpText } from './mobile/help-text';
 
 // Utils
 export { colorsUtils } from './mobile/color-settings/utils';

From 8e12d48184d522844dcda5a4c06eadb7bed47e20 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 11/33] 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 c1deca86d3e047..e10e72920c87dc 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>
 						) }

From 4991880fff746c4f1211e7458e72cc88b05db972 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 20 Aug 2021 14:51:23 -0700
Subject: [PATCH 12/33] Fix the url link

---
 packages/components/src/help-text/index.js        | 4 +++-
 packages/components/src/help-text/index.native.js | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/help-text/index.js b/packages/components/src/help-text/index.js
index e0f67e3409a229..2a837a260f497a 100644
--- a/packages/components/src/help-text/index.js
+++ b/packages/components/src/help-text/index.js
@@ -7,7 +7,9 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 	return (
 		<div>
 			{ children }
-			{ url && <ExternalLink url={ url }>{ moreLinkText }</ExternalLink> }
+			{ url && (
+				<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
+			) }
 		</div>
 	);
 };
diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index e9388d572ae9fe..1917d68e06af6b 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -35,7 +35,7 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 			>
 				{ children }
 				{ url && (
-					<ExternalLink url={ url }>{ moreLinkText }</ExternalLink>
+					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
 				) }
 			</Text>
 		</View>

From 34d57bba472dabee22f52096ee4040a7644ca4cf Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 20 Aug 2021 14:51:40 -0700
Subject: [PATCH 13/33] Minor fix

---
 packages/block-editor/src/hooks/anchor.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js
index e10e72920c87dc..c17f14129d45e0 100644
--- a/packages/block-editor/src/hooks/anchor.js
+++ b/packages/block-editor/src/hooks/anchor.js
@@ -128,7 +128,6 @@ export const withInspectorControl = createHigherOrderComponent(
 									{ textControl }
 									<HelpText
 										url="https://wordpress.org/support/article/page-jumps/"
-										r
 										moreLinkText={ __(
 											'Learn more about anchors'
 										) }

From b9c0c646d9dea55bc6ca652373319bfc0decacf1 Mon Sep 17 00:00:00 2001
From: Enej Bajgoric <enej.bajgoric@automattic.com>
Date: Fri, 20 Aug 2021 14:53:19 -0700
Subject: [PATCH 14/33] Update the ImageEdit to use HelpText

---
 packages/block-library/src/image/edit.native.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index a3ee18c9b25079..4652bf95be6921 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -26,9 +26,6 @@ import {
 	BottomSheet,
 	BottomSheetTextControl,
 	BottomSheetSelectControl,
-	FooterMessageControl,
-	FooterMessageLink,
-	ExternalLink,
 	HelpText,
 	Badge,
 } from '@wordpress/components';
@@ -590,14 +587,9 @@ export class ImageEdit extends Component {
 				>
 					{ canImageBeFeatured &&
 						this.getFeaturedButtonPanel( isFeaturedImage ) }
-					<FooterMessageControl
-						label={ __(
-							'Changes to featured image will not be affected by the undo/redo buttons.'
-						) }
-						cellContainerStyle={
-							styles.setFeaturedButtonCellContainer
-						}
-					/>
+					<HelpText>{ __(
+						'Changes to featured image will not be affected by the undo/redo buttons.'
+					) }</HelpText>
 				</PanelBody>
 			</InspectorControls>
 		);

From ade76f0e37cebefed39e9a500b05231986e2b6e1 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Thu, 15 Sep 2022 20:10:32 +0100
Subject: [PATCH 15/33] Adapt code to work with new Typescript component

As the web's version of the ExternalLink component has been converted to Typescript, it's necessary to make some tweaks to the new HelpText component (which imports ExternalLink). This commit does the following:

- Fixes the path ExternalLink is imported from.
- Declares specific types for each prop.
---
 packages/components/src/help-text/index.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/help-text/index.js b/packages/components/src/help-text/index.js
index 2a837a260f497a..eb0a96c0459a87 100644
--- a/packages/components/src/help-text/index.js
+++ b/packages/components/src/help-text/index.js
@@ -1,8 +1,14 @@
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink } from '../external-link';
 
+/**
+ * @param {Object}                    props
+ * @param {string}                    props.moreLinkText
+ * @param {import('react').ReactNode} props.children
+ * @param {string}                    props.url
+ */
 const HelpText = ( { moreLinkText, children, url } ) => {
 	return (
 		<div>

From 70c13f90ccc777539d2ceafd8ae0740ee0e4d74b Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Thu, 15 Sep 2022 20:28:41 +0100
Subject: [PATCH 16/33] Fix lint error: Remove whitespace in string

---
 packages/block-library/src/image/edit.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
index def0db4db2523d..371043347eeb3c 100644
--- a/packages/block-library/src/image/edit.native.js
+++ b/packages/block-library/src/image/edit.native.js
@@ -581,7 +581,7 @@ export class ImageEdit extends Component {
 						moreLinkText={ __( 'What is alt text?' ) }
 					>
 						{ __(
-							'Describe the purpose of the image. Leave empty if the image is purely decorative. '
+							'Describe the purpose of the image. Leave empty if the image is purely decorative.'
 						) }
 					</HelpText>
 				}

From ce04ee0ed40ade4c687bbd04466a2b0d5ad292fa Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Thu, 15 Sep 2022 20:56:27 +0100
Subject: [PATCH 17/33] Revert accidental code deletion

---
 packages/components/src/index.native.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 5a84b2778922e3..24bb7e9e3033ef 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -112,6 +112,7 @@ export { default as InserterButton } from './mobile/inserter-button';
 export { setClipboard, getClipboard } from './mobile/clipboard';
 export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
+export { default as Gridicons } from './mobile/gridicons';
 
 // Utils.
 export { colorsUtils } from './mobile/color-settings/utils';

From dec04bca95e3bcfd3e7599daf88cda0f229f21ec Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 09:50:47 +0100
Subject: [PATCH 18/33] Update reference to old/removed component

As 'FooterMessageLink' has been replaced with 'ExternalLink', this commit updates an outdated reference to the now-removed component.
---
 .../src/embed/embed-link-settings.native.js          | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/embed/embed-link-settings.native.js b/packages/block-library/src/embed/embed-link-settings.native.js
index dcacde56aa05ea..02172cd5793eba 100644
--- a/packages/block-library/src/embed/embed-link-settings.native.js
+++ b/packages/block-library/src/embed/embed-link-settings.native.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	LinkSettingsNavigation,
-	FooterMessageLink,
-} from '@wordpress/components';
+import { LinkSettingsNavigation, ExternalLink } from '@wordpress/components';
 import { isURL } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -37,12 +34,13 @@ const EmbedLinkSettings = ( {
 		},
 		footer: {
 			label: (
-				<FooterMessageLink
+				<ExternalLink
 					href={ __(
 						'https://wordpress.org/support/article/embeds/'
 					) }
-					value={ __( 'Learn more about embeds' ) }
-				/>
+				>
+					{ __( 'Learn more about embeds' ) }
+				</ExternalLink>
 			),
 			separatorType: 'topFullWidth',
 		},

From 4eba51b5d71840dc8f9c92681b37dc764b3b883c Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 15:26:48 +0100
Subject: [PATCH 19/33] Add necessary space between text and URL

As we'll always need a space between text and the URL that's returned by the HelpText component, this commit goes ahead to add the space within the component itself. This will make the component easier to use "out of the box", as it won't be necessary for developers to remember.
---
 packages/components/src/help-text/index.native.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index 1917d68e06af6b..8f59e8535ed5c6 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -35,7 +35,12 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 			>
 				{ children }
 				{ url && (
-					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
+					<>
+						{ ' ' }
+						<ExternalLink href={ url }>
+							{ moreLinkText }
+						</ExternalLink>
+					</>
 				) }
 			</Text>
 		</View>

From 85f8a01cbe2ed14b611a10fb20acc053b408d648 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 15:33:03 +0100
Subject: [PATCH 20/33] Add necessary space between text and link

As with the previous commit, the necessary space between text and link in the HelpText component is added here.
---
 packages/components/src/help-text/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/index.js b/packages/components/src/help-text/index.js
index eb0a96c0459a87..0b5d08a6aa5c7c 100644
--- a/packages/components/src/help-text/index.js
+++ b/packages/components/src/help-text/index.js
@@ -14,7 +14,10 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 		<div>
 			{ children }
 			{ url && (
-				<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
+				<>
+					{ ' ' }
+					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
+				</>
 			) }
 		</div>
 	);

From 0c82978618cc51b57397ee2b30136bb48d47968f Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 15:42:46 +0100
Subject: [PATCH 21/33] Update README for ExternalLink for accuracy

This README has been updated since this PR was first worked on (in https://github.com/WordPress/gutenberg/pull/41681/). As such, this commit brings in the latest updates for accuracy.
---
 .../components/src/external-link/README.md    | 25 ++++++-------------
 1 file changed, 7 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/external-link/README.md b/packages/components/src/external-link/README.md
index 2ed515ca7e54d9..c0e5621154cc29 100644
--- a/packages/components/src/external-link/README.md
+++ b/packages/components/src/external-link/README.md
@@ -1,6 +1,6 @@
 # ExternalLink
 
-Renders a hyperlink that, when tapped or clicked, opens in a new window.
+Link to an external resource.
 
 ## Usage
 
@@ -14,27 +14,16 @@ const MyExternalLink = () => (
 
 ## Props
 
-The text that's displayed within the component's tags will be "clickable" and link to any URL provided via the `href` prop. As outlined below, the `href` prop is the only required prop.
+The component accepts the following props. Any other props will be passed through to the `a`.
 
-There are two other optional props that are web only. That is, they're not available for use with the React Native implementation of the editor.
+### `children`: `ReactNode`
 
-### `href`
+The content to be displayed within the link.
 
-The URL that is being linked to and will open in a new window when tapped or clicked.
-
--   Type: `String`
 -   Required: Yes
 
-### `className` (web only)
-
-An optional CSS class that's added to the hyperlink's HTML.
-
--   Type: `String`
--   Required: No
+### `href`: `string`
 
-### `rel` (web only)
+The URL of the external resource.
 
-A <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel">rel attribute</>.
-
--   Type: `String`
--   Required: No
+-   Required: Yes

From d449feb152cc8e6825aa7e080217b7943e37ec11 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 16:55:08 +0100
Subject: [PATCH 22/33] Only add space if there is *both* text and a URL

---
 packages/components/src/help-text/index.js        | 6 ++----
 packages/components/src/help-text/index.native.js | 8 ++------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/help-text/index.js b/packages/components/src/help-text/index.js
index 0b5d08a6aa5c7c..0a834abfca9aba 100644
--- a/packages/components/src/help-text/index.js
+++ b/packages/components/src/help-text/index.js
@@ -13,11 +13,9 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 	return (
 		<div>
 			{ children }
+			{ children && url && ' ' }
 			{ url && (
-				<>
-					{ ' ' }
-					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
-				</>
+				<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
 			) }
 		</div>
 	);
diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index 8f59e8535ed5c6..39cb04956d1f16 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -34,13 +34,9 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 				} }
 			>
 				{ children }
+				{ children && url && ' ' }
 				{ url && (
-					<>
-						{ ' ' }
-						<ExternalLink href={ url }>
-							{ moreLinkText }
-						</ExternalLink>
-					</>
+					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
 				) }
 			</Text>
 		</View>

From 60ade1d1a2562d913284b8ce4effb47f445a80d9 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 16:55:32 +0100
Subject: [PATCH 23/33] Apply correct style to HelpText component

---
 packages/components/src/help-text/index.native.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index 39cb04956d1f16..a0c1067e564faa 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -32,6 +32,7 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 						( enabled ) => enabled && Linking.openURL( url )
 					);
 				} }
+				style={ styles[ 'help-text' ] }
 			>
 				{ children }
 				{ children && url && ' ' }

From 8e51b87b72a15a71138a73dd32bed56abc7a2dae Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 17:22:58 +0100
Subject: [PATCH 24/33] Refine native styles to match FooterControl

---
 packages/components/src/help-text/index.native.js    |  8 +++-----
 packages/components/src/help-text/styles.native.scss | 11 +++++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/help-text/styles.native.scss

diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index a0c1067e564faa..dd22343501f6ac 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -16,12 +16,10 @@ import styles from './styles.scss';
 
 const HelpText = ( { moreLinkText, children, url } ) => {
 	if ( typeof children === 'string' ) {
-		children = (
-			<Text style={ styles[ 'help-text__text' ] }>{ children }</Text>
-		);
+		children = <Text>{ children }</Text>;
 	}
 	return (
-		<View>
+		<View style={ styles[ 'help-text' ] }>
 			<Text
 				accessibilityRole={ url ? 'link' : 'text' }
 				accessibilityHint={
@@ -32,7 +30,7 @@ const HelpText = ( { moreLinkText, children, url } ) => {
 						( enabled ) => enabled && Linking.openURL( url )
 					);
 				} }
-				style={ styles[ 'help-text' ] }
+				style={ styles[ 'help-text__text' ] }
 			>
 				{ children }
 				{ children && url && ' ' }
diff --git a/packages/components/src/help-text/styles.native.scss b/packages/components/src/help-text/styles.native.scss
new file mode 100644
index 00000000000000..8cc3d69a132bb7
--- /dev/null
+++ b/packages/components/src/help-text/styles.native.scss
@@ -0,0 +1,11 @@
+.help-text {
+	flex-direction: row;
+	min-height: 48;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.help-text__text {
+	font-size: 12px;
+	color: $gray;
+}

From 5f71efe4c851d988cb5925c8fb2b6c511c9c6f3e Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 17:30:32 +0100
Subject: [PATCH 25/33] Tweak HelpText styling to match FooterControl

---
 packages/components/src/help-text/index.native.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index dd22343501f6ac..515734e9811a4e 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -16,7 +16,9 @@ import styles from './styles.scss';
 
 const HelpText = ( { moreLinkText, children, url } ) => {
 	if ( typeof children === 'string' ) {
-		children = <Text>{ children }</Text>;
+		children = (
+			<Text style={ styles[ 'help-text__text' ] }>{ children }</Text>
+		);
 	}
 	return (
 		<View style={ styles[ 'help-text' ] }>

From 3f092cfbc4b6e184f6d0ffd8764c1ad2e8ace0ec Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 18:06:27 +0100
Subject: [PATCH 26/33] Refactor FooterMessageControl in LinkSettings

---
 .../src/embed/embed-link-settings.native.js      | 16 ++++------------
 .../block-library/src/social-link/edit.native.js |  2 +-
 .../src/mobile/link-settings/index.native.js     | 15 +++++++++------
 3 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/block-library/src/embed/embed-link-settings.native.js b/packages/block-library/src/embed/embed-link-settings.native.js
index 02172cd5793eba..5ffa8491925b64 100644
--- a/packages/block-library/src/embed/embed-link-settings.native.js
+++ b/packages/block-library/src/embed/embed-link-settings.native.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { LinkSettingsNavigation, ExternalLink } from '@wordpress/components';
+import { LinkSettingsNavigation } from '@wordpress/components';
 import { isURL } from '@wordpress/url';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -32,17 +32,9 @@ const EmbedLinkSettings = ( {
 			autoFocus,
 			autoFill: true,
 		},
-		footer: {
-			label: (
-				<ExternalLink
-					href={ __(
-						'https://wordpress.org/support/article/embeds/'
-					) }
-				>
-					{ __( 'Learn more about embeds' ) }
-				</ExternalLink>
-			),
-			separatorType: 'topFullWidth',
+		help: {
+			url: __( 'https://wordpress.org/support/article/embeds/' ),
+			moreLinkText: __( 'Learn more about embeds' ),
 		},
 	};
 
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
index bc3d2e47db9619..939da55897467d 100644
--- a/packages/block-library/src/social-link/edit.native.js
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -47,7 +47,7 @@ const linkSettingsOptions = {
 		label: __( 'Link label' ),
 		placeholder: __( 'None' ),
 	},
-	footer: {
+	help: {
 		label: __( 'Briefly describe the link to help screen reader user' ),
 	},
 };
diff --git a/packages/components/src/mobile/link-settings/index.native.js b/packages/components/src/mobile/link-settings/index.native.js
index 794650adefdd79..342135f8bef35f 100644
--- a/packages/components/src/mobile/link-settings/index.native.js
+++ b/packages/components/src/mobile/link-settings/index.native.js
@@ -26,9 +26,9 @@ import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-context';
 import PanelBody from '../../panel/body';
 import TextControl from '../../text-control';
 import ToggleControl from '../../toggle-control';
-import FooterMessageControl from '../../footer-message-control';
 import PanelActions from '../../panel/actions';
 import LinkRelIcon from './link-rel';
+import HelpText from '../../help-text';
 
 import styles from './style.scss';
 
@@ -303,12 +303,15 @@ function LinkSettings( {
 			<PanelBody style={ styles.linkSettingsPanel }>
 				{ getSettings() }
 			</PanelBody>
-			{ options.footer && (
+			{ options.help && (
 				<PanelBody style={ styles.linkSettingsPanel }>
-					<FooterMessageControl
-						label={ options.footer.label }
-						separatorType={ options.footer.separatorType }
-					/>
+					<HelpText
+						url={ options.help.url }
+						moreLinkText={ options.help.moreLinkText }
+						separatorType={ options.help.separatorType }
+					>
+						{ options.help.label }
+					</HelpText>
 				</PanelBody>
 			) }
 			{ actions && <PanelActions actions={ actions } /> }

From 52d62bcc6a4f21363f48e86e5d627ff1ac9e8532 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Fri, 16 Sep 2022 18:54:48 +0100
Subject: [PATCH 27/33] Introduce a top border for the HelpText component

---
 .../src/embed/embed-link-settings.native.js   |  1 +
 .../components/src/help-text/index.native.js  | 56 ++++++++++++-------
 .../src/help-text/styles.native.scss          |  9 +++
 3 files changed, 45 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/embed/embed-link-settings.native.js b/packages/block-library/src/embed/embed-link-settings.native.js
index 5ffa8491925b64..4f081572d13692 100644
--- a/packages/block-library/src/embed/embed-link-settings.native.js
+++ b/packages/block-library/src/embed/embed-link-settings.native.js
@@ -35,6 +35,7 @@ const EmbedLinkSettings = ( {
 		help: {
 			url: __( 'https://wordpress.org/support/article/embeds/' ),
 			moreLinkText: __( 'Learn more about embeds' ),
+			separatorType: 'topFullWidth',
 		},
 	};
 
diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index 515734e9811a4e..1c880471f0c119 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -8,39 +8,53 @@ import { View, Text, AccessibilityInfo, Linking } from 'react-native';
  */
 import { ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import styles from './styles.scss';
 
-const HelpText = ( { moreLinkText, children, url } ) => {
+const HelpText = ( { moreLinkText, children, url, separatorType } ) => {
 	if ( typeof children === 'string' ) {
 		children = (
 			<Text style={ styles[ 'help-text__text' ] }>{ children }</Text>
 		);
 	}
+
+	const separatorStyle = usePreferredColorSchemeStyle(
+		styles[ 'help-text__separator' ],
+		styles[ 'help-text__separator--dark' ]
+	);
+
 	return (
-		<View style={ styles[ 'help-text' ] }>
-			<Text
-				accessibilityRole={ url ? 'link' : 'text' }
-				accessibilityHint={
-					url ? __( 'Opens link in a browser' ) : null
-				}
-				onPress={ () => {
-					AccessibilityInfo.isScreenReaderEnabled().then(
-						( enabled ) => enabled && Linking.openURL( url )
-					);
-				} }
-				style={ styles[ 'help-text__text' ] }
-			>
-				{ children }
-				{ children && url && ' ' }
-				{ url && (
-					<ExternalLink href={ url }>{ moreLinkText }</ExternalLink>
-				) }
-			</Text>
-		</View>
+		<>
+			{ separatorType === 'topFullWidth' && (
+				<View style={ separatorStyle } />
+			) }
+			<View style={ styles[ 'help-text' ] }>
+				<Text
+					accessibilityRole={ url ? 'link' : 'text' }
+					accessibilityHint={
+						url ? __( 'Opens link in a browser' ) : null
+					}
+					onPress={ () => {
+						AccessibilityInfo.isScreenReaderEnabled().then(
+							( enabled ) => enabled && Linking.openURL( url )
+						);
+					} }
+					style={ styles[ 'help-text__text' ] }
+				>
+					{ children }
+					{ children && url && ' ' }
+					{ url && (
+						<ExternalLink href={ url }>
+							{ moreLinkText }
+						</ExternalLink>
+					) }
+				</Text>
+			</View>
+		</>
 	);
 };
 
diff --git a/packages/components/src/help-text/styles.native.scss b/packages/components/src/help-text/styles.native.scss
index 8cc3d69a132bb7..2f8f3e94340124 100644
--- a/packages/components/src/help-text/styles.native.scss
+++ b/packages/components/src/help-text/styles.native.scss
@@ -9,3 +9,12 @@
 	font-size: 12px;
 	color: $gray;
 }
+
+.help-text__separator {
+	background-color: $light-gray-400;
+	height: 1px;
+}
+
+.help-text__separator--dark {
+	background-color: $gray-70;
+}

From 5a3584e2d401f0ce6f73207ffcbe4b65e4643d0b Mon Sep 17 00:00:00 2001
From: Siobhan Bamber <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 11:49:00 +0000
Subject: [PATCH 28/33] Update README description for clarity

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
---
 packages/components/src/help-text/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/README.md b/packages/components/src/help-text/README.md
index eb06fb4dab4a4f..e8140197aee006 100644
--- a/packages/components/src/help-text/README.md
+++ b/packages/components/src/help-text/README.md
@@ -1,6 +1,6 @@
 # HelpText
 
-Renders a help text shell with a ExternalLink appended at the end.
+Renders help text with a `ExternalLink` appended at the end of the text.
 
 ## Usage
 

From 5a701e53d22b393d466d1ba4490c4703cc936fc6 Mon Sep 17 00:00:00 2001
From: Siobhan Bamber <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 11:49:40 +0000
Subject: [PATCH 29/33] Update README description for clarity

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
---
 packages/components/src/help-text/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/README.md b/packages/components/src/help-text/README.md
index e8140197aee006..2b34e1cd694884 100644
--- a/packages/components/src/help-text/README.md
+++ b/packages/components/src/help-text/README.md
@@ -18,7 +18,7 @@ The text that's displayed within the component's tags will be "clickable" and ex
 
 ### `url`
 
-An optional URL that is being linked to and will open in a new window when tapped or clicked.
+An optional URL to link, opens in a new window when tapped or clicked.
 
 -   Type: `String`
 -   Required: No

From 67cd28bae6d206b4f0ff5da08fa25258713fd8ac Mon Sep 17 00:00:00 2001
From: Siobhan Bamber <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 11:50:38 +0000
Subject: [PATCH 30/33] Update README description for clarity

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
---
 packages/components/src/help-text/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/help-text/README.md b/packages/components/src/help-text/README.md
index 2b34e1cd694884..8a67707375542e 100644
--- a/packages/components/src/help-text/README.md
+++ b/packages/components/src/help-text/README.md
@@ -25,7 +25,7 @@ An optional URL to link, opens in a new window when tapped or clicked.
 
 ### `moreLinkText` 
 
-An optional Text as the click abel text at the end.
+An optional text string to display as the link label for the optional `url` prop. 
 
 -   Type: `String`
 -   Required: No

From 79ea8b57d32975d80a06ec38eb569ea8b8baa2db Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 11:54:20 +0000
Subject: [PATCH 31/33] Delete unused 'footer-message-link' file

---
 .../footer-message-link.native.js             | 26 -------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js

diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js b/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js
deleted file mode 100644
index 87a9ae0813fd0d..00000000000000
--- a/packages/components/src/mobile/bottom-sheet/footer-message-link/footer-message-link.native.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { Text, Linking } from 'react-native';
-/**
- * WordPress dependencies
- */
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-/**
- * Internal dependencies
- */
-import styles from './styles.scss';
-
-function FooterMessageLink( { href, value } ) {
-	const textStyle = usePreferredColorSchemeStyle(
-		styles.footerMessageLink,
-		styles.footerMessageLinkDark
-	);
-	return (
-		<Text style={ textStyle } onPress={ () => Linking.openURL( href ) }>
-			{ value }
-		</Text>
-	);
-}
-
-export default FooterMessageLink;

From 8ee995c3931ed809af24964bff4d9d7764881ac0 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 12:03:29 +0000
Subject: [PATCH 32/33] Help component: Avoid rendering link without text

A conditional has been created to check that s link has text associated with it before rendering.
---
 packages/components/src/help-text/index.native.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/help-text/index.native.js b/packages/components/src/help-text/index.native.js
index 1c880471f0c119..bc5c51abe3086a 100644
--- a/packages/components/src/help-text/index.native.js
+++ b/packages/components/src/help-text/index.native.js
@@ -27,6 +27,8 @@ const HelpText = ( { moreLinkText, children, url, separatorType } ) => {
 		styles[ 'help-text__separator--dark' ]
 	);
 
+	const hasMoreLink = url && moreLinkText;
+
 	return (
 		<>
 			{ separatorType === 'topFullWidth' && (
@@ -46,8 +48,8 @@ const HelpText = ( { moreLinkText, children, url, separatorType } ) => {
 					style={ styles[ 'help-text__text' ] }
 				>
 					{ children }
-					{ children && url && ' ' }
-					{ url && (
+					{ children && hasMoreLink && ' ' }
+					{ hasMoreLink && (
 						<ExternalLink href={ url }>
 							{ moreLinkText }
 						</ExternalLink>

From 8d4d17e44196b318e866d9042fddd6ca9c4b32f8 Mon Sep 17 00:00:00 2001
From: Siobhan <siobhan@automattic.com>
Date: Wed, 2 Nov 2022 13:32:00 +0000
Subject: [PATCH 33/33] Throw error if wrong data type is passed to link

---
 packages/components/src/external-link/index.native.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/external-link/index.native.js b/packages/components/src/external-link/index.native.js
index 88f7f04641fd04..542840a61888d7 100644
--- a/packages/components/src/external-link/index.native.js
+++ b/packages/components/src/external-link/index.native.js
@@ -20,6 +20,14 @@ export function ExternalLink( { href, children } ) {
 		style[ 'external-link__dark' ]
 	);
 
+	if ( typeof children !== 'string' ) {
+		throw new Error(
+			__(
+				'The ExternalLink component only accepts a string as a child element. This is to ensure the element can be read by screen readers.'
+			)
+		);
+	}
+
 	return (
 		<Text
 			style={ externalLink }