@wordpress/editor 12.6.0 → 12.9.0

package/build-style/style.css

@@ -638,6 +638,14 @@
   }
 }
 
+.editor-post-save-draft.has-text.has-icon svg {
+  margin-right: 0;
+}
+
+:root[dir=rtl] .editor-post-saved-state.has-text.has-icon {
+  justify-content: right;
+}
+
 .editor-post-taxonomies__hierarchical-terms-list {
   max-height: 14em;
   overflow: auto;
@@ -740,20 +748,23 @@
   color: rgba(30, 30, 30, 0.62);
 }
 
-.edit-post-post-visibility__dialog,
-.editor-post-visibility__dialog-fieldset {
-  padding: 4px;
-  padding-top: 0;
+.editor-post-visibility__close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-legend,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-legend {
+
+.editor-post-visibility__fieldset {
+  padding: 8px;
+}
+.editor-post-visibility__fieldset .editor-post-visibility__legend {
   font-weight: 600;
-  margin-bottom: 1em;
+  padding: 1em 0 0 0;
+}
+.editor-post-visibility__fieldset .editor-post-visibility__description {
   margin-top: 0.5em;
-  padding: 0;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -773,48 +784,40 @@
   margin-top: 2px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:focus,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]::-webkit-input-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]::-webkit-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]::-moz-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]::-moz-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:-ms-input-placeholder,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:-ms-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio],
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio] {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio] {
     height: 20px;
     width: 20px;
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked::before,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked::before {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked::before {
   box-sizing: inherit;
   width: 8px;
   height: 8px;
@@ -824,36 +827,32 @@
   border: 4px solid #fff;
 }
 @media (min-width: 600px) {
-  .edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked::before,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked::before {
+  .editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked::before {
     transform: translate(5px, 5px);
   }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:focus,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:focus {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-radio[type=radio]:checked,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-radio[type=radio]:checked {
+.editor-post-visibility__fieldset .editor-post-visibility__radio[type=radio]:checked {
   background: var(--wp-admin-theme-color);
   border-color: var(--wp-admin-theme-color);
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-label,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-label {
-  font-weight: 600;
+.editor-post-visibility__fieldset .editor-post-visibility__info {
+  color: #757575;
+  margin-left: 36px;
+  margin-top: 0.5em;
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__dialog-info,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__dialog-info {
-  margin-top: 0;
-  margin-left: 32px;
+@media (min-width: 600px) {
+  .editor-post-visibility__fieldset .editor-post-visibility__info {
+    margin-left: 32px;
+  }
 }
-.edit-post-post-visibility__dialog .editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info,
-.editor-post-visibility__dialog-fieldset .editor-post-visibility__choice:last-child .editor-post-visibility__dialog-info {
+.editor-post-visibility__fieldset .editor-post-visibility__choice:last-child .editor-post-visibility__info {
   margin-bottom: 0;
 }
-
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -864,35 +863,35 @@
   font-size: 16px;
   /* Override core line-height. To be reviewed. */
   line-height: normal;
-  margin-left: 36px;
-  margin-top: 8px;
+  margin-left: 32px;
+  width: calc(100% - 32px);
 }
 @media (prefers-reduced-motion: reduce) {
-  .editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+  .editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text] {
+  .editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text] {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]:focus {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]::-webkit-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]::-moz-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.editor-post-visibility__dialog-password .editor-post-visibility__dialog-password-input[type=text]:-ms-input-placeholder {
+.editor-post-visibility__fieldset .editor-post-visibility__password .editor-post-visibility__password-input[type=text]:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 
@@ -925,7 +924,7 @@
   z-index: 99998;
 }
 
-.table-of-contents__popover .components-popover__content > div {
+.table-of-contents__popover .components-popover__content {
   padding: 16px;
 }
 @media (min-width: 600px) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "12.6.0",
+	"version": "12.9.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,37 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.7.0",
-		"@wordpress/api-fetch": "^6.4.0",
-		"@wordpress/block-editor": "^8.6.0",
-		"@wordpress/blocks": "^11.6.0",
-		"@wordpress/components": "^19.9.0",
-		"@wordpress/compose": "^5.5.0",
-		"@wordpress/core-data": "^4.5.0",
-		"@wordpress/data": "^6.7.0",
-		"@wordpress/date": "^4.7.0",
-		"@wordpress/deprecated": "^3.7.0",
-		"@wordpress/element": "^4.5.0",
-		"@wordpress/hooks": "^3.7.0",
-		"@wordpress/html-entities": "^3.7.0",
-		"@wordpress/i18n": "^4.7.0",
-		"@wordpress/icons": "^8.3.0",
-		"@wordpress/keyboard-shortcuts": "^3.5.0",
-		"@wordpress/keycodes": "^3.7.0",
-		"@wordpress/media-utils": "^3.5.0",
-		"@wordpress/notices": "^3.7.0",
-		"@wordpress/preferences": "^1.3.0",
-		"@wordpress/reusable-blocks": "^3.5.0",
-		"@wordpress/rich-text": "^5.5.0",
-		"@wordpress/server-side-render": "^3.5.0",
-		"@wordpress/url": "^3.8.0",
-		"@wordpress/wordcount": "^3.7.0",
+		"@wordpress/a11y": "^3.10.0",
+		"@wordpress/api-fetch": "^6.7.0",
+		"@wordpress/blob": "^3.10.0",
+		"@wordpress/block-editor": "^9.2.0",
+		"@wordpress/blocks": "^11.9.0",
+		"@wordpress/components": "^19.12.0",
+		"@wordpress/compose": "^5.8.0",
+		"@wordpress/core-data": "^4.8.0",
+		"@wordpress/data": "^6.10.0",
+		"@wordpress/date": "^4.10.0",
+		"@wordpress/deprecated": "^3.10.0",
+		"@wordpress/element": "^4.8.0",
+		"@wordpress/hooks": "^3.10.0",
+		"@wordpress/html-entities": "^3.10.0",
+		"@wordpress/i18n": "^4.10.0",
+		"@wordpress/icons": "^9.1.0",
+		"@wordpress/keyboard-shortcuts": "^3.8.0",
+		"@wordpress/keycodes": "^3.10.0",
+		"@wordpress/media-utils": "^4.1.0",
+		"@wordpress/notices": "^3.10.0",
+		"@wordpress/preferences": "^2.2.0",
+		"@wordpress/reusable-blocks": "^3.8.0",
+		"@wordpress/rich-text": "^5.8.0",
+		"@wordpress/server-side-render": "^3.8.0",
+		"@wordpress/url": "^3.11.0",
+		"@wordpress/wordcount": "^3.10.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"rememo": "^3.0.0"
+		"rememo": "^4.0.0"
 	},
 	"peerDependencies": {
 		"react": "^17.0.0",
@@ -69,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

package/src/components/autosave-monitor/test/index.js

@@ -23,6 +23,9 @@ describe( 'AutosaveMonitor', () => {
 	} );
 
 	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+
 		setAutosaveTimerSpy.mockClear();
 	} );
 

package/src/components/editor-help/help-section-title.native.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { Text, View } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+const HelpSectionTitle = ( { children } ) => {
+	const helpSectionTitle = usePreferredColorSchemeStyle(
+		styles.helpSectionTitle,
+		styles.helpSectionTitleDark
+	);
+
+	return (
+		<View style={ styles.helpSectionTitleContainer }>
+			<Text style={ helpSectionTitle }>{ children }</Text>
+		</View>
+	);
+};
+
+export default HelpSectionTitle;

package/src/components/editor-help/help-topic-row.native.js

@@ -9,7 +9,7 @@ import { useNavigation } from '@react-navigation/native';
 import { TextControl, Icon } from '@wordpress/components';
 import { chevronRight } from '@wordpress/icons';
 
-const HelpTopicRow = ( { label, icon, screenName } ) => {
+const HelpTopicRow = ( { label, icon, screenName, isLastItem } ) => {
 	const navigation = useNavigation();
 
 	const openSubSheet = () => {
@@ -18,7 +18,7 @@ const HelpTopicRow = ( { label, icon, screenName } ) => {
 
 	return (
 		<TextControl
-			separatorType="leftMargin"
+			separatorType={ isLastItem ? 'none' : 'leftMargin' }
 			customActionButton
 			leftAlign
 			onPress={ openSubSheet }

package/src/components/editor-help/icon-move-blocks.native.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M9.53 17.47 9 16.94 7.94 18l.53.53 2 2 .53.53.53-.53 2-2 .53-.53L13 16.94l-.53.53-.72.72v-4.94h-1.5v4.94l-.72-.72Zm-1.06-14L7.94 4 9 5.06l.53-.53.72-.72v4.94h1.5V3.81l.72.72.53.53L14.06 4l-.53-.53-2-2L11 .94l-.53.53-2 2ZM4.53 9.53 5.06 9 4 7.94l-.53.53-2 2-.53.53.53.53 2 2 .53.53L5.06 13l-.53-.53-.72-.72h4.94v-1.5H3.81l.72-.72Zm14-1.06L18 7.94 16.94 9l.53.53.72.72h-4.94v1.5h4.94l-.72.72-.53.53L18 14.06l.53-.53 2-2 .53-.53-.53-.53-2-2Z" />
+	</SVG>
+);

package/src/components/editor-help/index.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { kebabCase } from 'lodash';
-import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
 import { TransitionPresets } from '@react-navigation/stack';
 
 /**
@@ -14,16 +14,9 @@ import {
 	PanelBody,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	helpFilled,
-	plusCircleFilled,
-	alignJustify,
-	trash,
-	cog,
-} from '@wordpress/icons';
+import { helpFilled, plusCircleFilled, trash, cog } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as editorStore } from '@wordpress/editor';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import {
 	requestContactCustomerSupport,
 	requestGotoCustomerSupportOptions,
@@ -41,6 +34,8 @@ import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
 import RemoveBlocks from './remove-blocks';
 import CustomizeBlocks from './customize-blocks';
+import moveBlocksIcon from './icon-move-blocks';
+import HelpSectionTitle from './help-section-title';
 
 const HELP_TOPICS = [
 	{
@@ -53,7 +48,7 @@ const HELP_TOPICS = [
 		icon: plusCircleFilled,
 		view: <AddBlocks />,
 	},
-	{ label: __( 'Move blocks' ), icon: alignJustify, view: <MoveBlocks /> },
+	{ label: __( 'Move blocks' ), icon: moveBlocksIcon, view: <MoveBlocks /> },
 	{ label: __( 'Remove blocks' ), icon: trash, view: <RemoveBlocks /> },
 	{
 		label: __( 'Customize blocks' ),
@@ -67,11 +62,6 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 		postType: select( editorStore ).getEditedPostAttribute( 'type' ),
 	} ) );
 
-	const sectionTitle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
-	);
-
 	const title =
 		postType === 'page'
 			? __( 'How to edit your page' )
@@ -130,15 +120,22 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 											} }
 										>
 											<PanelBody>
-												<Text style={ sectionTitle }>
+												<HelpSectionTitle>
 													{ __( 'The basics' ) }
-												</Text>
+												</HelpSectionTitle>
 												{ /* Print out help topics. */ }
 												{ HELP_TOPICS.map(
-													( { label, icon } ) => {
+													(
+														{ label, icon },
+														index
+													) => {
 														const labelSlug = kebabCase(
 															label
 														);
+														const isLastItem =
+															index ===
+															HELP_TOPICS.length -
+																1;
 														return (
 															<HelpTopicRow
 																key={
@@ -149,16 +146,17 @@ function EditorHelpTopics( { close, isVisible, onClose } ) {
 																screenName={
 																	labelSlug
 																}
+																isLastItem={
+																	isLastItem
+																}
 															/>
 														);
 													}
 												) }
 												{
-													<Text
-														style={ sectionTitle }
-													>
+													<HelpSectionTitle>
 														{ __( 'Get support' ) }
-													</Text>
+													</HelpSectionTitle>
 												}
 												{
 													<HelpGetSupportButton

package/src/components/editor-help/move-blocks.native.js

@@ -12,19 +12,39 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import styles from './style.scss';
-import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
+import {
+	HelpDetailBodyText,
+	HelpDetailImage,
+	HelpDetailSectionHeadingText,
+} from './view-sections';
 
 const MoveBlocks = () => {
 	return (
 		<>
+			<HelpDetailImage
+				source={ require( './images/drag-and-drop-light.png' ) }
+				sourceDarkMode={ require( './images/drag-and-drop-dark.png' ) }
+			/>
+			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText
+					text={ __( 'Drag & drop' ) }
+					badge={ __( 'NEW' ) }
+				/>
+				<HelpDetailBodyText
+					text={ __(
+						'Drag & drop makes rearranging blocks a breeze. Press and hold on a block, then drag it to its new location and release.'
+					) }
+				/>
+			</View>
 			<HelpDetailImage
 				source={ require( './images/move-light.png' ) }
 				sourceDarkMode={ require( './images/move-dark.png' ) }
 			/>
 			<View style={ styles.helpDetailContainer }>
+				<HelpDetailSectionHeadingText text={ __( 'Arrow buttons' ) } />
 				<HelpDetailBodyText
 					text={ __(
-						'You can rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it above or below other blocks.'
+						'You can also rearrange blocks by tapping a block and then tapping the up and down arrows that appear on the bottom left side of the block to move it up or down.'
 					) }
 				/>
 			</View>

package/src/components/editor-help/style.scss

@@ -31,6 +31,21 @@
 	padding: 0;
 }
 
+.helpSectionTitleContainer {
+	margin-top: 24px;
+	margin-bottom: 16px;
+}
+
+.helpSectionTitle {
+	color: $light-primary;
+	font-weight: 600;
+	font-size: 16px;
+}
+
+.helpSectionTitleDark {
+	color: $dark-secondary;
+}
+
 .helpDetailContainer {
 	padding: 0 16px;
 }
@@ -62,14 +77,18 @@
 }
 
 .helpDetailSectionHeading {
+	flex-direction: row;
+	align-items: center;
+}
+
+.helpDetailSectionHeadingText {
 	color: $light-primary;
-	font-weight: 600;
+	font-weight: 700;
 	font-size: 16px;
-	margin-top: 24px;
 }
 
-.helpDetailSectionHeadingDark {
-	color: $dark-secondary;
+.helpDetailSectionHeadingTextDark {
+	color: $dark-primary;
 }
 
 .helpDetailBody {
@@ -81,3 +100,16 @@
 .helpDetailBodyDark {
 	color: $dark-secondary;
 }
+
+.helpDetailBadgeContainer {
+	padding: 2px 6px;
+	margin-right: 8px;
+	border-radius: 6px;
+	background-color: #c9356e;
+}
+
+.helpDetailBadgeText {
+	color: $white;
+	font-weight: 500;
+	font-size: 12px;
+}

package/src/components/editor-help/test/index.native.js

@@ -35,7 +35,7 @@ it( 'navigates back from help topic detail screen', async () => {
 	const backButton = screen.getAllByA11yLabel( 'Go back' );
 	fireEvent.press( backButton[ backButton.length - 1 ] );
 
-	// Currently logs `act` warning due to https://git.io/JYYGE
+	// Currently logs `act` warning due to https://github.com/callstack/react-native-testing-library/issues/379
 	await waitForElementToBeRemoved( () =>
 		screen.getByText(
 			'Each block has its own settings. To find them, tap on a block. Its settings will appear on the toolbar at the bottom of the screen.'

package/src/components/editor-help/view-sections.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Text, Image } from 'react-native';
+import { Text, Image, View } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -28,15 +28,22 @@ export const HelpDetailBodyText = ( { text } ) => {
 	);
 };
 
-export const HelpDetailSectionHeadingText = ( { text } ) => {
-	const headingStyle = usePreferredColorSchemeStyle(
-		styles.helpDetailSectionHeading,
-		styles.helpDetailSectionHeadingDark
+export const HelpDetailSectionHeadingText = ( { text, badge } ) => {
+	const headingTextStyle = usePreferredColorSchemeStyle(
+		styles.helpDetailSectionHeadingText,
+		styles.helpDetailSectionHeadingTextDark
 	);
 	return (
-		<Text accessibilityRole="header" selectable style={ headingStyle }>
-			{ text }
-		</Text>
+		<View style={ styles.helpDetailSectionHeading }>
+			{ badge && <HelpDetailBadge text={ badge } /> }
+			<Text
+				accessibilityRole="header"
+				selectable
+				style={ headingTextStyle }
+			>
+				{ text }
+			</Text>
+		</View>
 	);
 };
 
@@ -62,3 +69,11 @@ export const HelpDetailImage = ( {
 		/>
 	);
 };
+
+const HelpDetailBadge = ( { text } ) => {
+	return (
+		<View style={ styles.helpDetailBadgeContainer }>
+			<Text style={ styles.helpDetailBadgeText }>{ text }</Text>
+		</View>
+	);
+};