Merge branch 'develop' into add/image-size-picker-improvements

.circleci/config.yml

@@ -6,13 +6,13 @@ commands:
       - restore_cache:
           name: Restore Yarn Cache
           keys:
-            - yarn-i18n-v4-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
+            - yarn-i18n-v4-cache-v{{ .Environment.CACHE_TRIGGER_VERSION }}-job-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
       - run:
           name: Yarn Install
-          command: yarn install --frozen-lockfile --prefer-offline
+          command: yarn install --frozen-lockfile --prefer-offline --network-concurrency 1
       - save_cache:
           name: Save Yarn Cache
-          key: yarn-i18n-v4-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
+          key: yarn-i18n-v4-cache-v{{ .Environment.CACHE_TRIGGER_VERSION }}-job-{{ .Environment.CIRCLE_JOB }}-{{ checksum "yarn.lock" }}
           paths:
             - node_modules
             - i18n-cache/data
@@ -112,34 +112,37 @@ jobs:
     - restore_cache:
         name: Restore Dependencies Cache
         keys:
-        - dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}-{{
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}-{{
           checksum "yarn.lock" }}
-        - dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}
-        - dependencies-v2-
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}
+        - dependencies-v3-{{ checksum "ios/Gemfile.lock" }}
+        - dependencies-v3-
     - run:
         name: Yarn preios (if needed)
-        command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app || yarn preios
+        command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app || yarn preios
     - save_cache:
         name: Save Dependencies Cache
-        key: dependencies-v2-{{ checksum "react-native-aztec/ios/Cartfile.resolved" }}-{{
+        key: dependencies-v3-{{ checksum "ios/Gemfile.lock" }}-{{ checksum "ios/Podfile.lock" }}-{{
           checksum "yarn.lock" }}
         paths:
-        - react-native-aztec/ios/Carthage
-        - ~/.rncache
+        - ios/Pods
+        - ~/Library/Caches/CocoaPods
+        - ~/.cocoapods/repos/trunk
+        - ios/vendor
     - run:
         name: Build (if needed)
-        command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app || yarn react-native run-ios --configuration Release --no-packager
+        command: test -e ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app || yarn react-native run-ios --configuration Release --no-packager
     - run:
         name: Bundle iOS
         command: yarn test:e2e:bundle:ios
     - run:
         name: Generate .app file for testing
-        command: WORK_DIR=$(pwd) && cd ./ios/build/gutenberg/Build/Products/Release-iphonesimulator && zip -r $WORK_DIR/ios/Gutenberg.app.zip gutenberg.app
+        command: WORK_DIR=$(pwd) && cd ./ios/build/gutenberg/Build/Products/Release-iphonesimulator && zip -r $WORK_DIR/ios/GutenbergDemo.app.zip GutenbergDemo.app
     - run:
         name: Upload .app to sauce labs
         command: |
           source bin/sauce-pre-upload.sh
-          curl -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY" -X POST -H "Content-Type: application/octet-stream" https://saucelabs.com/rest/v1/storage/automattic/Gutenberg-$SAUCE_FILENAME.app.zip?overwrite=true --data-binary @./ios/Gutenberg.app.zip
+          curl -u "$SAUCE_USERNAME:$SAUCE_ACCESS_KEY" -X POST -H "Content-Type: application/octet-stream" https://saucelabs.com/rest/v1/storage/automattic/Gutenberg-$SAUCE_FILENAME.app.zip?overwrite=true --data-binary @./ios/GutenbergDemo.app.zip
     - run:
         name: Run Device Tests
         command: |
@@ -150,12 +153,12 @@ jobs:
         path: ./reports/test-results
     - run:
         name: Prepare build cache
-        command: rm ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app/main.jsbundle
+        command: rm ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app/main.jsbundle
     - save_cache:
         name: Save Build Cache
         key: ios-build-cache-{{ checksum "ios-checksums.txt" }}
         paths:
-          - ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app
+          - ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app
 
 workflows:
   gutenberg-mobile:

.eslintrc.js

@@ -28,7 +28,7 @@ module.exports = {
 		},
 		react: {
 			pragma: "React",
-			version: "16.8.3",
+			version: "detect",
 			flowVersion: "0.92.0",
 		},
 	},

.flowconfig

@@ -43,9 +43,6 @@
 <PROJECT_ROOT>/node_modules/jest-enzyme/.*
 <PROJECT_ROOT>/node_modules/enzyme-matchers/.*
 
-; Ignore react-native-recyclerview-list example app
-<PROJECT_ROOT>/node_modules/react-native-recyclerview-list/example
-
 ; Ignore immutable-js. See https://github.com/facebook/immutable-js/issues/1308
 <PROJECT_ROOT>/node_modules/immutable/.*
 

.gitignore

@@ -107,3 +107,8 @@ bin/wp-cli.phar
 
 # Report generated from jest-junit
 /junit.xml
+
+# Cocoapods
+
+ios/Pods
+ios/vendor

Gutenberg.podspec

@@ -19,8 +19,8 @@ Pod::Spec.new do |s|
   s.swift_version = '5.0'
 
   s.dependency 'React', react_native_version
+  s.dependency 'React-CoreModules', react_native_version
   s.dependency 'React-RCTImage', react_native_version
 
-  s.dependency 'WordPress-Aztec-iOS'
   s.dependency 'RNTAztecView'
 end

README.md

@@ -115,7 +115,7 @@ Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "R
 
 ## Writing and Running Unit Tests
 
-This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/wordpress-mobile/gutenberg-mobile/blob/develop/src/app/App.test.js). The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).
+This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/wordpress-mobile/gutenberg-mobile/blob/develop/src/index.test.js). The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).
 
 ## UI Tests
 

RELEASE-NOTES.txt

@@ -1,9 +1,19 @@
+1.22.0
+------
+* Make inserter to show options on long-press to add before/after
+
+1.21.0
+------
+* Reduced padding around text on Rich Text based blocks.
+* [Android] Improved stability on very long posts.
+
 1.20.0
 ------
 * Fix bug where image placeholders would sometimes not be shown
 * Fix crash on undo
 * Style fixes on the navigation UI
 * [iOS] Fix focus issue
+* New block: Shortcode. You can now create and edit Shortcode blocks in the editor.
 
 1.19.0
 ------

RNTAztecView.podspec

@@ -18,6 +18,6 @@ Pod::Spec.new do |s|
   s.xcconfig         = {'OTHER_LDFLAGS' => '-lxml2',
                         'HEADER_SEARCH_PATHS' => '/usr/include/libxml2'}
   s.dependency         'React-Core'
-  s.dependency         'WordPress-Aztec-iOS'
+  s.dependency         'WordPress-Aztec-iOS', '1.15.0'
 
 end

__device-tests__/gutenberg-editor-lists.test.js

@@ -63,6 +63,19 @@ describe( 'Gutenberg Editor tests for List block', () => {
 		await editorPage.verifyHtmlContent( testData.listHtml );
 	} );
 
+	it( 'should update format to ordered list, using toolbar button', async () => {
+		const listBlockElement = await editorPage.getListBlockAtPosition( 1 );
+
+		// Click List block to force EditText focus
+		await listBlockElement.click();
+
+		// Send a click on the order list format button
+		await editorPage.clickOrderedListToolBarButton();
+
+		// switch to html and verify html
+		await editorPage.verifyHtmlContent( testData.listHtmlOrdered );
+	} );
+
 	afterAll( async () => {
 		if ( ! isLocalEnvironment() ) {
 			driver.sauceJobStatus( allPassed );

__device-tests__/gutenberg-editor-paragraph.test.js

@@ -13,6 +13,7 @@ import {
 	clickBeginningOfElement,
 	stopDriver,
 	isAndroid,
+	swipeUp,
 } from './helpers/utils';
 import testData from './helpers/test-data';
 
@@ -62,7 +63,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, testData.shortText );
 		const textViewElement = await editorPage.getTextViewForParagraphBlock( paragraphBlockElement );
 		await clickMiddleOfElement( driver, textViewElement );
-		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, '\n' );
+		await editorPage.sendTextToParagraphBlock( paragraphBlockElement, '\n', false );
 		expect( await editorPage.hasParagraphBlockAtPosition( 1 ) && await editorPage.hasParagraphBlockAtPosition( 2 ) )
 			.toBe( true );
 
@@ -115,6 +116,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 		await editorPage.sendTextToParagraphBlockAtPosition( 1, testData.longText );
 
 		for ( let i = 3; i > 0; i-- ) {
+			await swipeUp( driver );
 			await editorPage.removeParagraphBlockAtPosition( i );
 		}
 	} );

__device-tests__/helpers/test-data.js

@@ -11,6 +11,9 @@ exports.listItem2 = `Honey`;
 exports.listHtml = `<!-- wp:list -->
 <ul><li>Milk</li><li>Honey</li></ul>
 <!-- /wp:list -->`;
+exports.listHtmlOrdered = `<!-- wp:list {"ordered":true} -->
+<ol><li>Milk</li><li>Honey</li></ol>
+<!-- /wp:list -->`;
 exports.listEndedHtml = `<!-- wp:list -->
 <ul><li>Milk</li></ul>
 <!-- /wp:list -->

__device-tests__/helpers/utils.js

@@ -29,7 +29,7 @@ const testEnvironment = process.env.TEST_ENV || defaultEnvironment;
 
 // Local App Paths
 const defaultAndroidAppPath = './android/app/build/outputs/apk/debug/app-debug.apk';
-const defaultIOSAppPath = './ios/build/gutenberg/Build/Products/Release-iphonesimulator/gutenberg.app';
+const defaultIOSAppPath = './ios/build/gutenberg/Build/Products/Release-iphonesimulator/GutenbergDemo.app';
 
 const localAndroidAppPath = process.env.ANDROID_APP_PATH || defaultAndroidAppPath;
 const localIOSAppPath = process.env.IOS_APP_PATH || defaultIOSAppPath;
@@ -116,28 +116,9 @@ const setupDriver = async () => {
 
 	await driver.setImplicitWaitTimeout( 2000 );
 	await timer( 3000 );
-	await driver.setOrientation( 'PORTRAIT' );
 
-	// Proxy driver to patch functions on Android
-	// This is needed to adapt to changes in the way accessibility ids are being
-	// assigned after migrating to AndroidX and React Native 0.60. See:
-	// https://github.com/wordpress-mobile/gutenberg-mobile/pull/1112#issuecomment-501165250
-	// for more details.
-	return new Proxy( driver, {
-		get: ( original, property ) => {
-			const propertiesToPatch = [
-				'elementByAccessibilityId',
-				'hasElementByAccessibilityId',
-			];
-			if ( isAndroid() && ( propertiesToPatch.includes( property ) ) ) {
-				return async function( value, cb ) {
-					// Add a comma and a space to all ids
-					return await original[ property ]( `${ value }, `, cb );
-				};
-			}
-			return original[ property ];
-		},
-	} );
+	await driver.setOrientation( 'PORTRAIT' );
+	return driver;
 };
 
 const stopDriver = async ( driver: wd.PromiseChainWebdriver ) => {
@@ -161,14 +142,51 @@ const stopDriver = async ( driver: wd.PromiseChainWebdriver ) => {
 	}
 };
 
-const typeString = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element, str: string, clear: boolean = false ) => {
+/*
+ * The 'clear' parameter is defaulted to true because not clearing the text requires Android to use ADB, which
+ * has demonstrated itself to be very flaky, particularly on CI. In other words, clear the view unless you absolutely
+ * have to append the new text and, in that case, append fewest number of characters possible.
+ */
+const typeString = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element, str: string, clear: boolean = true ) => {
+	if ( isAndroid() ) {
+		await typeStringAndroid( driver, element, str, clear );
+	} else {
+		await typeStringIos( driver, element, str, clear );
+	}
+};
+
+const typeStringIos = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element, str: string, clear: boolean ) => {
 	if ( clear ) {
 		await element.clear();
 	}
+	await element.type( str );
+};
 
-	if ( isAndroid() ) {
-		const paragraphs = str.split( '\n' );
+const typeStringAndroid = async ( driver: wd.PromiseChainWebdriver, element: wd.PromiseChainWebdriver.Element, str: string, clear: boolean ) => {
+	if ( str in strToKeycode ) {
+		return await driver.pressKeycode( strToKeycode[ str ] );
+	} else if ( clear ) {
+		/*
+		 * On Android `element.type` deletes the contents of the EditText before typing and, unfortunately,
+		 * with our blocks it also deletes the block entirely. We used to avoid this by using adb to enter
+		 * long text along these lines:
+		 *         await driver.execute( 'mobile: shell', { command: 'input',
+		 *                                                  args: [ 'text', 'text I want to enter...' ] } )
+		 * but using adb in this way proved to be very flakey (frequently all of the text would not get entered,
+		 * particularly on CI). We are now using the `type` approach again, but adding a space to the block to
+		 * insure it is not empty, which avoids the deletion of the block when `type` executes.
+		 *
+		 * Note that this approach does not allow appending text to the text in a block on account
+		 * of `type` always clearing the block (on Android).
+		 */
+
+		await driver.execute( 'mobile: shell', { command: 'input', args: [ 'text', '%s' ] } );
+		await element.type( str );
+	} else {
+		// eslint-disable-next-line no-console
+		console.log( 'Warning: Using `adb shell input text` on Android which is rather flaky.' );
 
+		const paragraphs = str.split( '\n' );
 		for ( let i = 0; i < paragraphs.length; i++ ) {
 			const paragraph = paragraphs[ i ].replace( /[ ]/g, '%s' );
 			if ( paragraph in strToKeycode ) {
@@ -181,8 +199,6 @@ const typeString = async ( driver: wd.PromiseChainWebdriver, element: wd.Promise
 				await driver.pressKeycode( strToKeycode[ '\n' ] );
 			}
 		}
-	} else {
-		return await element.type( str );
 	}
 };