@wordpress/editor 11.0.1 → 12.0.2

package/build-module/components/character-count/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/character-count/index.js"],"names":["useSelect","count","characterCount","store","editorStore","CharacterCount","content","select","getEditedPostAttribute"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,cAAlB,QAAwC,sBAAxC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,aAArC;AAEA,eAAe,SAASC,cAAT,GAA0B;AACxC,QAAMC,OAAO,GAAGN,SAAS,CAAIO,MAAF,IAC1BA,MAAM,CAAEH,WAAF,CAAN,CAAsBI,sBAAtB,CAA8C,SAA9C,CADwB,CAAzB;AAIA,SAAON,cAAc,CAAEI,OAAF,EAAW,6BAAX,CAArB;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { count as characterCount } from '@wordpress/wordcount';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nexport default function CharacterCount() {\n\tconst content = useSelect( ( select ) =>\n\t\tselect( editorStore ).getEditedPostAttribute( 'content' )\n\t);\n\n\treturn characterCount( content, 'characters_including_spaces' );\n}\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/character-count/index.js"],"names":["useSelect","count","characterCount","store","editorStore","CharacterCount","content","select","getEditedPostAttribute"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,iBAA1B;AACA,SAASC,KAAK,IAAIC,cAAlB,QAAwC,sBAAxC;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,aAArC;AAEA,eAAe,SAASC,cAAT,GAA0B;AACxC,QAAMC,OAAO,GAAGN,SAAS,CACtBO,MAAF,IAAcA,MAAM,CAAEH,WAAF,CAAN,CAAsBI,sBAAtB,CAA8C,SAA9C,CADU,EAExB,EAFwB,CAAzB;AAKA,SAAON,cAAc,CAAEI,OAAF,EAAW,6BAAX,CAArB;AACA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { count as characterCount } from '@wordpress/wordcount';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\nexport default function CharacterCount() {\n\tconst content = useSelect(\n\t\t( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),\n\t\t[]\n\t);\n\n\treturn characterCount( content, 'characters_including_spaces' );\n}\n"]}

package/build-module/components/editor-help/add-blocks.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -17,15 +17,16 @@ import styles from './style.scss';
 import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const AddBlocks = () => {
-  return createElement(View, {
+  return createElement(Fragment, null, createElement(HelpDetailImage, {
+    source: require('./images/add-light.png'),
+    sourceDarkMode: require('./images/add-dark.png')
+  }), createElement(View, {
     style: styles.helpDetailContainer
-  }, createElement(HelpDetailImage, {
-    source: require('./images/add-blocks.png')
-  }), createElement(HelpDetailBodyText, {
+  }, createElement(HelpDetailBodyText, {
     text: __('Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. ')
   }), createElement(HelpDetailBodyText, {
     text: __('Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.')
-  }));
+  })));
 };
 
 export default AddBlocks;

package/build-module/components/editor-help/add-blocks.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/add-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","AddBlocks","helpDetailContainer","require"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,SAAS,GAAG,MAAM;AACvB,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGH,MAAM,CAACI;AAArB,KACC,cAAC,eAAD;AAAiB,IAAA,MAAM,EAAGC,OAAO,CAAE,yBAAF;AAAjC,IADD,EAEC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,0FADQ;AADV,IAFD,EAOC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,0KADQ;AADV,IAPD,CADD;AAeA,CAhBD;;AAkBA,eAAeI,SAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst AddBlocks = () => {\n\treturn (\n\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t<HelpDetailImage source={ require( './images/add-blocks.png' ) } />\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default AddBlocks;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/add-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","AddBlocks","require","helpDetailContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,SAAS,GAAG,MAAM;AACvB,SACC,8BACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,wBAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,uBAAF;AAFzB,IADD,EAKC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGJ,MAAM,CAACK;AAArB,KACC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,0FADQ;AADV,IADD,EAMC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,0KADQ;AADV,IAND,CALD,CADD;AAoBA,CArBD;;AAuBA,eAAeI,SAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst AddBlocks = () => {\n\treturn (\n\t\t<>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/add-light.png' ) }\n\t\t\t\tsourceDarkMode={ require( './images/add-dark.png' ) }\n\t\t\t/>\n\t\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. '\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Once you become familiar with the names of different blocks, you can add a block by typing a forward slash followed by the block name — for example, /image or /heading.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</>\n\t);\n};\n\nexport default AddBlocks;\n"]}

package/build-module/components/editor-help/customize-blocks.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -17,15 +17,16 @@ import styles from './style.scss';
 import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const CustomizeBlocks = () => {
-  return createElement(View, {
+  return createElement(Fragment, null, createElement(HelpDetailImage, {
+    source: require('./images/settings-light.png'),
+    sourceDarkMode: require('./images/settings-dark.png')
+  }), createElement(View, {
     style: styles.helpDetailContainer
-  }, createElement(HelpDetailImage, {
-    source: require('./images/customize-blocks.png')
-  }), createElement(HelpDetailBodyText, {
-    text: __('Each block has its own settings. To find them, click on a block. Its settings will appear on the toolbar at the bottom of the screen.')
+  }, createElement(HelpDetailBodyText, {
+    text: __('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.')
   }), createElement(HelpDetailBodyText, {
     text: __('Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.')
-  }));
+  })));
 };
 
 export default CustomizeBlocks;

package/build-module/components/editor-help/customize-blocks.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/customize-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","CustomizeBlocks","helpDetailContainer","require"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,eAAe,GAAG,MAAM;AAC7B,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGH,MAAM,CAACI;AAArB,KACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,+BAAF;AADjB,IADD,EAIC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,uIADQ;AADV,IAJD,EASC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,oHADQ;AADV,IATD,CADD;AAiBA,CAlBD;;AAoBA,eAAeI,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst CustomizeBlocks = () => {\n\treturn (\n\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/customize-blocks.png' ) }\n\t\t\t/>\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Each block has its own settings. To find them, click on a block. Its settings will appear on the toolbar at the bottom of the screen.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default CustomizeBlocks;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/customize-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","CustomizeBlocks","require","helpDetailContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,eAAe,GAAG,MAAM;AAC7B,SACC,8BACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,6BAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,4BAAF;AAFzB,IADD,EAKC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGJ,MAAM,CAACK;AAArB,KACC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,qIADQ;AADV,IADD,EAMC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,oHADQ;AADV,IAND,CALD,CADD;AAoBA,CArBD;;AAuBA,eAAeI,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst CustomizeBlocks = () => {\n\treturn (\n\t\t<>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/settings-light.png' ) }\n\t\t\t\tsourceDarkMode={ require( './images/settings-dark.png' ) }\n\t\t\t/>\n\t\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'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.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</>\n\t);\n};\n\nexport default CustomizeBlocks;\n"]}

package/build-module/components/editor-help/help-detail-navigation-screen.native.js

@@ -1,16 +1,17 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import { View } from 'react-native';
+import { ScrollView, StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 /**
  * WordPress dependencies
  */
 
-import { BottomSheet } from '@wordpress/components';
-import { useNavigation } from '@react-navigation/native';
-import { __ } from '@wordpress/i18n';
+import { BottomSheet, BottomSheetContext } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -18,23 +19,35 @@ import { __ } from '@wordpress/i18n';
 import styles from './style.scss';
 
 const HelpDetailNavigationScreen = ({
-  name,
-  content
+  content,
+  label
 }) => {
   const navigation = useNavigation();
-
-  const goBack = () => {
-    navigation.goBack();
-  };
-
+  const {
+    listProps
+  } = useContext(BottomSheetContext);
+  const contentContainerStyle = StyleSheet.flatten(listProps.contentContainerStyle);
   return createElement(BottomSheet.NavigationScreen, {
-    name: __('What is a block?')
-  }, createElement(BottomSheet.NavigationHeader, {
-    screen: name,
-    leftButtonOnPress: goBack
-  }), createElement(View, {
-    style: styles.separator
-  }), content);
+    isScrollable: true,
+    fullScreen: true
+  }, createElement(View, {
+    style: styles.container
+  }, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.BackButton, {
+    onPress: navigation.goBack
+  }), createElement(BottomSheet.NavBar.Heading, null, label)), createElement(ScrollView, _extends({}, listProps, {
+    contentContainerStyle: { ...contentContainerStyle,
+      paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom),
+
+      /**
+       * Remove margin set via `hideHeader`. Combining a header
+       * and navigation in this bottom sheet is at odds with the
+       * current `BottomSheet` implementation.
+       */
+      marginTop: 0
+    }
+  }), createElement(TouchableWithoutFeedback, {
+    accessible: false
+  }, createElement(View, null, content)))));
 };
 
 export default HelpDetailNavigationScreen;

package/build-module/components/editor-help/help-detail-navigation-screen.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/help-detail-navigation-screen.native.js"],"names":["View","BottomSheet","useNavigation","__","styles","HelpDetailNavigationScreen","name","content","navigation","goBack","separator"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,QAA4B,uBAA5B;AACA,SAASC,aAAT,QAA8B,0BAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,0BAA0B,GAAG,CAAE;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAF,KAAyB;AAC3D,QAAMC,UAAU,GAAGN,aAAa,EAAhC;;AAEA,QAAMO,MAAM,GAAG,MAAM;AACpBD,IAAAA,UAAU,CAACC,MAAX;AACA,GAFD;;AAIA,SACC,cAAC,WAAD,CAAa,gBAAb;AAA8B,IAAA,IAAI,EAAGN,EAAE,CAAE,kBAAF;AAAvC,KACC,cAAC,WAAD,CAAa,gBAAb;AACC,IAAA,MAAM,EAAGG,IADV;AAEC,IAAA,iBAAiB,EAAGG;AAFrB,IADD,EAKC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGL,MAAM,CAACM;AAArB,IALD,EAMGH,OANH,CADD;AAUA,CAjBD;;AAmBA,eAAeF,0BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { BottomSheet } from '@wordpress/components';\nimport { useNavigation } from '@react-navigation/native';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst HelpDetailNavigationScreen = ( { name, content } ) => {\n\tconst navigation = useNavigation();\n\n\tconst goBack = () => {\n\t\tnavigation.goBack();\n\t};\n\n\treturn (\n\t\t<BottomSheet.NavigationScreen name={ __( 'What is a block?' ) }>\n\t\t\t<BottomSheet.NavigationHeader\n\t\t\t\tscreen={ name }\n\t\t\t\tleftButtonOnPress={ goBack }\n\t\t\t/>\n\t\t\t<View style={ styles.separator } />\n\t\t\t{ content }\n\t\t</BottomSheet.NavigationScreen>\n\t);\n};\n\nexport default HelpDetailNavigationScreen;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/help-detail-navigation-screen.native.js"],"names":["ScrollView","StyleSheet","TouchableWithoutFeedback","View","useNavigation","BottomSheet","BottomSheetContext","useContext","styles","HelpDetailNavigationScreen","content","label","navigation","listProps","contentContainerStyle","flatten","container","goBack","paddingBottom","Math","max","safeAreaBottomInset","marginTop"],"mappings":";;;AAAA;AACA;AACA;AACA,SACCA,UADD,EAECC,UAFD,EAGCC,wBAHD,EAICC,IAJD,QAKO,cALP;AAMA,SAASC,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,kBAAtB,QAAgD,uBAAhD;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,0BAA0B,GAAG,CAAE;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAF,KAA0B;AAC5D,QAAMC,UAAU,GAAGR,aAAa,EAAhC;AAEA,QAAM;AAAES,IAAAA;AAAF,MAAgBN,UAAU,CAAED,kBAAF,CAAhC;AACA,QAAMQ,qBAAqB,GAAGb,UAAU,CAACc,OAAX,CAC7BF,SAAS,CAACC,qBADmB,CAA9B;AAIA,SACC,cAAC,WAAD,CAAa,gBAAb;AAA8B,IAAA,YAAY,MAA1C;AAA2C,IAAA,UAAU;AAArD,KACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGN,MAAM,CAACQ;AAArB,KACC,cAAC,WAAD,CAAa,MAAb,QACC,cAAC,WAAD,CAAa,MAAb,CAAoB,UAApB;AACC,IAAA,OAAO,EAAGJ,UAAU,CAACK;AADtB,IADD,EAIC,cAAC,WAAD,CAAa,MAAb,CAAoB,OAApB,QACGN,KADH,CAJD,CADD,EASC,cAAC,UAAD,eACME,SADN;AAEC,IAAA,qBAAqB,EAAG,EACvB,GAAGC,qBADoB;AAEvBI,MAAAA,aAAa,EAAEC,IAAI,CAACC,GAAL,CACdP,SAAS,CAACQ,mBADI,EAEdP,qBAAqB,CAACI,aAFR,CAFQ;;AAMvB;AACN;AACA;AACA;AACA;AACMI,MAAAA,SAAS,EAAE;AAXY;AAFzB,MAgBC,cAAC,wBAAD;AAA0B,IAAA,UAAU,EAAG;AAAvC,KACC,cAAC,IAAD,QAAQZ,OAAR,CADD,CAhBD,CATD,CADD,CADD;AAkCA,CA1CD;;AA4CA,eAAeD,0BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tStyleSheet,\n\tTouchableWithoutFeedback,\n\tView,\n} from 'react-native';\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { BottomSheet, BottomSheetContext } from '@wordpress/components';\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst HelpDetailNavigationScreen = ( { content, label } ) => {\n\tconst navigation = useNavigation();\n\n\tconst { listProps } = useContext( BottomSheetContext );\n\tconst contentContainerStyle = StyleSheet.flatten(\n\t\tlistProps.contentContainerStyle\n\t);\n\n\treturn (\n\t\t<BottomSheet.NavigationScreen isScrollable fullScreen>\n\t\t\t<View style={ styles.container }>\n\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t<BottomSheet.NavBar.BackButton\n\t\t\t\t\t\tonPress={ navigation.goBack }\n\t\t\t\t\t/>\n\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t<ScrollView\n\t\t\t\t\t{ ...listProps }\n\t\t\t\t\tcontentContainerStyle={ {\n\t\t\t\t\t\t...contentContainerStyle,\n\t\t\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t\t\t),\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Remove margin set via `hideHeader`. Combining a header\n\t\t\t\t\t\t * and navigation in this bottom sheet is at odds with the\n\t\t\t\t\t\t * current `BottomSheet` implementation.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tmarginTop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<TouchableWithoutFeedback accessible={ false }>\n\t\t\t\t\t\t<View>{ content }</View>\n\t\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t</ScrollView>\n\t\t\t</View>\n\t\t</BottomSheet.NavigationScreen>\n\t);\n};\n\nexport default HelpDetailNavigationScreen;\n"]}

package/build-module/components/editor-help/help-get-support-button.native.js

@@ -0,0 +1,34 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * External dependencies
+ */
+import { Pressable, Text } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+/**
+ * Internal dependencies
+ */
+
+import styles from './style.scss';
+
+const HelpGetSupportButton = ({
+  onPress,
+  title
+}) => {
+  const buttonStyle = usePreferredColorSchemeStyle(styles.button, styles.buttonDark);
+  const textStyle = usePreferredColorSchemeStyle(styles.buttonText, styles.buttonTextDark);
+  return createElement(Pressable, {
+    style: buttonStyle,
+    onPress: onPress,
+    accessibilityRole: 'button'
+  }, createElement(Text, {
+    style: textStyle
+  }, title));
+};
+
+export default HelpGetSupportButton;
+//# sourceMappingURL=help-get-support-button.native.js.map

package/build-module/components/editor-help/help-get-support-button.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/help-get-support-button.native.js"],"names":["Pressable","Text","usePreferredColorSchemeStyle","styles","HelpGetSupportButton","onPress","title","buttonStyle","button","buttonDark","textStyle","buttonText","buttonTextDark"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,IAApB,QAAgC,cAAhC;AAEA;AACA;AACA;;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,oBAAoB,GAAG,CAAE;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAF,KAA0B;AACtD,QAAMC,WAAW,GAAGL,4BAA4B,CAC/CC,MAAM,CAACK,MADwC,EAE/CL,MAAM,CAACM,UAFwC,CAAhD;AAKA,QAAMC,SAAS,GAAGR,4BAA4B,CAC7CC,MAAM,CAACQ,UADsC,EAE7CR,MAAM,CAACS,cAFsC,CAA9C;AAKA,SACC,cAAC,SAAD;AACC,IAAA,KAAK,EAAGL,WADT;AAEC,IAAA,OAAO,EAAGF,OAFX;AAGC,IAAA,iBAAiB,EAAG;AAHrB,KAKC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGK;AAAd,KAA4BJ,KAA5B,CALD,CADD;AASA,CApBD;;AAsBA,eAAeF,oBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { Pressable, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst HelpGetSupportButton = ( { onPress, title } ) => {\n\tconst buttonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.button,\n\t\tstyles.buttonDark\n\t);\n\n\tconst textStyle = usePreferredColorSchemeStyle(\n\t\tstyles.buttonText,\n\t\tstyles.buttonTextDark\n\t);\n\n\treturn (\n\t\t<Pressable\n\t\t\tstyle={ buttonStyle }\n\t\t\tonPress={ onPress }\n\t\t\taccessibilityRole={ 'button' }\n\t\t>\n\t\t\t<Text style={ textStyle }>{ title }</Text>\n\t\t</Pressable>\n\t);\n};\n\nexport default HelpGetSupportButton;\n"]}

package/build-module/components/editor-help/help-topic-row.native.js

@@ -13,12 +13,13 @@ import { chevronRight } from '@wordpress/icons';
 
 const HelpTopicRow = ({
   label,
-  icon
+  icon,
+  screenName
 }) => {
   const navigation = useNavigation();
 
   const openSubSheet = () => {
-    navigation.navigate(label);
+    navigation.navigate(screenName);
   };
 
   return createElement(TextControl, {

package/build-module/components/editor-help/help-topic-row.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/help-topic-row.native.js"],"names":["useNavigation","TextControl","Icon","chevronRight","HelpTopicRow","label","icon","navigation","openSubSheet","navigate"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,IAAtB,QAAkC,uBAAlC;AACA,SAASC,YAAT,QAA6B,kBAA7B;;AAEA,MAAMC,YAAY,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAF,KAAuB;AAC3C,QAAMC,UAAU,GAAGP,aAAa,EAAhC;;AAEA,QAAMQ,YAAY,GAAG,MAAM;AAC1BD,IAAAA,UAAU,CAACE,QAAX,CAAqBJ,KAArB;AACA,GAFD;;AAIA,SACC,cAAC,WAAD;AACC,IAAA,aAAa,EAAC,YADf;AAEC,IAAA,kBAAkB,MAFnB;AAGC,IAAA,SAAS,MAHV;AAIC,IAAA,OAAO,EAAGG,YAJX;AAKC,IAAA,KAAK,EAAGH,KALT;AAMC,IAAA,IAAI,EAAGC;AANR,KAQC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGH;AAAb,IARD,CADD;AAYA,CAnBD;;AAqBA,eAAeC,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl, Icon } from '@wordpress/components';\nimport { chevronRight } from '@wordpress/icons';\n\nconst HelpTopicRow = ( { label, icon } ) => {\n\tconst navigation = useNavigation();\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( label );\n\t};\n\n\treturn (\n\t\t<TextControl\n\t\t\tseparatorType=\"leftMargin\"\n\t\t\tcustomActionButton\n\t\t\tleftAlign\n\t\t\tonPress={ openSubSheet }\n\t\t\tlabel={ label }\n\t\t\ticon={ icon }\n\t\t>\n\t\t\t<Icon icon={ chevronRight } />\n\t\t</TextControl>\n\t);\n};\n\nexport default HelpTopicRow;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/help-topic-row.native.js"],"names":["useNavigation","TextControl","Icon","chevronRight","HelpTopicRow","label","icon","screenName","navigation","openSubSheet","navigate"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,0BAA9B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,IAAtB,QAAkC,uBAAlC;AACA,SAASC,YAAT,QAA6B,kBAA7B;;AAEA,MAAMC,YAAY,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAT;AAAeC,EAAAA;AAAf,CAAF,KAAmC;AACvD,QAAMC,UAAU,GAAGR,aAAa,EAAhC;;AAEA,QAAMS,YAAY,GAAG,MAAM;AAC1BD,IAAAA,UAAU,CAACE,QAAX,CAAqBH,UAArB;AACA,GAFD;;AAIA,SACC,cAAC,WAAD;AACC,IAAA,aAAa,EAAC,YADf;AAEC,IAAA,kBAAkB,MAFnB;AAGC,IAAA,SAAS,MAHV;AAIC,IAAA,OAAO,EAAGE,YAJX;AAKC,IAAA,KAAK,EAAGJ,KALT;AAMC,IAAA,IAAI,EAAGC;AANR,KAQC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGH;AAAb,IARD,CADD;AAYA,CAnBD;;AAqBA,eAAeC,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl, Icon } from '@wordpress/components';\nimport { chevronRight } from '@wordpress/icons';\n\nconst HelpTopicRow = ( { label, icon, screenName } ) => {\n\tconst navigation = useNavigation();\n\n\tconst openSubSheet = () => {\n\t\tnavigation.navigate( screenName );\n\t};\n\n\treturn (\n\t\t<TextControl\n\t\t\tseparatorType=\"leftMargin\"\n\t\t\tcustomActionButton\n\t\t\tleftAlign\n\t\t\tonPress={ openSubSheet }\n\t\t\tlabel={ label }\n\t\t\ticon={ icon }\n\t\t>\n\t\t\t<Icon icon={ chevronRight } />\n\t\t</TextControl>\n\t);\n};\n\nexport default HelpTopicRow;\n"]}

package/build-module/components/editor-help/index.native.js

@@ -1,17 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import { View, Text } from 'react-native';
+import { kebabCase } from 'lodash';
+import { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';
+import { TransitionPresets } from '@react-navigation/stack';
 /**
  * WordPress dependencies
  */
 
-import { BottomSheet, PanelBody } from '@wordpress/components';
+import { BottomSheet, BottomSheetConsumer, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { helpFilled, plusCircleFilled, alignJustifyAlt, trashFilled, cogAlt } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { requestContactCustomerSupport, requestGotoCustomerSupportOptions } from '@wordpress/react-native-bridge';
 /**
  * Internal dependencies
  */
@@ -19,6 +25,7 @@ import { helpFilled, plusCircleFilled, alignJustifyAlt, trashFilled, cogAlt } fr
 import styles from './style.scss';
 import HelpDetailNavigationScreen from './help-detail-navigation-screen';
 import HelpTopicRow from './help-topic-row';
+import HelpGetSupportButton from './help-get-support-button';
 import IntroToBlocks from './intro-to-blocks';
 import AddBlocks from './add-blocks';
 import MoveBlocks from './move-blocks';
@@ -47,44 +54,90 @@ const HELP_TOPICS = [{
 }];
 
 function EditorHelpTopics({
+  close,
   isVisible,
   onClose
 }) {
-  const bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle(styles.bottomSheetHeaderTitle, styles.bottomSheetHeaderTitleDark);
+  const {
+    postType
+  } = useSelect(select => ({
+    postType: select(editorStore).getEditedPostAttribute('type')
+  }));
+  const sectionTitle = usePreferredColorSchemeStyle(styles.helpDetailSectionHeading, styles.helpDetailSectionHeadingDark);
+  const title = postType === 'page' ? __('How to edit your page') : __('How to edit your post');
   return createElement(BottomSheet, {
     isVisible: isVisible,
     onClose: onClose,
     hideHeader: true,
     hasNavigation: true,
-    contentStyle: styles.contentContainer
-  }, createElement(BottomSheet.NavigationContainer, {
+    contentStyle: styles.contentContainer,
+    testID: "editor-help-modal"
+  }, createElement(SafeAreaView, null, createElement(BottomSheet.NavigationContainer, {
     animate: true,
-    main: true
+    main: true,
+    style: styles.navigationContainer
   }, createElement(BottomSheet.NavigationScreen, {
-    name: __('Topics')
+    isScrollable: true,
+    fullScreen: true,
+    name: "help-topics"
   }, createElement(View, {
-    style: styles.bottomSheetHeader
-  }, createElement(Text, {
-    style: bottomSheetHeaderTitleStyle,
-    maxFontSizeMultiplier: 3
-  }, __('How to edit your site'))), createElement(View, {
-    style: styles.separator
-  }), createElement(PanelBody, {
-    title: __('The basics'),
-    style: styles.sectionContainer
-  }, HELP_TOPICS.map(topic => {
-    return createElement(HelpTopicRow, {
-      key: topic.label,
-      label: topic.label,
-      icon: topic.icon
-    });
-  }))), HELP_TOPICS.map(topic => {
+    style: styles.container
+  }, createElement(BottomSheet.NavBar, null, createElement(BottomSheet.NavBar.DismissButton, {
+    onPress: close,
+    iosText: __('Close')
+  }), createElement(BottomSheet.NavBar.Heading, null, title)), createElement(BottomSheetConsumer, null, ({
+    listProps
+  }) => {
+    const contentContainerStyle = StyleSheet.flatten(listProps.contentContainerStyle);
+    return createElement(ScrollView, _extends({}, listProps, {
+      contentContainerStyle: { ...contentContainerStyle,
+        paddingBottom: Math.max(listProps.safeAreaBottomInset, contentContainerStyle.paddingBottom),
+
+        /**
+         * Remove margin set via `hideHeader`. Combining a header
+         * and navigation in this bottom sheet is at odds with the
+         * current `BottomSheet` implementation.
+         */
+        marginTop: 0
+      }
+    }), createElement(PanelBody, null, createElement(Text, {
+      style: sectionTitle
+    }, __('The basics')), HELP_TOPICS.map(({
+      label,
+      icon
+    }) => {
+      const labelSlug = kebabCase(label);
+      return createElement(HelpTopicRow, {
+        key: labelSlug,
+        label: label,
+        icon: icon,
+        screenName: labelSlug
+      });
+    }), createElement(Text, {
+      style: sectionTitle
+    }, __('Get support')), createElement(HelpGetSupportButton, {
+      title: __('Contact support'),
+      onPress: requestContactCustomerSupport
+    }), createElement(HelpGetSupportButton, {
+      title: __('More support options'),
+      onPress: requestGotoCustomerSupportOptions
+    })));
+  }))), HELP_TOPICS.map(({
+    view,
+    label
+  }) => {
+    const labelSlug = kebabCase(label);
     return createElement(HelpDetailNavigationScreen, {
-      key: topic.label,
-      name: topic.label,
-      content: topic.view
+      key: labelSlug,
+      name: labelSlug,
+      content: view,
+      label: label,
+      options: {
+        gestureEnabled: true,
+        ...TransitionPresets.DefaultTransition
+      }
     });
-  })));
+  }))));
 }
 
 export default EditorHelpTopics;

package/build-module/components/editor-help/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/index.native.js"],"names":["View","Text","BottomSheet","PanelBody","__","usePreferredColorSchemeStyle","helpFilled","plusCircleFilled","alignJustifyAlt","trashFilled","cogAlt","styles","HelpDetailNavigationScreen","HelpTopicRow","IntroToBlocks","AddBlocks","MoveBlocks","RemoveBlocks","CustomizeBlocks","HELP_TOPICS","label","icon","view","EditorHelpTopics","isVisible","onClose","bottomSheetHeaderTitleStyle","bottomSheetHeaderTitle","bottomSheetHeaderTitleDark","contentContainer","bottomSheetHeader","separator","sectionContainer","map","topic"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,SAAtB,QAAuC,uBAAvC;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA,SACCC,UADD,EAECC,gBAFD,EAGCC,eAHD,EAICC,WAJD,EAKCC,MALD,QAMO,kBANP;AAQA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,OAAOC,0BAAP,MAAuC,iCAAvC;AACA,OAAOC,YAAP,MAAyB,kBAAzB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,SAAP,MAAsB,cAAtB;AACA,OAAOC,UAAP,MAAuB,eAAvB;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AAEA,MAAMC,WAAW,GAAG,CACnB;AACCC,EAAAA,KAAK,EAAEhB,EAAE,CAAE,kBAAF,CADV;AAECiB,EAAAA,IAAI,EAAEf,UAFP;AAGCgB,EAAAA,IAAI,EAAE,cAAC,aAAD;AAHP,CADmB,EAMnB;AACCF,EAAAA,KAAK,EAAEhB,EAAE,CAAE,YAAF,CADV;AAECiB,EAAAA,IAAI,EAAEd,gBAFP;AAGCe,EAAAA,IAAI,EAAE,cAAC,SAAD;AAHP,CANmB,EAWnB;AAAEF,EAAAA,KAAK,EAAEhB,EAAE,CAAE,aAAF,CAAX;AAA8BiB,EAAAA,IAAI,EAAEb,eAApC;AAAqDc,EAAAA,IAAI,EAAE,cAAC,UAAD;AAA3D,CAXmB,EAYnB;AAAEF,EAAAA,KAAK,EAAEhB,EAAE,CAAE,eAAF,CAAX;AAAgCiB,EAAAA,IAAI,EAAEZ,WAAtC;AAAmDa,EAAAA,IAAI,EAAE,cAAC,YAAD;AAAzD,CAZmB,EAanB;AACCF,EAAAA,KAAK,EAAEhB,EAAE,CAAE,kBAAF,CADV;AAECiB,EAAAA,IAAI,EAAEX,MAFP;AAGCY,EAAAA,IAAI,EAAE,cAAC,eAAD;AAHP,CAbmB,CAApB;;AAoBA,SAASC,gBAAT,CAA2B;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAA3B,EAAoD;AACnD,QAAMC,2BAA2B,GAAGrB,4BAA4B,CAC/DM,MAAM,CAACgB,sBADwD,EAE/DhB,MAAM,CAACiB,0BAFwD,CAAhE;AAKA,SACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGJ,SADb;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,UAAU,MAHX;AAIC,IAAA,aAAa,MAJd;AAKC,IAAA,YAAY,EAAGd,MAAM,CAACkB;AALvB,KAOC,cAAC,WAAD,CAAa,mBAAb;AAAiC,IAAA,OAAO,MAAxC;AAAyC,IAAA,IAAI;AAA7C,KACC,cAAC,WAAD,CAAa,gBAAb;AAA8B,IAAA,IAAI,EAAGzB,EAAE,CAAE,QAAF;AAAvC,KACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGO,MAAM,CAACmB;AAArB,KACC,cAAC,IAAD;AACC,IAAA,KAAK,EAAGJ,2BADT;AAEC,IAAA,qBAAqB,EAAG;AAFzB,KAIGtB,EAAE,CAAE,uBAAF,CAJL,CADD,CADD,EASC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGO,MAAM,CAACoB;AAArB,IATD,EAUC,cAAC,SAAD;AACC,IAAA,KAAK,EAAG3B,EAAE,CAAE,YAAF,CADX;AAEC,IAAA,KAAK,EAAGO,MAAM,CAACqB;AAFhB,KAKGb,WAAW,CAACc,GAAZ,CAAmBC,KAAF,IAAa;AAC/B,WACC,cAAC,YAAD;AACC,MAAA,GAAG,EAAGA,KAAK,CAACd,KADb;AAEC,MAAA,KAAK,EAAGc,KAAK,CAACd,KAFf;AAGC,MAAA,IAAI,EAAGc,KAAK,CAACb;AAHd,MADD;AAOA,GARC,CALH,CAVD,CADD,EA4BGF,WAAW,CAACc,GAAZ,CAAmBC,KAAF,IAAa;AAC/B,WACC,cAAC,0BAAD;AACC,MAAA,GAAG,EAAGA,KAAK,CAACd,KADb;AAEC,MAAA,IAAI,EAAGc,KAAK,CAACd,KAFd;AAGC,MAAA,OAAO,EAAGc,KAAK,CAACZ;AAHjB,MADD;AAOA,GARC,CA5BH,CAPD,CADD;AAgDA;;AAED,eAAeC,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { BottomSheet, PanelBody } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\thelpFilled,\n\tplusCircleFilled,\n\talignJustifyAlt,\n\ttrashFilled,\n\tcogAlt,\n} from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HelpDetailNavigationScreen from './help-detail-navigation-screen';\nimport HelpTopicRow from './help-topic-row';\nimport IntroToBlocks from './intro-to-blocks';\nimport AddBlocks from './add-blocks';\nimport MoveBlocks from './move-blocks';\nimport RemoveBlocks from './remove-blocks';\nimport CustomizeBlocks from './customize-blocks';\n\nconst HELP_TOPICS = [\n\t{\n\t\tlabel: __( 'What is a block?' ),\n\t\ticon: helpFilled,\n\t\tview: <IntroToBlocks />,\n\t},\n\t{\n\t\tlabel: __( 'Add blocks' ),\n\t\ticon: plusCircleFilled,\n\t\tview: <AddBlocks />,\n\t},\n\t{ label: __( 'Move blocks' ), icon: alignJustifyAlt, view: <MoveBlocks /> },\n\t{ label: __( 'Remove blocks' ), icon: trashFilled, view: <RemoveBlocks /> },\n\t{\n\t\tlabel: __( 'Customize blocks' ),\n\t\ticon: cogAlt,\n\t\tview: <CustomizeBlocks />,\n\t},\n];\n\nfunction EditorHelpTopics( { isVisible, onClose } ) {\n\tconst bottomSheetHeaderTitleStyle = usePreferredColorSchemeStyle(\n\t\tstyles.bottomSheetHeaderTitle,\n\t\tstyles.bottomSheetHeaderTitleDark\n\t);\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\thideHeader\n\t\t\thasNavigation\n\t\t\tcontentStyle={ styles.contentContainer }\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen name={ __( 'Topics' ) }>\n\t\t\t\t\t<View style={ styles.bottomSheetHeader }>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={ bottomSheetHeaderTitleStyle }\n\t\t\t\t\t\t\tmaxFontSizeMultiplier={ 3 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'How to edit your site' ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t\t<View style={ styles.separator } />\n\t\t\t\t\t<PanelBody\n\t\t\t\t\t\ttitle={ __( 'The basics' ) }\n\t\t\t\t\t\tstyle={ styles.sectionContainer }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Print out help topics */ }\n\t\t\t\t\t\t{ HELP_TOPICS.map( ( topic ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<HelpTopicRow\n\t\t\t\t\t\t\t\t\tkey={ topic.label }\n\t\t\t\t\t\t\t\t\tlabel={ topic.label }\n\t\t\t\t\t\t\t\t\ticon={ topic.icon }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</PanelBody>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t{ /* Print out help detail screens */ }\n\t\t\t\t{ HELP_TOPICS.map( ( topic ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<HelpDetailNavigationScreen\n\t\t\t\t\t\t\tkey={ topic.label }\n\t\t\t\t\t\t\tname={ topic.label }\n\t\t\t\t\t\t\tcontent={ topic.view }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default EditorHelpTopics;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/index.native.js"],"names":["kebabCase","Text","SafeAreaView","ScrollView","StyleSheet","View","TransitionPresets","BottomSheet","BottomSheetConsumer","PanelBody","__","helpFilled","plusCircleFilled","alignJustifyAlt","trashFilled","cogAlt","useSelect","store","editorStore","usePreferredColorSchemeStyle","requestContactCustomerSupport","requestGotoCustomerSupportOptions","styles","HelpDetailNavigationScreen","HelpTopicRow","HelpGetSupportButton","IntroToBlocks","AddBlocks","MoveBlocks","RemoveBlocks","CustomizeBlocks","HELP_TOPICS","label","icon","view","EditorHelpTopics","close","isVisible","onClose","postType","select","getEditedPostAttribute","sectionTitle","helpDetailSectionHeading","helpDetailSectionHeadingDark","title","contentContainer","navigationContainer","container","listProps","contentContainerStyle","flatten","paddingBottom","Math","max","safeAreaBottomInset","marginTop","map","labelSlug","gestureEnabled","DefaultTransition"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { kebabCase } from 'lodash';\nimport { Text, SafeAreaView, ScrollView, StyleSheet, View } from 'react-native';\nimport { TransitionPresets } from '@react-navigation/stack';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBottomSheet,\n\tBottomSheetConsumer,\n\tPanelBody,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport {\n\thelpFilled,\n\tplusCircleFilled,\n\talignJustifyAlt,\n\ttrashFilled,\n\tcogAlt,\n} from '@wordpress/icons';\nimport { useSelect } from '@wordpress/data';\nimport { store as editorStore } from '@wordpress/editor';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\trequestContactCustomerSupport,\n\trequestGotoCustomerSupportOptions,\n} from '@wordpress/react-native-bridge';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport HelpDetailNavigationScreen from './help-detail-navigation-screen';\nimport HelpTopicRow from './help-topic-row';\nimport HelpGetSupportButton from './help-get-support-button';\nimport IntroToBlocks from './intro-to-blocks';\nimport AddBlocks from './add-blocks';\nimport MoveBlocks from './move-blocks';\nimport RemoveBlocks from './remove-blocks';\nimport CustomizeBlocks from './customize-blocks';\n\nconst HELP_TOPICS = [\n\t{\n\t\tlabel: __( 'What is a block?' ),\n\t\ticon: helpFilled,\n\t\tview: <IntroToBlocks />,\n\t},\n\t{\n\t\tlabel: __( 'Add blocks' ),\n\t\ticon: plusCircleFilled,\n\t\tview: <AddBlocks />,\n\t},\n\t{ label: __( 'Move blocks' ), icon: alignJustifyAlt, view: <MoveBlocks /> },\n\t{ label: __( 'Remove blocks' ), icon: trashFilled, view: <RemoveBlocks /> },\n\t{\n\t\tlabel: __( 'Customize blocks' ),\n\t\ticon: cogAlt,\n\t\tview: <CustomizeBlocks />,\n\t},\n];\n\nfunction EditorHelpTopics( { close, isVisible, onClose } ) {\n\tconst { postType } = useSelect( ( select ) => ( {\n\t\tpostType: select( editorStore ).getEditedPostAttribute( 'type' ),\n\t} ) );\n\n\tconst sectionTitle = usePreferredColorSchemeStyle(\n\t\tstyles.helpDetailSectionHeading,\n\t\tstyles.helpDetailSectionHeadingDark\n\t);\n\n\tconst title =\n\t\tpostType === 'page'\n\t\t\t? __( 'How to edit your page' )\n\t\t\t: __( 'How to edit your post' );\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\thideHeader\n\t\t\thasNavigation\n\t\t\tcontentStyle={ styles.contentContainer }\n\t\t\ttestID=\"editor-help-modal\"\n\t\t>\n\t\t\t<SafeAreaView>\n\t\t\t\t<BottomSheet.NavigationContainer\n\t\t\t\t\tanimate\n\t\t\t\t\tmain\n\t\t\t\t\tstyle={ styles.navigationContainer }\n\t\t\t\t>\n\t\t\t\t\t<BottomSheet.NavigationScreen\n\t\t\t\t\t\tisScrollable\n\t\t\t\t\t\tfullScreen\n\t\t\t\t\t\tname=\"help-topics\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<View style={ styles.container }>\n\t\t\t\t\t\t\t<BottomSheet.NavBar>\n\t\t\t\t\t\t\t\t<BottomSheet.NavBar.DismissButton\n\t\t\t\t\t\t\t\t\tonPress={ close }\n\t\t\t\t\t\t\t\t\tiosText={ __( 'Close' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t</BottomSheet.NavBar.Heading>\n\t\t\t\t\t\t\t</BottomSheet.NavBar>\n\t\t\t\t\t\t\t<BottomSheetConsumer>\n\t\t\t\t\t\t\t\t{ ( { listProps } ) => {\n\t\t\t\t\t\t\t\t\tconst contentContainerStyle = StyleSheet.flatten(\n\t\t\t\t\t\t\t\t\t\tlistProps.contentContainerStyle\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ScrollView\n\t\t\t\t\t\t\t\t\t\t\t{ ...listProps }\n\t\t\t\t\t\t\t\t\t\t\tcontentContainerStyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t...contentContainerStyle,\n\t\t\t\t\t\t\t\t\t\t\t\tpaddingBottom: Math.max(\n\t\t\t\t\t\t\t\t\t\t\t\t\tlistProps.safeAreaBottomInset,\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentContainerStyle.paddingBottom\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t\t\t\t\t * Remove margin set via `hideHeader`. Combining a header\n\t\t\t\t\t\t\t\t\t\t\t\t * and navigation in this bottom sheet is at odds with the\n\t\t\t\t\t\t\t\t\t\t\t\t * current `BottomSheet` implementation.\n\t\t\t\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\t\t\t\tmarginTop: 0,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<PanelBody>\n\t\t\t\t\t\t\t\t\t\t\t\t<Text style={ sectionTitle }>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'The basics' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t{ /* Print out help topics */ }\n\t\t\t\t\t\t\t\t\t\t\t\t{ HELP_TOPICS.map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t( { label, icon } ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tconst labelSlug = kebabCase(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<HelpTopicRow\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabelSlug\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tscreenName={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabelSlug\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={ sectionTitle }\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Get support' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t<HelpGetSupportButton\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Contact support'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonPress={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestContactCustomerSupport\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t<HelpGetSupportButton\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttitle={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'More support options'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonPress={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trequestGotoCustomerSupportOptions\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t\t\t\t\t\t</ScrollView>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t</BottomSheetConsumer>\n\t\t\t\t\t\t</View>\n\t\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t\t\t{ /* Print out help detail screens */ }\n\t\t\t\t\t{ HELP_TOPICS.map( ( { view, label } ) => {\n\t\t\t\t\t\tconst labelSlug = kebabCase( label );\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<HelpDetailNavigationScreen\n\t\t\t\t\t\t\t\tkey={ labelSlug }\n\t\t\t\t\t\t\t\tname={ labelSlug }\n\t\t\t\t\t\t\t\tcontent={ view }\n\t\t\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\t\t\toptions={ {\n\t\t\t\t\t\t\t\t\tgestureEnabled: true,\n\t\t\t\t\t\t\t\t\t...TransitionPresets.DefaultTransition,\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</BottomSheet.NavigationContainer>\n\t\t\t</SafeAreaView>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default EditorHelpTopics;\n"]}

package/build-module/components/editor-help/intro-to-blocks.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -9,6 +9,7 @@ import { View, Text } from 'react-native';
  */
 
 import { __ } from '@wordpress/i18n';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
@@ -17,12 +18,15 @@ import styles from './style.scss';
 import { HelpDetailBodyText, HelpDetailSectionHeadingText, HelpDetailImage } from './view-sections';
 
 const IntroToBlocks = () => {
-  return createElement(View, {
+  const titleStyle = usePreferredColorSchemeStyle(styles.helpDetailTitle, styles.helpDetailTitleDark);
+  return createElement(Fragment, null, createElement(HelpDetailImage, {
+    source: require('./images/block-layout-collage.png')
+  }), createElement(View, {
     style: styles.helpDetailContainer
-  }, createElement(HelpDetailImage, {
-    source: require('./images/intro-blocks-1.png')
-  }), createElement(Text, {
-    style: styles.helpDetailTitle
+  }, createElement(Text, {
+    accessibilityRole: "header",
+    selectable: true,
+    style: titleStyle
   }, __('Welcome to the world of blocks')), createElement(HelpDetailBodyText, {
     text: __('Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.')
   }), createElement(HelpDetailSectionHeadingText, {
@@ -30,22 +34,27 @@ const IntroToBlocks = () => {
   }), createElement(HelpDetailBodyText, {
     text: __('Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.')
   }), createElement(HelpDetailImage, {
-    source: require('./images/intro-blocks-2.png')
+    accessible: true,
+    accessibilityLabel: __('Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'),
+    source: require('./images/rich-text-light.png'),
+    sourceDarkMode: require('./images/rich-text-dark.png')
   }), createElement(HelpDetailSectionHeadingText, {
     text: __('Embed media')
   }), createElement(HelpDetailBodyText, {
     text: __('Make your content stand out by adding images, gifs, videos, and embedded media to your pages.')
   }), createElement(HelpDetailImage, {
-    source: require('./images/intro-blocks-3.png')
+    source: require('./images/embed-media-light.png'),
+    sourceDarkMode: require('./images/embed-media-dark.png')
   }), createElement(HelpDetailSectionHeadingText, {
     text: __('Build layouts')
   }), createElement(HelpDetailBodyText, {
     text: __('Arrange your content into columns, add Call to Action buttons, and overlay images with text.')
   }), createElement(HelpDetailImage, {
-    source: require('./images/intro-blocks-4.png')
+    source: require('./images/build-layouts-light.png'),
+    sourceDarkMode: require('./images/build-layouts-dark.png')
   }), createElement(HelpDetailBodyText, {
     text: __('Give it a try by adding a few blocks to your post or page!')
-  }));
+  })));
 };
 
 export default IntroToBlocks;

package/build-module/components/editor-help/intro-to-blocks.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/intro-to-blocks.native.js"],"names":["View","Text","__","styles","HelpDetailBodyText","HelpDetailSectionHeadingText","HelpDetailImage","IntroToBlocks","helpDetailContainer","require","helpDetailTitle"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SACCC,kBADD,EAECC,4BAFD,EAGCC,eAHD,QAIO,iBAJP;;AAMA,MAAMC,aAAa,GAAG,MAAM;AAC3B,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGJ,MAAM,CAACK;AAArB,KACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,6BAAF;AADjB,IADD,EAIC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGN,MAAM,CAACO;AAArB,KACGR,EAAE,CAAE,gCAAF,CADL,CAJD,EAOC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,oLADQ;AADV,IAPD,EAYC,cAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGA,EAAE,CAAE,mBAAF;AAAvC,IAZD,EAaC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,kJADQ;AADV,IAbD,EAkBC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGO,OAAO,CAAE,6BAAF;AADjB,IAlBD,EAqBC,cAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGP,EAAE,CAAE,aAAF;AAAvC,IArBD,EAsBC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,+FADQ;AADV,IAtBD,EA2BC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGO,OAAO,CAAE,6BAAF;AADjB,IA3BD,EA8BC,cAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGP,EAAE,CAAE,eAAF;AAAvC,IA9BD,EA+BC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,8FADQ;AADV,IA/BD,EAoCC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGO,OAAO,CAAE,6BAAF;AADjB,IApCD,EAuCC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGP,EAAE,CACR,4DADQ;AADV,IAvCD,CADD;AA+CA,CAhDD;;AAkDA,eAAeK,aAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport {\n\tHelpDetailBodyText,\n\tHelpDetailSectionHeadingText,\n\tHelpDetailImage,\n} from './view-sections';\n\nconst IntroToBlocks = () => {\n\treturn (\n\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/intro-blocks-1.png' ) }\n\t\t\t/>\n\t\t\t<Text style={ styles.helpDetailTitle }>\n\t\t\t\t{ __( 'Welcome to the world of blocks' ) }\n\t\t\t</Text>\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailSectionHeadingText text={ __( 'Rich text editing' ) } />\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/intro-blocks-2.png' ) }\n\t\t\t/>\n\t\t\t<HelpDetailSectionHeadingText text={ __( 'Embed media' ) } />\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Make your content stand out by adding images, gifs, videos, and embedded media to your pages.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/intro-blocks-3.png' ) }\n\t\t\t/>\n\t\t\t<HelpDetailSectionHeadingText text={ __( 'Build layouts' ) } />\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Arrange your content into columns, add Call to Action buttons, and overlay images with text.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/intro-blocks-4.png' ) }\n\t\t\t/>\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'Give it a try by adding a few blocks to your post or page!'\n\t\t\t\t) }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default IntroToBlocks;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/intro-to-blocks.native.js"],"names":["View","Text","__","usePreferredColorSchemeStyle","styles","HelpDetailBodyText","HelpDetailSectionHeadingText","HelpDetailImage","IntroToBlocks","titleStyle","helpDetailTitle","helpDetailTitleDark","require","helpDetailContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,IAAf,QAA2B,cAA3B;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SACCC,kBADD,EAECC,4BAFD,EAGCC,eAHD,QAIO,iBAJP;;AAMA,MAAMC,aAAa,GAAG,MAAM;AAC3B,QAAMC,UAAU,GAAGN,4BAA4B,CAC9CC,MAAM,CAACM,eADuC,EAE9CN,MAAM,CAACO,mBAFuC,CAA/C;AAIA,SACC,8BACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,mCAAF;AADjB,IADD,EAIC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGR,MAAM,CAACS;AAArB,KACC,cAAC,IAAD;AACC,IAAA,iBAAiB,EAAC,QADnB;AAEC,IAAA,UAAU,MAFX;AAGC,IAAA,KAAK,EAAGJ;AAHT,KAKGP,EAAE,CAAE,gCAAF,CALL,CADD,EAQC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,oLADQ;AADV,IARD,EAaC,cAAC,4BAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CAAE,mBAAF;AADV,IAbD,EAgBC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,kJADQ;AADV,IAhBD,EAqBC,cAAC,eAAD;AACC,IAAA,UAAU,EAAG,IADd;AAEC,IAAA,kBAAkB,EAAGA,EAAE,CACtB,kHADsB,CAFxB;AAKC,IAAA,MAAM,EAAGU,OAAO,CAAE,8BAAF,CALjB;AAMC,IAAA,cAAc,EAAGA,OAAO,CAAE,6BAAF;AANzB,IArBD,EA6BC,cAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGV,EAAE,CAAE,aAAF;AAAvC,IA7BD,EA8BC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,+FADQ;AADV,IA9BD,EAmCC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGU,OAAO,CAAE,gCAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,+BAAF;AAFzB,IAnCD,EAuCC,cAAC,4BAAD;AAA8B,IAAA,IAAI,EAAGV,EAAE,CAAE,eAAF;AAAvC,IAvCD,EAwCC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGA,EAAE,CACR,8FADQ;AADV,IAxCD,EA6CC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGU,OAAO,CAAE,kCAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,iCAAF;AAFzB,IA7CD,EAiDC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGV,EAAE,CACR,4DADQ;AADV,IAjDD,CAJD,CADD;AA8DA,CAnED;;AAqEA,eAAeM,aAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, Text } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport {\n\tHelpDetailBodyText,\n\tHelpDetailSectionHeadingText,\n\tHelpDetailImage,\n} from './view-sections';\n\nconst IntroToBlocks = () => {\n\tconst titleStyle = usePreferredColorSchemeStyle(\n\t\tstyles.helpDetailTitle,\n\t\tstyles.helpDetailTitleDark\n\t);\n\treturn (\n\t\t<>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/block-layout-collage.png' ) }\n\t\t\t/>\n\t\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tselectable\n\t\t\t\t\tstyle={ titleStyle }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Welcome to the world of blocks' ) }\n\t\t\t\t</Text>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Blocks are pieces of content that you can insert, rearrange, and style without needing to know how to code. Blocks are an easy and modern way for you to create beautiful layouts.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailSectionHeadingText\n\t\t\t\t\ttext={ __( 'Rich text editing' ) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Blocks allow you to focus on writing your content, knowing that all the formatting tools you need are there to help you get your message across.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailImage\n\t\t\t\t\taccessible={ true }\n\t\t\t\t\taccessibilityLabel={ __(\n\t\t\t\t\t\t'Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block'\n\t\t\t\t\t) }\n\t\t\t\t\tsource={ require( './images/rich-text-light.png' ) }\n\t\t\t\t\tsourceDarkMode={ require( './images/rich-text-dark.png' ) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailSectionHeadingText text={ __( 'Embed media' ) } />\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Make your content stand out by adding images, gifs, videos, and embedded media to your pages.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailImage\n\t\t\t\t\tsource={ require( './images/embed-media-light.png' ) }\n\t\t\t\t\tsourceDarkMode={ require( './images/embed-media-dark.png' ) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailSectionHeadingText text={ __( 'Build layouts' ) } />\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Arrange your content into columns, add Call to Action buttons, and overlay images with text.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailImage\n\t\t\t\t\tsource={ require( './images/build-layouts-light.png' ) }\n\t\t\t\t\tsourceDarkMode={ require( './images/build-layouts-dark.png' ) }\n\t\t\t\t/>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'Give it a try by adding a few blocks to your post or page!'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</>\n\t);\n};\n\nexport default IntroToBlocks;\n"]}

package/build-module/components/editor-help/move-blocks.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -17,13 +17,14 @@ import styles from './style.scss';
 import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const MoveBlocks = () => {
-  return createElement(View, {
+  return createElement(Fragment, null, createElement(HelpDetailImage, {
+    source: require('./images/move-light.png'),
+    sourceDarkMode: require('./images/move-dark.png')
+  }), createElement(View, {
     style: styles.helpDetailContainer
-  }, createElement(HelpDetailImage, {
-    source: require('./images/move-blocks.png')
-  }), createElement(HelpDetailBodyText, {
+  }, createElement(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.')
-  }));
+  })));
 };
 
 export default MoveBlocks;

package/build-module/components/editor-help/move-blocks.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/move-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","MoveBlocks","helpDetailContainer","require"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,UAAU,GAAG,MAAM;AACxB,SACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGH,MAAM,CAACI;AAArB,KACC,cAAC,eAAD;AAAiB,IAAA,MAAM,EAAGC,OAAO,CAAE,0BAAF;AAAjC,IADD,EAEC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,8KADQ;AADV,IAFD,CADD;AAUA,CAXD;;AAaA,eAAeI,UAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst MoveBlocks = () => {\n\treturn (\n\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t<HelpDetailImage source={ require( './images/move-blocks.png' ) } />\n\t\t\t<HelpDetailBodyText\n\t\t\t\ttext={ __(\n\t\t\t\t\t'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.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport default MoveBlocks;\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/editor-help/move-blocks.native.js"],"names":["View","__","styles","HelpDetailBodyText","HelpDetailImage","MoveBlocks","require","helpDetailContainer"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,cAArB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,kBAAT,EAA6BC,eAA7B,QAAoD,iBAApD;;AAEA,MAAMC,UAAU,GAAG,MAAM;AACxB,SACC,8BACC,cAAC,eAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,yBAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,wBAAF;AAFzB,IADD,EAKC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGJ,MAAM,CAACK;AAArB,KACC,cAAC,kBAAD;AACC,IAAA,IAAI,EAAGN,EAAE,CACR,8KADQ;AADV,IADD,CALD,CADD;AAeA,CAhBD;;AAkBA,eAAeI,UAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { HelpDetailBodyText, HelpDetailImage } from './view-sections';\n\nconst MoveBlocks = () => {\n\treturn (\n\t\t<>\n\t\t\t<HelpDetailImage\n\t\t\t\tsource={ require( './images/move-light.png' ) }\n\t\t\t\tsourceDarkMode={ require( './images/move-dark.png' ) }\n\t\t\t/>\n\t\t\t<View style={ styles.helpDetailContainer }>\n\t\t\t\t<HelpDetailBodyText\n\t\t\t\t\ttext={ __(\n\t\t\t\t\t\t'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.'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</>\n\t);\n};\n\nexport default MoveBlocks;\n"]}

package/build-module/components/editor-help/remove-blocks.native.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
@@ -17,13 +17,14 @@ import styles from './style.scss';
 import { HelpDetailBodyText, HelpDetailImage } from './view-sections';
 
 const RemoveBlocks = () => {
-  return createElement(View, {
+  return createElement(Fragment, null, createElement(HelpDetailImage, {
+    source: require('./images/options-light.png'),
+    sourceDarkMode: require('./images/options-dark.png')
+  }), createElement(View, {
     style: styles.helpDetailContainer
-  }, createElement(HelpDetailImage, {
-    source: require('./images/remove-blocks.png')
-  }), createElement(HelpDetailBodyText, {
+  }, createElement(HelpDetailBodyText, {
     text: __('To remove a block, select the block and click the three dots in the bottom right of the block to view the settings. From there, choose the option to remove the block.')
-  }));
+  })));
 };
 
 export default RemoveBlocks;