@wordpress/editor 11.0.1 → 12.0.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 12.0.0 (2021-10-12)
+
+### Breaking changes
+
+-   Removed the deprecated `resetAutosave` action ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
+-   Removed the deprecated `getAutosave`, `hasAutosave` and `getBlockForSerialization` selectors ([#34537](https://github.com/WordPress/gutenberg/pull/34537)).
+
 ## 11.0.0 (2021-07-29)
 
 ### Breaking Change

package/README.md

@@ -10,7 +10,7 @@ Install the module
 npm install @wordpress/editor --save
 ```
 
-_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as IE browsers then using [core-js](https://github.com/zloirock/core-js) will add polyfills for these methods._
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
 
 ## How it works
 

package/build/components/autosave-monitor/index.js

@@ -55,6 +55,11 @@ class AutosaveMonitor extends _element.Component {
       return;
     }
 
+    if (this.props.interval !== prevProps.interval) {
+      clearTimeout(this.timerId);
+      this.setAutosaveTimer();
+    }
+
     if (!this.props.isDirty) {
       this.needsAutosave = false;
       return;

package/build/components/autosave-monitor/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/autosave-monitor/index.js"],"names":["AutosaveMonitor","Component","constructor","props","needsAutosave","isDirty","isAutosaveable","componentDidMount","disableIntervalChecks","setAutosaveTimer","componentDidUpdate","prevProps","editsReference","autosave","isAutosaving","componentWillUnmount","clearTimeout","timerId","timeout","interval","setTimeout","autosaveTimerHandler","render","select","ownProps","getReferenceByDistinctEdits","coreStore","isEditedPostDirty","isEditedPostAutosaveable","isAutosavingPost","getEditorSettings","editorStore","autosaveInterval","dispatch"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { compose } from '@wordpress/compose';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.\n *\n * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.\n * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as\n * the specific way of detecting changes.\n *\n * There are two caveats:\n * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.\n * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.\n */\nexport class AutosaveMonitor extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.needsAutosave = !! ( props.isDirty && props.isAutosaveable );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.props.disableIntervalChecks ) {\n\t\t\tthis.setAutosaveTimer();\n\t\t}\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( this.props.disableIntervalChecks ) {\n\t\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\t\tthis.props.autosave();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! this.props.isDirty ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.isAutosaving && ! prevProps.isAutosaving ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\tthis.needsAutosave = true;\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timerId );\n\t}\n\n\tsetAutosaveTimer( timeout = this.props.interval * 1000 ) {\n\t\tthis.timerId = setTimeout( () => {\n\t\t\tthis.autosaveTimerHandler();\n\t\t}, timeout );\n\t}\n\n\tautosaveTimerHandler() {\n\t\tif ( ! this.props.isAutosaveable ) {\n\t\t\tthis.setAutosaveTimer( 1000 );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.needsAutosave ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\tthis.props.autosave();\n\t\t}\n\n\t\tthis.setAutosaveTimer();\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nexport default compose( [\n\twithSelect( ( select, ownProps ) => {\n\t\tconst { getReferenceByDistinctEdits } = select( coreStore );\n\n\t\tconst {\n\t\t\tisEditedPostDirty,\n\t\t\tisEditedPostAutosaveable,\n\t\t\tisAutosavingPost,\n\t\t\tgetEditorSettings,\n\t\t} = select( editorStore );\n\n\t\tconst { interval = getEditorSettings().autosaveInterval } = ownProps;\n\n\t\treturn {\n\t\t\teditsReference: getReferenceByDistinctEdits(),\n\t\t\tisDirty: isEditedPostDirty(),\n\t\t\tisAutosaveable: isEditedPostAutosaveable(),\n\t\t\tisAutosaving: isAutosavingPost(),\n\t\t\tinterval,\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => ( {\n\t\tautosave() {\n\t\t\tconst { autosave = dispatch( editorStore ).autosave } = ownProps;\n\t\t\tautosave();\n\t\t},\n\t} ) ),\n] )( AutosaveMonitor );\n"]}
+{"version":3,"sources":["@wordpress/editor/src/components/autosave-monitor/index.js"],"names":["AutosaveMonitor","Component","constructor","props","needsAutosave","isDirty","isAutosaveable","componentDidMount","disableIntervalChecks","setAutosaveTimer","componentDidUpdate","prevProps","editsReference","autosave","interval","clearTimeout","timerId","isAutosaving","componentWillUnmount","timeout","setTimeout","autosaveTimerHandler","render","select","ownProps","getReferenceByDistinctEdits","coreStore","isEditedPostDirty","isEditedPostAutosaveable","isAutosavingPost","getEditorSettings","editorStore","autosaveInterval","dispatch"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { compose } from '@wordpress/compose';\nimport { withSelect, withDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { store as editorStore } from '../../store';\n\n/**\n * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.\n *\n * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.\n * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as\n * the specific way of detecting changes.\n *\n * There are two caveats:\n * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.\n * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.\n */\nexport class AutosaveMonitor extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.needsAutosave = !! ( props.isDirty && props.isAutosaveable );\n\t}\n\n\tcomponentDidMount() {\n\t\tif ( ! this.props.disableIntervalChecks ) {\n\t\t\tthis.setAutosaveTimer();\n\t\t}\n\t}\n\n\tcomponentDidUpdate( prevProps ) {\n\t\tif ( this.props.disableIntervalChecks ) {\n\t\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\t\tthis.props.autosave();\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.interval !== prevProps.interval ) {\n\t\t\tclearTimeout( this.timerId );\n\t\t\tthis.setAutosaveTimer();\n\t\t}\n\n\t\tif ( ! this.props.isDirty ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.isAutosaving && ! prevProps.isAutosaving ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.props.editsReference !== prevProps.editsReference ) {\n\t\t\tthis.needsAutosave = true;\n\t\t}\n\t}\n\n\tcomponentWillUnmount() {\n\t\tclearTimeout( this.timerId );\n\t}\n\n\tsetAutosaveTimer( timeout = this.props.interval * 1000 ) {\n\t\tthis.timerId = setTimeout( () => {\n\t\t\tthis.autosaveTimerHandler();\n\t\t}, timeout );\n\t}\n\n\tautosaveTimerHandler() {\n\t\tif ( ! this.props.isAutosaveable ) {\n\t\t\tthis.setAutosaveTimer( 1000 );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( this.needsAutosave ) {\n\t\t\tthis.needsAutosave = false;\n\t\t\tthis.props.autosave();\n\t\t}\n\n\t\tthis.setAutosaveTimer();\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nexport default compose( [\n\twithSelect( ( select, ownProps ) => {\n\t\tconst { getReferenceByDistinctEdits } = select( coreStore );\n\n\t\tconst {\n\t\t\tisEditedPostDirty,\n\t\t\tisEditedPostAutosaveable,\n\t\t\tisAutosavingPost,\n\t\t\tgetEditorSettings,\n\t\t} = select( editorStore );\n\n\t\tconst { interval = getEditorSettings().autosaveInterval } = ownProps;\n\n\t\treturn {\n\t\t\teditsReference: getReferenceByDistinctEdits(),\n\t\t\tisDirty: isEditedPostDirty(),\n\t\t\tisAutosaveable: isEditedPostAutosaveable(),\n\t\t\tisAutosaving: isAutosavingPost(),\n\t\t\tinterval,\n\t\t};\n\t} ),\n\twithDispatch( ( dispatch, ownProps ) => ( {\n\t\tautosave() {\n\t\t\tconst { autosave = dispatch( editorStore ).autosave } = ownProps;\n\t\t\tautosave();\n\t\t},\n\t} ) ),\n] )( AutosaveMonitor );\n"]}

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

@@ -19,7 +19,7 @@ var _store = require("../../store");
  * Internal dependencies
  */
 function CharacterCount() {
-  const content = (0, _data.useSelect)(select => select(_store.store).getEditedPostAttribute('content'));
+  const content = (0, _data.useSelect)(select => select(_store.store).getEditedPostAttribute('content'), []);
   return (0, _wordcount.count)(content, 'characters_including_spaces');
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/character-count/index.js"],"names":["CharacterCount","content","select","editorStore","getEditedPostAttribute"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,cAAT,GAA0B;AACxC,QAAMC,OAAO,GAAG,qBAAaC,MAAF,IAC1BA,MAAM,CAAEC,YAAF,CAAN,CAAsBC,sBAAtB,CAA8C,SAA9C,CADe,CAAhB;AAIA,SAAO,sBAAgBH,OAAhB,EAAyB,6BAAzB,CAAP;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":["CharacterCount","content","select","editorStore","getEditedPostAttribute"],"mappings":";;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;AAGe,SAASA,cAAT,GAA0B;AACxC,QAAMC,OAAO,GAAG,qBACbC,MAAF,IAAcA,MAAM,CAAEC,YAAF,CAAN,CAAsBC,sBAAtB,CAA8C,SAA9C,CADC,EAEf,EAFe,CAAhB;AAKA,SAAO,sBAAgBH,OAAhB,EAAyB,6BAAzB,CAAP;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/components/editor-help/add-blocks.native.js

@@ -29,15 +29,16 @@ var _viewSections = require("./view-sections");
  * Internal dependencies
  */
 const AddBlocks = () => {
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_viewSections.HelpDetailImage, {
+    source: require('./images/add-light.png'),
+    sourceDarkMode: require('./images/add-dark.png')
+  }), (0, _element.createElement)(_reactNative.View, {
     style: _style.default.helpDetailContainer
-  }, (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/add-blocks.png')
-  }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
+  }, (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('Add a new block at any time by tapping on the + icon in the toolbar on the bottom left. ')
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('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.')
-  }));
+  })));
 };
 
 var _default = AddBlocks;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/add-blocks.native.js"],"names":["AddBlocks","styles","helpDetailContainer","require"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,SAAS,GAAG,MAAM;AACvB,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOC;AAArB,KACC,4BAAC,6BAAD;AAAiB,IAAA,MAAM,EAAGC,OAAO,CAAE,yBAAF;AAAjC,IADD,EAEC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,0FADM;AADR,IAFD,EAOC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,0KADM;AADR,IAPD,CADD;AAeA,CAhBD;;eAkBeH,S","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":["AddBlocks","require","styles","helpDetailContainer"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,SAAS,GAAG,MAAM;AACvB,SACC,qDACC,4BAAC,6BAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,wBAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,uBAAF;AAFzB,IADD,EAKC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOC;AAArB,KACC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,0FADM;AADR,IADD,EAMC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,0KADM;AADR,IAND,CALD,CADD;AAoBA,CArBD;;eAuBeH,S","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/components/editor-help/customize-blocks.native.js

@@ -29,15 +29,16 @@ var _viewSections = require("./view-sections");
  * Internal dependencies
  */
 const CustomizeBlocks = () => {
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_viewSections.HelpDetailImage, {
+    source: require('./images/settings-light.png'),
+    sourceDarkMode: require('./images/settings-dark.png')
+  }), (0, _element.createElement)(_reactNative.View, {
     style: _style.default.helpDetailContainer
-  }, (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/customize-blocks.png')
-  }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
-    text: (0, _i18n.__)('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.')
+  }, (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
+    text: (0, _i18n.__)('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.')
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('Some blocks have additional settings. Tap the settings icon on the bottom right of the block to view more options.')
-  }));
+  })));
 };
 
 var _default = CustomizeBlocks;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/customize-blocks.native.js"],"names":["CustomizeBlocks","styles","helpDetailContainer","require"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,eAAe,GAAG,MAAM;AAC7B,SACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOC;AAArB,KACC,4BAAC,6BAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,+BAAF;AADjB,IADD,EAIC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,uIADM;AADR,IAJD,EASC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,oHADM;AADR,IATD,CADD;AAiBA,CAlBD;;eAoBeH,e","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":["CustomizeBlocks","require","styles","helpDetailContainer"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AACA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,eAAe,GAAG,MAAM;AAC7B,SACC,qDACC,4BAAC,6BAAD;AACC,IAAA,MAAM,EAAGC,OAAO,CAAE,6BAAF,CADjB;AAEC,IAAA,cAAc,EAAGA,OAAO,CAAE,4BAAF;AAFzB,IADD,EAKC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOC;AAArB,KACC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,qIADM;AADR,IADD,EAMC,4BAAC,gCAAD;AACC,IAAA,IAAI,EAAG,cACN,oHADM;AADR,IAND,CALD,CADD;AAoBA,CArBD;;eAuBeH,e","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/components/editor-help/help-detail-navigation-screen.native.js

@@ -9,13 +9,13 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _reactNative = require("react-native");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _components = require("@wordpress/components");
+var _reactNative = require("react-native");
 
 var _native = require("@react-navigation/native");
 
-var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
 
 var _style = _interopRequireDefault(require("./style.scss"));
 
@@ -31,23 +31,37 @@ var _style = _interopRequireDefault(require("./style.scss"));
  * Internal dependencies
  */
 const HelpDetailNavigationScreen = ({
-  name,
-  content
+  content,
+  label
 }) => {
   const navigation = (0, _native.useNavigation)();
+  const {
+    listProps
+  } = (0, _element.useContext)(_components.BottomSheetContext);
 
-  const goBack = () => {
-    navigation.goBack();
-  };
+  const contentContainerStyle = _reactNative.StyleSheet.flatten(listProps.contentContainerStyle);
 
   return (0, _element.createElement)(_components.BottomSheet.NavigationScreen, {
-    name: (0, _i18n.__)('What is a block?')
-  }, (0, _element.createElement)(_components.BottomSheet.NavigationHeader, {
-    screen: name,
-    leftButtonOnPress: goBack
-  }), (0, _element.createElement)(_reactNative.View, {
-    style: _style.default.separator
-  }), content);
+    isScrollable: true,
+    fullScreen: true
+  }, (0, _element.createElement)(_reactNative.View, {
+    style: _style.default.container
+  }, (0, _element.createElement)(_components.BottomSheet.NavBar, null, (0, _element.createElement)(_components.BottomSheet.NavBar.BackButton, {
+    onPress: navigation.goBack
+  }), (0, _element.createElement)(_components.BottomSheet.NavBar.Heading, null, label)), (0, _element.createElement)(_reactNative.ScrollView, (0, _extends2.default)({}, 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
+    }
+  }), (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
+    accessible: false
+  }, (0, _element.createElement)(_reactNative.View, null, content)))));
 };
 
 var _default = HelpDetailNavigationScreen;

package/build/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":["HelpDetailNavigationScreen","name","content","navigation","goBack","styles","separator"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAKA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AAGA,MAAMA,0BAA0B,GAAG,CAAE;AAAEC,EAAAA,IAAF;AAAQC,EAAAA;AAAR,CAAF,KAAyB;AAC3D,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,MAAM,GAAG,MAAM;AACpBD,IAAAA,UAAU,CAACC,MAAX;AACA,GAFD;;AAIA,SACC,4BAAC,uBAAD,CAAa,gBAAb;AAA8B,IAAA,IAAI,EAAG,cAAI,kBAAJ;AAArC,KACC,4BAAC,uBAAD,CAAa,gBAAb;AACC,IAAA,MAAM,EAAGH,IADV;AAEC,IAAA,iBAAiB,EAAGG;AAFrB,IADD,EAKC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOC;AAArB,IALD,EAMGJ,OANH,CADD;AAUA,CAjBD;;eAmBeF,0B","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":["HelpDetailNavigationScreen","content","label","navigation","listProps","BottomSheetContext","contentContainerStyle","StyleSheet","flatten","styles","container","goBack","paddingBottom","Math","max","safeAreaBottomInset","marginTop"],"mappings":";;;;;;;;;AAeA;;;;AAZA;;AAMA;;AAKA;;AAMA;;AApBA;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,0BAA0B,GAAG,CAAE;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAF,KAA0B;AAC5D,QAAMC,UAAU,GAAG,4BAAnB;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAgB,yBAAYC,8BAAZ,CAAtB;;AACA,QAAMC,qBAAqB,GAAGC,wBAAWC,OAAX,CAC7BJ,SAAS,CAACE,qBADmB,CAA9B;;AAIA,SACC,4BAAC,uBAAD,CAAa,gBAAb;AAA8B,IAAA,YAAY,MAA1C;AAA2C,IAAA,UAAU;AAArD,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGG,eAAOC;AAArB,KACC,4BAAC,uBAAD,CAAa,MAAb,QACC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,UAApB;AACC,IAAA,OAAO,EAAGP,UAAU,CAACQ;AADtB,IADD,EAIC,4BAAC,uBAAD,CAAa,MAAb,CAAoB,OAApB,QACGT,KADH,CAJD,CADD,EASC,4BAAC,uBAAD,6BACME,SADN;AAEC,IAAA,qBAAqB,EAAG,EACvB,GAAGE,qBADoB;AAEvBM,MAAAA,aAAa,EAAEC,IAAI,CAACC,GAAL,CACdV,SAAS,CAACW,mBADI,EAEdT,qBAAqB,CAACM,aAFR,CAFQ;;AAMvB;AACN;AACA;AACA;AACA;AACMI,MAAAA,SAAS,EAAE;AAXY;AAFzB,MAgBC,4BAAC,qCAAD;AAA0B,IAAA,UAAU,EAAG;AAAvC,KACC,4BAAC,iBAAD,QAAQf,OAAR,CADD,CAhBD,CATD,CADD,CADD;AAkCA,CA1CD;;eA4CeD,0B","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/components/editor-help/help-get-support-button.native.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _reactNative = require("react-native");
+
+var _compose = require("@wordpress/compose");
+
+var _style = _interopRequireDefault(require("./style.scss"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const HelpGetSupportButton = ({
+  onPress,
+  title
+}) => {
+  const buttonStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.button, _style.default.buttonDark);
+  const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.buttonText, _style.default.buttonTextDark);
+  return (0, _element.createElement)(_reactNative.Pressable, {
+    style: buttonStyle,
+    onPress: onPress,
+    accessibilityRole: 'button'
+  }, (0, _element.createElement)(_reactNative.Text, {
+    style: textStyle
+  }, title));
+};
+
+var _default = HelpGetSupportButton;
+exports.default = _default;
+//# sourceMappingURL=help-get-support-button.native.js.map

package/build/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":["HelpGetSupportButton","onPress","title","buttonStyle","styles","button","buttonDark","textStyle","buttonText","buttonTextDark"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,oBAAoB,GAAG,CAAE;AAAEC,EAAAA,OAAF;AAAWC,EAAAA;AAAX,CAAF,KAA0B;AACtD,QAAMC,WAAW,GAAG,2CACnBC,eAAOC,MADY,EAEnBD,eAAOE,UAFY,CAApB;AAKA,QAAMC,SAAS,GAAG,2CACjBH,eAAOI,UADU,EAEjBJ,eAAOK,cAFU,CAAlB;AAKA,SACC,4BAAC,sBAAD;AACC,IAAA,KAAK,EAAGN,WADT;AAEC,IAAA,OAAO,EAAGF,OAFX;AAGC,IAAA,iBAAiB,EAAG;AAHrB,KAKC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGM;AAAd,KAA4BL,KAA5B,CALD,CADD;AASA,CApBD;;eAsBeF,oB","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/components/editor-help/help-topic-row.native.js

@@ -22,12 +22,13 @@ var _icons = require("@wordpress/icons");
  */
 const HelpTopicRow = ({
   label,
-  icon
+  icon,
+  screenName
 }) => {
   const navigation = (0, _native.useNavigation)();
 
   const openSubSheet = () => {
-    navigation.navigate(label);
+    navigation.navigate(screenName);
   };
 
   return (0, _element.createElement)(_components.TextControl, {

package/build/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":["HelpTopicRow","label","icon","navigation","openSubSheet","navigate","chevronRight"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA;AAAT,CAAF,KAAuB;AAC3C,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,YAAY,GAAG,MAAM;AAC1BD,IAAAA,UAAU,CAACE,QAAX,CAAqBJ,KAArB;AACA,GAFD;;AAIA,SACC,4BAAC,uBAAD;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,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAGI;AAAb,IARD,CADD;AAYA,CAnBD;;eAqBeN,Y","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":["HelpTopicRow","label","icon","screenName","navigation","openSubSheet","navigate","chevronRight"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAIA,MAAMA,YAAY,GAAG,CAAE;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAT;AAAeC,EAAAA;AAAf,CAAF,KAAmC;AACvD,QAAMC,UAAU,GAAG,4BAAnB;;AAEA,QAAMC,YAAY,GAAG,MAAM;AAC1BD,IAAAA,UAAU,CAACE,QAAX,CAAqBH,UAArB;AACA,GAFD;;AAIA,SACC,4BAAC,uBAAD;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,4BAAC,gBAAD;AAAM,IAAA,IAAI,EAAGK;AAAb,IARD,CADD;AAYA,CAnBD;;eAqBeP,Y","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/components/editor-help/index.native.js

@@ -9,15 +9,27 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _lodash = require("lodash");
+
 var _reactNative = require("react-native");
 
+var _stack = require("@react-navigation/stack");
+
 var _components = require("@wordpress/components");
 
 var _i18n = require("@wordpress/i18n");
 
+var _icons = require("@wordpress/icons");
+
+var _data = require("@wordpress/data");
+
+var _editor = require("@wordpress/editor");
+
 var _compose = require("@wordpress/compose");
 
-var _icons = require("@wordpress/icons");
+var _reactNativeBridge = require("@wordpress/react-native-bridge");
 
 var _style = _interopRequireDefault(require("./style.scss"));
 
@@ -25,6 +37,8 @@ var _helpDetailNavigationScreen = _interopRequireDefault(require("./help-detail-
 
 var _helpTopicRow = _interopRequireDefault(require("./help-topic-row"));
 
+var _helpGetSupportButton = _interopRequireDefault(require("./help-get-support-button"));
+
 var _introToBlocks = _interopRequireDefault(require("./intro-to-blocks"));
 
 var _addBlocks = _interopRequireDefault(require("./add-blocks"));
@@ -69,44 +83,91 @@ const HELP_TOPICS = [{
 }];
 
 function EditorHelpTopics({
+  close,
   isVisible,
   onClose
 }) {
-  const bottomSheetHeaderTitleStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.bottomSheetHeaderTitle, _style.default.bottomSheetHeaderTitleDark);
+  const {
+    postType
+  } = (0, _data.useSelect)(select => ({
+    postType: select(_editor.store).getEditedPostAttribute('type')
+  }));
+  const sectionTitle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.helpDetailSectionHeading, _style.default.helpDetailSectionHeadingDark);
+  const title = postType === 'page' ? (0, _i18n.__)('How to edit your page') : (0, _i18n.__)('How to edit your post');
   return (0, _element.createElement)(_components.BottomSheet, {
     isVisible: isVisible,
     onClose: onClose,
     hideHeader: true,
     hasNavigation: true,
-    contentStyle: _style.default.contentContainer
-  }, (0, _element.createElement)(_components.BottomSheet.NavigationContainer, {
+    contentStyle: _style.default.contentContainer,
+    testID: "editor-help-modal"
+  }, (0, _element.createElement)(_reactNative.SafeAreaView, null, (0, _element.createElement)(_components.BottomSheet.NavigationContainer, {
     animate: true,
-    main: true
+    main: true,
+    style: _style.default.navigationContainer
   }, (0, _element.createElement)(_components.BottomSheet.NavigationScreen, {
-    name: (0, _i18n.__)('Topics')
+    isScrollable: true,
+    fullScreen: true,
+    name: "help-topics"
   }, (0, _element.createElement)(_reactNative.View, {
-    style: _style.default.bottomSheetHeader
-  }, (0, _element.createElement)(_reactNative.Text, {
-    style: bottomSheetHeaderTitleStyle,
-    maxFontSizeMultiplier: 3
-  }, (0, _i18n.__)('How to edit your site'))), (0, _element.createElement)(_reactNative.View, {
-    style: _style.default.separator
-  }), (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('The basics'),
-    style: _style.default.sectionContainer
-  }, HELP_TOPICS.map(topic => {
-    return (0, _element.createElement)(_helpTopicRow.default, {
-      key: topic.label,
-      label: topic.label,
-      icon: topic.icon
-    });
-  }))), HELP_TOPICS.map(topic => {
+    style: _style.default.container
+  }, (0, _element.createElement)(_components.BottomSheet.NavBar, null, (0, _element.createElement)(_components.BottomSheet.NavBar.DismissButton, {
+    onPress: close,
+    iosText: (0, _i18n.__)('Close')
+  }), (0, _element.createElement)(_components.BottomSheet.NavBar.Heading, null, title)), (0, _element.createElement)(_components.BottomSheetConsumer, null, ({
+    listProps
+  }) => {
+    const contentContainerStyle = _reactNative.StyleSheet.flatten(listProps.contentContainerStyle);
+
+    return (0, _element.createElement)(_reactNative.ScrollView, (0, _extends2.default)({}, 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
+      }
+    }), (0, _element.createElement)(_components.PanelBody, null, (0, _element.createElement)(_reactNative.Text, {
+      style: sectionTitle
+    }, (0, _i18n.__)('The basics')), HELP_TOPICS.map(({
+      label,
+      icon
+    }) => {
+      const labelSlug = (0, _lodash.kebabCase)(label);
+      return (0, _element.createElement)(_helpTopicRow.default, {
+        key: labelSlug,
+        label: label,
+        icon: icon,
+        screenName: labelSlug
+      });
+    }), (0, _element.createElement)(_reactNative.Text, {
+      style: sectionTitle
+    }, (0, _i18n.__)('Get support')), (0, _element.createElement)(_helpGetSupportButton.default, {
+      title: (0, _i18n.__)('Contact support'),
+      onPress: _reactNativeBridge.requestContactCustomerSupport
+    }), (0, _element.createElement)(_helpGetSupportButton.default, {
+      title: (0, _i18n.__)('More support options'),
+      onPress: _reactNativeBridge.requestGotoCustomerSupportOptions
+    })));
+  }))), HELP_TOPICS.map(({
+    view,
+    label
+  }) => {
+    const labelSlug = (0, _lodash.kebabCase)(label);
     return (0, _element.createElement)(_helpDetailNavigationScreen.default, {
-      key: topic.label,
-      name: topic.label,
-      content: topic.view
+      key: labelSlug,
+      name: labelSlug,
+      content: view,
+      label: label,
+      options: {
+        gestureEnabled: true,
+        ..._stack.TransitionPresets.DefaultTransition
+      }
     });
-  })));
+  }))));
 }
 
 var _default = EditorHelpTopics;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/editor/src/components/editor-help/index.native.js"],"names":["HELP_TOPICS","label","icon","helpFilled","view","plusCircleFilled","alignJustifyAlt","trashFilled","cogAlt","EditorHelpTopics","isVisible","onClose","bottomSheetHeaderTitleStyle","styles","bottomSheetHeaderTitle","bottomSheetHeaderTitleDark","contentContainer","bottomSheetHeader","separator","sectionContainer","map","topic"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAWA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA7BA;AACA;AACA;;AAGA;AACA;AACA;;AAYA;AACA;AACA;AAUA,MAAMA,WAAW,GAAG,CACnB;AACCC,EAAAA,KAAK,EAAE,cAAI,kBAAJ,CADR;AAECC,EAAAA,IAAI,EAAEC,iBAFP;AAGCC,EAAAA,IAAI,EAAE,4BAAC,sBAAD;AAHP,CADmB,EAMnB;AACCH,EAAAA,KAAK,EAAE,cAAI,YAAJ,CADR;AAECC,EAAAA,IAAI,EAAEG,uBAFP;AAGCD,EAAAA,IAAI,EAAE,4BAAC,kBAAD;AAHP,CANmB,EAWnB;AAAEH,EAAAA,KAAK,EAAE,cAAI,aAAJ,CAAT;AAA8BC,EAAAA,IAAI,EAAEI,sBAApC;AAAqDF,EAAAA,IAAI,EAAE,4BAAC,mBAAD;AAA3D,CAXmB,EAYnB;AAAEH,EAAAA,KAAK,EAAE,cAAI,eAAJ,CAAT;AAAgCC,EAAAA,IAAI,EAAEK,kBAAtC;AAAmDH,EAAAA,IAAI,EAAE,4BAAC,qBAAD;AAAzD,CAZmB,EAanB;AACCH,EAAAA,KAAK,EAAE,cAAI,kBAAJ,CADR;AAECC,EAAAA,IAAI,EAAEM,aAFP;AAGCJ,EAAAA,IAAI,EAAE,4BAAC,wBAAD;AAHP,CAbmB,CAApB;;AAoBA,SAASK,gBAAT,CAA2B;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAA3B,EAAoD;AACnD,QAAMC,2BAA2B,GAAG,2CACnCC,eAAOC,sBAD4B,EAEnCD,eAAOE,0BAF4B,CAApC;AAKA,SACC,4BAAC,uBAAD;AACC,IAAA,SAAS,EAAGL,SADb;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,UAAU,MAHX;AAIC,IAAA,aAAa,MAJd;AAKC,IAAA,YAAY,EAAGE,eAAOG;AALvB,KAOC,4BAAC,uBAAD,CAAa,mBAAb;AAAiC,IAAA,OAAO,MAAxC;AAAyC,IAAA,IAAI;AAA7C,KACC,4BAAC,uBAAD,CAAa,gBAAb;AAA8B,IAAA,IAAI,EAAG,cAAI,QAAJ;AAArC,KACC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGH,eAAOI;AAArB,KACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGL,2BADT;AAEC,IAAA,qBAAqB,EAAG;AAFzB,KAIG,cAAI,uBAAJ,CAJH,CADD,CADD,EASC,4BAAC,iBAAD;AAAM,IAAA,KAAK,EAAGC,eAAOK;AAArB,IATD,EAUC,4BAAC,qBAAD;AACC,IAAA,KAAK,EAAG,cAAI,YAAJ,CADT;AAEC,IAAA,KAAK,EAAGL,eAAOM;AAFhB,KAKGnB,WAAW,CAACoB,GAAZ,CAAmBC,KAAF,IAAa;AAC/B,WACC,4BAAC,qBAAD;AACC,MAAA,GAAG,EAAGA,KAAK,CAACpB,KADb;AAEC,MAAA,KAAK,EAAGoB,KAAK,CAACpB,KAFf;AAGC,MAAA,IAAI,EAAGoB,KAAK,CAACnB;AAHd,MADD;AAOA,GARC,CALH,CAVD,CADD,EA4BGF,WAAW,CAACoB,GAAZ,CAAmBC,KAAF,IAAa;AAC/B,WACC,4BAAC,mCAAD;AACC,MAAA,GAAG,EAAGA,KAAK,CAACpB,KADb;AAEC,MAAA,IAAI,EAAGoB,KAAK,CAACpB,KAFd;AAGC,MAAA,OAAO,EAAGoB,KAAK,CAACjB;AAHjB,MADD;AAOA,GARC,CA5BH,CAPD,CADD;AAgDA;;eAEcK,gB","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":["HELP_TOPICS","label","icon","helpFilled","view","plusCircleFilled","alignJustifyAlt","trashFilled","cogAlt","EditorHelpTopics","close","isVisible","onClose","postType","select","editorStore","getEditedPostAttribute","sectionTitle","styles","helpDetailSectionHeading","helpDetailSectionHeadingDark","title","contentContainer","navigationContainer","container","listProps","contentContainerStyle","StyleSheet","flatten","paddingBottom","Math","max","safeAreaBottomInset","marginTop","map","labelSlug","requestContactCustomerSupport","requestGotoCustomerSupportOptions","gestureEnabled","TransitionPresets","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/components/editor-help/intro-to-blocks.native.js

@@ -13,6 +13,8 @@ var _reactNative = require("react-native");
 
 var _i18n = require("@wordpress/i18n");
 
+var _compose = require("@wordpress/compose");
+
 var _style = _interopRequireDefault(require("./style.scss"));
 
 var _viewSections = require("./view-sections");
@@ -29,12 +31,15 @@ var _viewSections = require("./view-sections");
  * Internal dependencies
  */
 const IntroToBlocks = () => {
-  return (0, _element.createElement)(_reactNative.View, {
+  const titleStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.helpDetailTitle, _style.default.helpDetailTitleDark);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_viewSections.HelpDetailImage, {
+    source: require('./images/block-layout-collage.png')
+  }), (0, _element.createElement)(_reactNative.View, {
     style: _style.default.helpDetailContainer
-  }, (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/intro-blocks-1.png')
-  }), (0, _element.createElement)(_reactNative.Text, {
-    style: _style.default.helpDetailTitle
+  }, (0, _element.createElement)(_reactNative.Text, {
+    accessibilityRole: "header",
+    selectable: true,
+    style: titleStyle
   }, (0, _i18n.__)('Welcome to the world of blocks')), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('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.')
   }), (0, _element.createElement)(_viewSections.HelpDetailSectionHeadingText, {
@@ -42,22 +47,27 @@ const IntroToBlocks = () => {
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('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.')
   }), (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/intro-blocks-2.png')
+    accessible: true,
+    accessibilityLabel: (0, _i18n.__)('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')
   }), (0, _element.createElement)(_viewSections.HelpDetailSectionHeadingText, {
     text: (0, _i18n.__)('Embed media')
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('Make your content stand out by adding images, gifs, videos, and embedded media to your pages.')
   }), (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/intro-blocks-3.png')
+    source: require('./images/embed-media-light.png'),
+    sourceDarkMode: require('./images/embed-media-dark.png')
   }), (0, _element.createElement)(_viewSections.HelpDetailSectionHeadingText, {
     text: (0, _i18n.__)('Build layouts')
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('Arrange your content into columns, add Call to Action buttons, and overlay images with text.')
   }), (0, _element.createElement)(_viewSections.HelpDetailImage, {
-    source: require('./images/intro-blocks-4.png')
+    source: require('./images/build-layouts-light.png'),
+    sourceDarkMode: require('./images/build-layouts-dark.png')
   }), (0, _element.createElement)(_viewSections.HelpDetailBodyText, {
     text: (0, _i18n.__)('Give it a try by adding a few blocks to your post or page!')
-  }));
+  })));
 };
 
 var _default = IntroToBlocks;