Merge pull request #2611 from wordpress-mobile/try/jetpack-stories-block

Add support for Story block rendering on mobile gutenberg

src/index.js

@@ -14,9 +14,12 @@ import correctTextFontWeight from './text-font-weight-correct';
 import setupJetpackEditor from './jetpack-editor-setup';
 import initialHtml from './initial-html';
 
-addAction( 'native.pre-render', 'gutenberg-mobile', ( props ) => {
+addAction( 'native.pre-render', 'gutenberg-mobile', () => {
 	require( './strings-overrides' );
 	correctTextFontWeight();
+} );
+
+addAction( 'native.render', 'gutenberg-mobile', ( props ) => {
 	setupJetpackEditor(
 		props.jetpackState || { blogId: 1, isJetpackActive: true }
 	);

src/initial-html.js

@@ -12,4 +12,16 @@ export default `
 <div class="wp-block-jetpack-address"><div class="jetpack-address__address jetpack-address__address1">Random Street</div></div>
 <!-- /wp:jetpack/address --></div>
 <!-- /wp:jetpack/contact-info -->
+
+<!-- wp:jetpack/story {"mediaFiles":[{"alt":"","caption":"","id":320,"link":"https://cldup.com/n48GTQmw7s.jpg","mime":"image/jpeg","type":"image","url":"https://cldup.com/n48GTQmw7s.jpg"},{"alt":"","caption":"","id":321,"link":"https://cldup.com/u2kdydrlQv.jpg","mime":"image/jpeg","type":"image","url":"https://cldup.com/u2kdydrlQv.jpg"},{"alt":"","caption":"","id":319,"link":"https://cldup.com/fi7gqyUrbL.jpg","mime":"image/jpeg","type":"image","url":"https://cldup.com/fi7gqyUrbL.jpg"}]} -->
+<div class="wp-block-jetpack-story wp-story"></div>
+<!-- /wp:jetpack/story -->
+
+<!-- wp:jetpack/story -->
+<div class="wp-block-jetpack-story wp-story"></div>
+<!-- /wp:jetpack/story -->
+
+<!-- wp:jetpack/story {"mediaFiles":[]}} -->
+<div class="wp-block-jetpack-story wp-story"></div>
+<!-- /wp:jetpack/story -->
 `;

src/jetpack-editor-setup.js

@@ -2,12 +2,19 @@
  * Internal dependencies
  */
 import { JETPACK_DATA_PATH } from '../jetpack/extensions/shared/get-jetpack-data';
+/**
+ * WordPress dependencies
+ */
+import { dispatch, select } from '@wordpress/data';
 
 // When adding new blocks to this list please also consider updating ./block-support/supported-blocks.json
 const supportedJetpackBlocks = {
 	'contact-info': {
 		available: true,
 	},
+	story: {
+		available: true,
+	},
 };
 
 const setJetpackData = ( {
@@ -37,6 +44,26 @@ export default ( jetpackState ) => {
 
 	const jetpackData = setJetpackData( jetpackState );
 
+	// Note on the use of setTimeout() here:
+	// We observed the settings may not be ready exactly when the native.render hooks get run but rather
+	// right after that execution cycle (because state hasn't changed yet). Hence, we're only checking for
+	// the actual settings to be loaded by using setTimeout without a delay parameter. This ensures the
+	// settings are loaded onto the store and we can use the core/block-editor selector by the time we do
+	// the actual check.
+
+	// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+	setTimeout( () => {
+		const mediaFilesCollectionBlock = select(
+			'core/block-editor'
+		).getSettings( 'capabilities' ).mediaFilesCollectionBlock;
+
+		if ( mediaFilesCollectionBlock !== true ) {
+			dispatch( 'core/edit-post' ).hideBlockTypes( [ 'jetpack/story' ] );
+		} else {
+			dispatch( 'core/edit-post' ).showBlockTypes( [ 'jetpack/story' ] );
+		}
+	} );
+
 	if ( __DEV__ ) {
 		require( '../jetpack/extensions/editor' );
 	}

src/test/index.js

@@ -3,7 +3,7 @@ describe( 'Test Jetpack blocks', () => {
 		const mockRegisterBlockCollection = jest.fn();
 		jest.mock( '@wordpress/blocks', () => {
 			return {
-				getCategories: () => [],
+				getCategories: () => [ { slug: 'media' } ],
 				setCategories: jest.fn(),
 				registerBlockCollection: mockRegisterBlockCollection,
 			};
@@ -12,6 +12,9 @@ describe( 'Test Jetpack blocks', () => {
 			'../../jetpack/extensions/blocks/contact-info/editor.js',
 			() => jest.fn()
 		);
+		jest.mock( '../../jetpack/extensions/blocks/story/editor.js', () =>
+			jest.fn()
+		);
 
 		const setupJetpackEditor = require( '../jetpack-editor-setup' ).default;
 		setupJetpackEditor( { blogId: 1, isJetpackActive: true } );