Merge pull request #4291 from wordpress-mobile/add/tiled-gallery-block

Initial Port of Jetpack Tiled Gallery Block

bundle/android/strings.xml

@@ -172,6 +172,7 @@
     <string name="gutenberg_native_from_clipboard" tools:ignore="UnusedResources">From clipboard</string>
     <!-- translators: accessibility text. %s: gallery caption. -->
     <string name="gutenberg_native_gallery_caption_s" tools:ignore="UnusedResources">Gallery caption. %s</string>
+    <string name="gutenberg_native_gallery_style" tools:ignore="UnusedResources">Gallery style</string>
     <string name="gutenberg_native_get_support" tools:ignore="UnusedResources">Get support</string>
     <string name="gutenberg_native_give_it_a_try_by_adding_a_few_blocks_to_your_post_or_page" tools:ignore="UnusedResources">Give it a try by adding a few blocks to your post or page!</string>
     <string name="gutenberg_native_go_back" tools:ignore="UnusedResources">Go back</string>
@@ -220,6 +221,7 @@
     <string name="gutenberg_native_navigate_up" tools:ignore="UnusedResources">Navigate Up</string>
     <string name="gutenberg_native_navigates_to_custom_color_picker" tools:ignore="UnusedResources">Navigates to custom color picker</string>
     <string name="gutenberg_native_navigates_to_customize_the_gradient" tools:ignore="UnusedResources">Navigates to customize the gradient</string>
+    <string name="gutenberg_native_navigates_to_layout_selection_screen" tools:ignore="UnusedResources">Navigates to layout selection screen</string>
     <!-- translators: %s: Select control button label e.g. Small
 translators: %s: Select control button label e.g. "Button width" -->
     <string name="gutenberg_native_navigates_to_select_s" tools:ignore="UnusedResources">Navigates to select %s</string>
@@ -326,6 +328,7 @@ translators: %s: Select control option value e.g: "Auto, 25%". -->
     <string name="gutenberg_native_text_formatting_controls_are_located_within_the_toolbar_positione" tools:ignore="UnusedResources">Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block</string>
     <string name="gutenberg_native_the_basics" tools:ignore="UnusedResources">The basics</string>
     <string name="gutenberg_native_three" tools:ignore="UnusedResources">Three</string>
+    <string name="gutenberg_native_tiled_gallery_settings" tools:ignore="UnusedResources">Tiled gallery settings</string>
     <string name="gutenberg_native_to_remove_a_block_select_the_block_and_click_the_three_dots_in_th" tools:ignore="UnusedResources">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.</string>
     <string name="gutenberg_native_transform_block" tools:ignore="UnusedResources">Transform block…</string>
     <!-- translators: %s: block title e.g: "Paragraph". -->

bundle/ios/GutenbergNativeTranslations.swift

@@ -163,6 +163,7 @@ private func dummy() {
     _ = NSLocalizedString("Four", comment: "")
     _ = NSLocalizedString("From clipboard", comment: "")
     _ = NSLocalizedString("Gallery caption. %s", comment: "translators: accessibility text. %s: gallery caption.")
+    _ = NSLocalizedString("Gallery style", comment: "")
     _ = NSLocalizedString("Get support", comment: "")
     _ = NSLocalizedString("Give it a try by adding a few blocks to your post or page!", comment: "")
     _ = NSLocalizedString("Go back", comment: "")
@@ -205,6 +206,7 @@ private func dummy() {
     _ = NSLocalizedString("Navigate Up", comment: "")
     _ = NSLocalizedString("Navigates to custom color picker", comment: "")
     _ = NSLocalizedString("Navigates to customize the gradient", comment: "")
+    _ = NSLocalizedString("Navigates to layout selection screen", comment: "")
     _ = NSLocalizedString("Navigates to select %s", comment: "translators: %s: Select control button label e.g. Small\ntranslators: %s: Select control button label e.g. \"Button width\"")
     _ = NSLocalizedString("Navigates to the previous content sheet", comment: "")
     _ = NSLocalizedString("No application can handle this request.", comment: "")
@@ -274,6 +276,7 @@ private func dummy() {
     _ = NSLocalizedString("Text formatting controls are located within the toolbar positioned above the keyboard while editing a text block", comment: "")
     _ = NSLocalizedString("The basics", comment: "")
     _ = NSLocalizedString("Three", comment: "")
+    _ = NSLocalizedString("Tiled gallery settings", comment: "")
     _ = NSLocalizedString("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.", comment: "")
     _ = NSLocalizedString("Transform %s to", comment: "translators: %s: block title e.g: \"Paragraph\".")
     _ = NSLocalizedString("Transform block…", comment: "")

src/block-support/supported-blocks.json

@@ -32,7 +32,8 @@
 		"jetpack/contact-info",
 		"jetpack/email",
 		"jetpack/phone",
-		"jetpack/address"
+		"jetpack/address",
+		"jetpack/tiled-gallery"
 	],
 	"devOnly": [ "core/code" ],
 	"iOSOnly": [],

src/jetpack-editor-setup.js

@@ -25,6 +25,9 @@ const supportedJetpackBlocks = {
 	story: {
 		available: true,
 	},
+	'tiled-gallery': {
+		available: __DEV__,
+	},
 };
 
 const setJetpackData = ( {
@@ -76,6 +79,10 @@ export function registerJetpackBlocks( { capabilities } ) {
 		capabilities.contactInfoBlock,
 		'jetpack/contact-info'
 	);
+	hideBlockByCapability(
+		capabilities.tiledGalleryBlock,
+		'jetpack/tiled-gallery'
+	);
 
 	// Register Jetpack blocks
 	require( '../jetpack/projects/plugins/jetpack/extensions/editor' );

src/jetpack/test/tiled-gallery.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	fireEvent,
+	waitFor,
+	within,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import {
+	registerJetpackBlocks,
+	setupJetpackEditor,
+} from '../../jetpack-editor-setup';
+
+const defaultProps = {
+	capabilities: {
+		tiledGalleryBlock: true,
+	},
+};
+
+beforeAll( () => {
+	// Register all core blocks
+	registerCoreBlocks();
+	// Register Jetpack blocks
+	setupJetpackEditor( { blogId: 1, isJetpackActive: true } );
+	registerJetpackBlocks( defaultProps );
+} );
+
+afterAll( () => {
+	// Clean up registered blocks
+	getBlockTypes().forEach( ( block ) => {
+		unregisterBlockType( block.name );
+	} );
+} );
+
+describe.skip( 'Tiled Gallery block', () => {
+	it( 'inserts the block', async () => {
+		const {
+			getByA11yLabel,
+			getByTestId,
+			getByText,
+			debug,
+		} = await initializeEditor( {
+			initialHtml: '',
+			capabilities: { tiledGalleryBlock: true },
+		} );
+
+		// Open the inserter menu
+		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
+
+		const blockList = getByTestId( 'InserterUI-Blocks' );
+		// onScroll event used to force the FlatList to render all items
+		fireEvent.scroll( blockList, {
+			nativeEvent: {
+				contentOffset: { y: 0, x: 0 },
+				contentSize: { width: 100, height: 100 },
+				layoutMeasurement: { width: 100, height: 100 },
+			},
+		} );
+
+		// Insert the block
+		fireEvent.press( await waitFor( () => getByText( 'Tiled Gallery' ) ) );
+
+		// Get the block
+		const block = await waitFor( () =>
+			getByA11yLabel( /Tiled Gallery Block\. Row 1/ )
+		);
+
+		expect( block ).toBeDefined();
+		const expectedHtml = `<!-- wp:jetpack/tiled-gallery /-->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+} );

src/test/jetpack-editor-setup.js

@@ -35,7 +35,11 @@ const defaultProps = {
 		smartframeEmbed: true,
 	},
 };
-const jetpackBlocks = [ 'jetpack/contact-info', 'jetpack/story' ];
+const jetpackBlocks = [
+	'jetpack/contact-info',
+	'jetpack/story',
+	'jetpack/tiled-gallery',
+];
 const jetpackEmbedVariations = [
 	'facebook',
 	'instagram',
@@ -74,6 +78,7 @@ describe( 'Jetpack blocks', () => {
 			available_blocks: {
 				'contact-info': { available: true },
 				story: { available: true },
+				'tiled-gallery': { available: true },
 			},
 			jetpack: { is_active: true },
 			siteFragment: null,
@@ -109,6 +114,7 @@ describe( 'Jetpack blocks', () => {
 			capabilities: {
 				mediaFilesCollectionBlock: true,
 				contactInfoBlock: false,
+				tiledGalleryBlock: true,
 			},
 		} );