Merge branch 'master' into try/jetpack-stories-block-mobile

packages/block-library/src/media-text/deprecated.js

@@ -62,7 +62,7 @@ const baseAttributes = {
 	},
 	isStackedOnMobile: {
 		type: 'boolean',
-		default: false,
+		default: true,
 	},
 };
 

packages/block-library/src/missing/edit.native.js

@@ -69,6 +69,9 @@ export class UnsupportedBlockEdit extends Component {
 			<TouchableHighlight
 				onPress={ this.onHelpButtonPressed }
 				style={ styles.helpIconContainer }
+				accessibilityLabel={ __( 'Help button' ) }
+				accessibilityRole={ 'button' }
+				accessibilityHint={ __( 'Tap here to show help' ) }
 			>
 				<Icon
 					className="unsupported-icon-help"

packages/block-library/src/missing/test/__snapshots__/edit.native.js.snap

@@ -16,6 +16,9 @@ exports[`Missing block renders without crashing 1`] = `
   onStartShouldSetResponder={[Function]}
 >
   <View
+    accessibilityHint="Tap here to show help"
+    accessibilityLabel="Help button"
+    accessibilityRole="button"
     accessible={true}
     focusable={true}
     isTVSelectable={true}

packages/components/src/style.scss

@@ -40,7 +40,6 @@
 @import "./spinner/style.scss";
 @import "./tab-panel/style.scss";
 @import "./text-control/style.scss";
-@import "./textarea-control/style.scss";
 @import "./tip/style.scss";
 @import "./toggle-control/style.scss";
 @import "./toolbar/style.scss";

packages/components/src/textarea-control/index.js

@@ -7,6 +7,7 @@ import { useInstanceId } from '@wordpress/compose';
  * Internal dependencies
  */
 import BaseControl from '../base-control';
+import { StyledTextarea } from './styles/textarea-control-styles';
 
 export default function TextareaControl( {
 	label,
@@ -30,7 +31,7 @@ export default function TextareaControl( {
 			help={ help }
 			className={ className }
 		>
-			<textarea
+			<StyledTextarea
 				className="components-textarea-control__input"
 				id={ id }
 				rows={ rows }

packages/components/src/textarea-control/styles/textarea-control-styles.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { inputControl } from '../../utils/input';
+
+export const StyledTextarea = styled.textarea`
+	width: 100%;
+	${ inputControl }
+`;

packages/components/src/utils/breakpoint-values.js

@@ -0,0 +1,10 @@
+export default {
+	huge: '1440px',
+	wide: '1280px',
+	'x-large': '1080px',
+	large: '960px', // admin sidebar auto folds
+	medium: '782px', // adminbar goes big
+	small: '600px',
+	mobile: '480px',
+	'zoomed-in': '280px',
+};

packages/components/src/utils/breakpoint.js

@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import breakpoints from './breakpoint-values';
+
+/**
+ * @param {keyof breakpoints} point
+ * @return {string} Media query declaration.
+ */
+export const breakpoint = ( point ) =>
+	`@media (min-width: ${ breakpoints[ point ] })`;

packages/components/src/utils/colors-values.js

@@ -58,6 +58,7 @@ export const DARK_GRAY = {
 	200: '#7e8993',
 	150: '#8d96a0', // Lightest gray that can be used for AA non-text contrast.
 	100: '#8f98a1',
+	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
 };
 
 export const DARK_OPACITY = {
@@ -95,6 +96,7 @@ export const LIGHT_GRAY = {
 	300: '#edeff0',
 	200: '#f3f4f5',
 	100: '#f8f9f9',
+	placeholder: rgba( BASE.white, 0.65 ),
 };
 
 export const LIGHT_OPACITY_LIGHT = {

packages/components/src/utils/config-values.js

@@ -0,0 +1,6 @@
+export default {
+	radiusBlockUi: '2px',
+	borderWidth: '1px',
+	borderWidthFocus: '1.5px',
+	borderWidthTab: '4px',
+};

packages/components/src/utils/config.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import CONFIG from './config-values';
+
+/**
+ * @param {keyof CONFIG} name The variable name
+ * @return {string} The variable
+ */
+export const config = ( name ) => CONFIG[ name ];

packages/components/src/utils/font-values.js

@@ -1,14 +1,9 @@
-const DEFAULT = {
-	fontFamily:
+export default {
+	'default.fontFamily':
 		"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
-	fontSize: '13px',
-};
+	'default.fontSize': '13px',
 
-const HELP_TEXT = {
-	fontSize: '12px',
-};
+	'helpText.fontSize': '12px',
 
-export default {
-	default: DEFAULT,
-	helpText: HELP_TEXT,
+	mobileTextMinFontSize: '16px',
 };

packages/components/src/utils/font.js

@@ -8,6 +8,11 @@ import { get } from 'lodash';
  */
 import FONT from './font-values';
 
+/**
+ *
+ * @param {keyof FONT} value Path of value from `FONT`
+ * @return {string} Font rule value
+ */
 export function font( value ) {
 	return get( FONT, value, '' );
 }

packages/components/src/utils/input/base.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { reduceMotion } from '../reduce-motion';
+import { config } from '../config';
+import { color } from '../colors';
+
+export const inputStyleNeutral = css`
+	box-shadow: 0 0 0 transparent;
+	transition: box-shadow 0.1s linear;
+	border-radius: ${ config( 'radiusBlockUi' ) };
+	border: ${ config( 'borderWidth' ) } solid ${ color( 'ui.border' ) };
+	${ reduceMotion( 'transition' ) }
+`;
+
+export const inputStyleFocus = css`
+	border-color: var( --wp-admin-theme-color );
+	box-shadow: 0 0 0
+		calc( ${ config( 'borderWidthFocus' ) } - ${ config( 'borderWidth' ) } )
+		var( --wp-admin-theme-color );
+
+	// Windows High Contrast mode will show this outline, but not the box-shadow.
+	outline: 2px solid transparent;
+`;

packages/components/src/utils/input/index.js

@@ -0,0 +1 @@
+export * from './input-control';

packages/components/src/utils/input/input-control.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/core';
+
+/**
+ * Internal dependencies
+ */
+import { inputStyleNeutral, inputStyleFocus } from './base';
+import { font } from '../font';
+import { color } from '../colors';
+import { breakpoint } from '../breakpoint';
+
+export const inputControl = css`
+	font-family: ${ font( 'default.fontFamily' ) };
+	padding: 6px 8px;
+	${ inputStyleNeutral };
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: ${ font( 'mobileTextMinFontSize' ) };
+	/* Override core line-height. To be reviewed. */
+	line-height: normal;
+
+	${ breakpoint( 'small' ) } {
+		font-size: ${ font( 'default.fontSize' ) };
+		/* Override core line-height. To be reviewed. */
+		line-height: normal;
+	}
+
+	&:focus {
+		${ inputStyleFocus }
+	}
+
+	// Use opacity to work in various editor styles.
+	&::-webkit-input-placeholder {
+		color: ${ color( 'darkGray.placeholder' ) };
+	}
+
+	&::-moz-placeholder {
+		opacity: 1; // Necessary because Firefox reduces this from 1.
+		color: ${ color( 'darkGray.placeholder' ) };
+	}
+
+	&:-ms-input-placeholder {
+		color: ${ color( 'darkGray.placeholder' ) };
+	}
+
+	.is-dark-theme & {
+		&::-webkit-input-placeholder {
+			color: ${ color( 'lightGray.placeholder' ) };
+		}
+
+		&::-moz-placeholder {
+			opacity: 1; // Necessary because Firefox reduces this from 1.
+			color: ${ color( 'lightGray.placeholder' ) };
+		}
+
+		&:-ms-input-placeholder {
+			color: ${ color( 'lightGray.placeholder' ) };
+		}
+	}
+`;

packages/components/src/utils/reduce-motion.js

@@ -1,7 +1,7 @@
 /**
  * Allows users to opt-out of animations via OS-level preferences.
  *
- * @param {string} prop CSS Property name
+ * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name
  * @return {string} Generated CSS code for the reduced style
  */
 export function reduceMotion( prop = 'transition' ) {

packages/components/src/utils/style-mixins.js

@@ -3,3 +3,5 @@ export { reduceMotion } from './reduce-motion';
 export { rtl, getRTL, useRTL } from './rtl';
 export { space } from './space';
 export { font } from './font';
+export { breakpoint } from './breakpoint';
+export { config } from './config';

packages/react-native-editor/__device-tests__/gutenberg-editor-paragraph.test.js

@@ -171,7 +171,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 	// Restricting these test to Android because I was not able to update the html on iOS
 	if ( isAndroid() ) {
 		it( 'should be able to merge blocks with unknown html elements', async () => {
-			await editorPage.setHtmlContentAndroid( `
+			await editorPage.setHtmlContent( `
 <!-- wp:paragraph -->
 <p><unknownhtmlelement>abc</unknownhtmlelement>D</p>
 <!-- /wp:paragraph -->
@@ -205,7 +205,7 @@ describe( 'Gutenberg Editor tests for Paragraph Block', () => {
 
 		// Based on https://github.com/wordpress-mobile/gutenberg-mobile/pull/1507
 		it( 'should handle multiline paragraphs from web', async () => {
-			await editorPage.setHtmlContentAndroid( `
+			await editorPage.setHtmlContent( `
 	<!-- wp:paragraph -->
 	<p>multiple lines<br><br></p>
 	<!-- /wp:paragraph -->

packages/react-native-editor/__device-tests__/gutenberg-editor-paste.test.js

@@ -91,7 +91,7 @@ describe( 'Gutenberg Editor paste tests', () => {
 
 	it( 'copies styled text from one paragraph block and pastes in another', async () => {
 		// create paragraph block with styled text by editing html
-		await editorPage.setHtmlContentAndroid( testData.pasteHtmlText );
+		await editorPage.setHtmlContent( testData.pasteHtmlText );
 		const paragraphBlockElement = await editorPage.getBlockAtPosition(
 			paragraphBlockName
 		);

packages/react-native-editor/__device-tests__/gutenberg-editor-unsupported-blocks.test.js

@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import EditorPage from './pages/editor-page';
+import { setupDriver, isLocalEnvironment, stopDriver } from './helpers/utils';
+import testData from './helpers/test-data';
+
+jest.setTimeout( 1000000 );
+
+describe( 'Gutenberg Editor Unsupported Block Editor Tests', () => {
+	let driver;
+	let editorPage;
+	let allPassed = true;
+
+	// Use reporter for setting status for saucelabs Job
+	if ( ! isLocalEnvironment() ) {
+		const reporter = {
+			specDone: async ( result ) => {
+				allPassed = allPassed && result.status !== 'failed';
+			},
+		};
+
+		jasmine.getEnv().addReporter( reporter );
+	}
+
+	beforeAll( async () => {
+		driver = await setupDriver();
+		editorPage = new EditorPage( driver );
+	} );
+
+	it( 'should be able to see visual editor', async () => {
+		await expect( editorPage.getBlockList() ).resolves.toBe( true );
+	} );
+
+	it( 'should be able to open the unsupported block web view editor', async () => {
+		await editorPage.setHtmlContent( testData.unsupportedBlockHtml );
+
+		const firstVisibleBlock = await editorPage.getFirstBlockVisible();
+		await firstVisibleBlock.click();
+
+		const helpButton = await editorPage.getUnsupportedBlockHelpButton();
+		await helpButton.click();
+
+		const editButton = await editorPage.getUnsupportedBlockBottomSheetEditButton();
+		await editButton.click();
+
+		await expect(
+			editorPage.getUnsupportedBlockWebView()
+		).resolves.toBeTruthy();
+	} );
+
+	afterAll( async () => {
+		if ( ! isLocalEnvironment() ) {
+			driver.sauceJobStatus( allPassed );
+		}
+		await stopDriver( driver );
+	} );
+} );

packages/react-native-editor/__device-tests__/helpers/test-data.js

@@ -98,3 +98,8 @@ exports.imageShorteHtml = `<!-- wp:image {"id":1,"sizeslug":"large"} -->
 <!-- wp:paragraph -->
 <p>rock music approaches at high velocity.</p>
 <!-- /wp:paragraph -->`;
+
+exports.unsupportedBlockHtml = `<!-- wp:audio -->
+<figure class="wp-block-audio"><audio controls src="https://www2.cs.uic.edu/~i101/SoundFiles/StarWars60.wav"></audio></figure>
+<!-- /wp:audio -->
+`;