Merge branch 'master' of https://github.com/WordPress/gutenberg into …

…rnmobile/fix-merge-content-not-refreshed-UI

* 'master' of https://github.com/WordPress/gutenberg:
  Add missing tests for Format API code (#11562)
  chore: Improve undo/redo no-op (#11428)
  Fix: Contrast checker: Consider fontSize large when size >=  24px instead of >= 18px (#9268)

packages/block-library/src/button/edit.js

@@ -114,7 +114,9 @@ class ButtonEdit extends Component {
 						>
 							<ContrastChecker
 								{ ...{
-									isLargeText: true,
+									// Text is considered large if font size is greater or equal to 18pt or 24px,
+									// currently that's not the case for button.
+									isLargeText: false,
 									textColor: textColor.color,
 									backgroundColor: backgroundColor.color,
 									fallbackBackgroundColor,

packages/editor/src/components/contrast-checker/index.js

@@ -13,7 +13,7 @@ function ContrastChecker( {
 	backgroundColor,
 	fallbackBackgroundColor,
 	fallbackTextColor,
-	fontSize,
+	fontSize, // font size value in pixels
 	isLargeText,
 	textColor,
 } ) {
@@ -27,7 +27,7 @@ function ContrastChecker( {
 	if ( hasTransparency || tinycolor.isReadable(
 		tinyBackgroundColor,
 		tinyTextColor,
-		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 18 ) ? 'large' : 'small' ) }
+		{ level: 'AA', size: ( isLargeText || ( isLargeText !== false && fontSize >= 24 ) ? 'large' : 'small' ) }
 	) ) {
 		return null;
 	}

packages/editor/src/components/contrast-checker/test/__snapshots__/index.js.snap

@@ -87,7 +87,7 @@ exports[`ContrastChecker should render messages when the textColor is valid, but
 exports[`ContrastChecker should take into consideration the font size passed 1`] = `
 <ContrastChecker
   backgroundColor="#C44B4B"
-  fontSize={17}
+  fontSize={23}
   textColor="#000000"
 >
   <div
@@ -141,7 +141,7 @@ exports[`ContrastChecker should take into consideration wherever text is large o
 exports[`ContrastChecker should use isLargeText to make decisions if both isLargeText and fontSize props are passed 1`] = `
 <ContrastChecker
   backgroundColor="#C44B4B"
-  fontSize={18}
+  fontSize={24}
   isLargeText={false}
   textColor="#000000"
 >

packages/editor/src/components/contrast-checker/test/index.js

@@ -115,7 +115,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 17 }
+				fontSize={ 23 }
 			/>
 		);
 
@@ -125,7 +125,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 18 }
+				fontSize={ 24 }
 			/>
 		);
 
@@ -137,7 +137,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 17 }
+				fontSize={ 23 }
 				isLargeText={ true }
 			/>
 		);
@@ -148,7 +148,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				fontSize={ 18 }
+				fontSize={ 24 }
 				isLargeText={ false }
 			/>
 		);

packages/editor/src/components/editor-history/redo.js

@@ -13,8 +13,11 @@ function EditorHistoryRedo( { hasRedo, redo } ) {
 			icon="redo"
 			label={ __( 'Redo' ) }
 			shortcut={ displayShortcut.primaryShift( 'z' ) }
+			// If there are no redo levels we don't want to actually disable this
+			// button, because it will remove focus for keyboard users.
+			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasRedo }
-			onClick={ redo }
+			onClick={ hasRedo ? redo : undefined }
 			className="editor-history__redo"
 		/>
 	);
@@ -24,14 +27,7 @@ export default compose( [
 	withSelect( ( select ) => ( {
 		hasRedo: select( 'core/editor' ).hasEditorRedo(),
 	} ) ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		redo: () => {
-			// If there are no redo levels this is a no-op, because we don't actually
-			// disable the button.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			if ( ownProps.hasRedo ) {
-				dispatch( 'core/editor' ).redo();
-			}
-		},
+	withDispatch( ( dispatch ) => ( {
+		redo: dispatch( 'core/editor' ).redo,
 	} ) ),
 ] )( EditorHistoryRedo );

packages/editor/src/components/editor-history/undo.js

@@ -13,8 +13,11 @@ function EditorHistoryUndo( { hasUndo, undo } ) {
 			icon="undo"
 			label={ __( 'Undo' ) }
 			shortcut={ displayShortcut.primary( 'z' ) }
+			// If there are no undo levels we don't want to actually disable this
+			// button, because it will remove focus for keyboard users.
+			// See: https://github.com/WordPress/gutenberg/issues/3486
 			aria-disabled={ ! hasUndo }
-			onClick={ undo }
+			onClick={ hasUndo ? undo : undefined }
 			className="editor-history__undo"
 		/>
 	);
@@ -24,14 +27,7 @@ export default compose( [
 	withSelect( ( select ) => ( {
 		hasUndo: select( 'core/editor' ).hasEditorUndo(),
 	} ) ),
-	withDispatch( ( dispatch, ownProps ) => ( {
-		undo: () => {
-			// If there are no undo levels this is a no-op, because we don't actually
-			// disable the button.
-			// See: https://github.com/WordPress/gutenberg/issues/3486
-			if ( ownProps.hasUndo ) {
-				dispatch( 'core/editor' ).undo();
-			}
-		},
+	withDispatch( ( dispatch ) => ( {
+		undo: dispatch( 'core/editor' ).undo,
 	} ) ),
 ] )( EditorHistoryUndo );

packages/rich-text/src/insert-object.js

@@ -12,7 +12,7 @@ const OBJECT_REPLACEMENT_CHARACTER = '\ufffc';
  * removed. Indices are retrieved from the selection if none are provided.
  *
  * @param {Object} value          Value to modify.
- * @param {string} formatToInsert Format to insert as object.
+ * @param {Object} formatToInsert Format to insert as object.
  * @param {number} startIndex     Start index.
  * @param {number} endIndex       End index.
  *

packages/rich-text/src/store/test/actions.js

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { addFormatTypes, removeFormatTypes } from '../actions';
+
+describe( 'actions', () => {
+	describe( 'addFormatTypes', () => {
+		it( 'should cast format types as an array', () => {
+			const formatTypes = { name: 'core/test-format' };
+			const expected = {
+				type: 'ADD_FORMAT_TYPES',
+				formatTypes: [ formatTypes ],
+			};
+
+			expect( addFormatTypes( formatTypes ) ).toEqual( expected );
+		} );
+	} );
+
+	describe( 'removeFormatTypes', () => {
+		it( 'should cast format types as an array', () => {
+			const names = 'core/test-format';
+			const expected = {
+				type: 'REMOVE_FORMAT_TYPES',
+				names: [ names ],
+			};
+
+			expect( removeFormatTypes( names ) ).toEqual( expected );
+		} );
+	} );
+} );

packages/rich-text/src/store/test/selectors.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { getFormatTypes, getFormatType } from '../selectors';
+
+describe( 'selectors', () => {
+	const defaultState = deepFreeze( {
+		formatTypes: {
+			'core/test-format': { name: 'core/test-format' },
+			'core/test-format-2': { name: 'core/test-format-2' },
+		},
+	} );
+
+	describe( 'getFormatTypes', () => {
+		it( 'should get format types', () => {
+			const expected = [
+				{ name: 'core/test-format' },
+				{ name: 'core/test-format-2' },
+			];
+
+			expect( getFormatTypes( defaultState ) ).toEqual( expected );
+		} );
+	} );
+
+	describe( 'getFormatType', () => {
+		it( 'should get a format type', () => {
+			const expected = { name: 'core/test-format' };
+			const result = getFormatType( defaultState, 'core/test-format' );
+
+			expect( result ).toEqual( expected );
+		} );
+	} );
+} );

packages/rich-text/src/test/get-format-type.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getFormatType } from '../get-format-type';
+import { unregisterFormatType } from '../unregister-format-type';
+import { registerFormatType } from '../register-format-type';
+import { getFormatTypes } from '../get-format-types';
+
+describe( 'getFormatType', () => {
+	beforeAll( () => {
+		// Initialize the rich-text store.
+		require( '../store' );
+	} );
+
+	afterEach( () => {
+		getFormatTypes().forEach( ( format ) => {
+			unregisterFormatType( format.name );
+		} );
+	} );
+
+	it( 'should return all format type elements', () => {
+		const formatType = {
+			edit: noop,
+			title: 'format title',
+			keywords: [ 'one', 'two', 'three' ],
+			formatTestSetting: 'settingTestValue',
+			tagName: 'test',
+			className: null,
+		};
+
+		registerFormatType( 'core/test-format-with-settings', formatType );
+
+		expect( getFormatType( 'core/test-format-with-settings' ) ).toEqual( {
+			name: 'core/test-format-with-settings',
+			...formatType,
+		} );
+	} );
+} );

packages/rich-text/src/test/get-format-types.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { getFormatTypes } from '../get-format-types';
+import { unregisterFormatType } from '../unregister-format-type';
+import { registerFormatType } from '../register-format-type';
+
+describe( 'getFormatTypes', () => {
+	beforeAll( () => {
+		// Initialize the rich-text store.
+		require( '../store' );
+	} );
+
+	afterEach( () => {
+		getFormatTypes().forEach( ( format ) => {
+			unregisterFormatType( format.name );
+		} );
+	} );
+
+	it( 'should return an empty array at first', () => {
+		expect( getFormatTypes() ).toEqual( [] );
+	} );
+
+	it( 'should return all registered formats', () => {
+		const testFormat = {
+			edit: noop,
+			title: 'format title',
+			tagName: 'test',
+			className: null,
+		};
+		const testFormatWithSettings = {
+			edit: noop,
+			title: 'format title 2',
+			keywords: [ 'one', 'two', 'three' ],
+			tagName: 'test 2',
+			className: null,
+			formatTestSetting: 'settingTestValue',
+		};
+		registerFormatType( 'core/test-format', testFormat );
+		registerFormatType( 'core/test-format-with-settings', testFormatWithSettings );
+		expect( getFormatTypes() ).toEqual( [
+			{
+				name: 'core/test-format',
+				...testFormat,
+			},
+			{
+				name: 'core/test-format-with-settings',
+				...testFormatWithSettings,
+			},
+		] );
+	} );
+} );

packages/rich-text/src/test/insert-object.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
+/**
+ * Internal dependencies
+ */
+import { insertObject } from '../insert-object';
+import { getSparseArrayLength } from './helpers';
+import { OBJECT_REPLACEMENT_CHARACTER } from '../special-characters';
+
+describe( 'insert', () => {
+	const obj = { type: 'obj' };
+	const em = { type: 'em' };
+
+	it( 'should delete and insert', () => {
+		const record = {
+			formats: [ , , , , [ em ], [ em ], [ em ], , , , , , , ],
+			text: 'one two three',
+			start: 6,
+			end: 6,
+		};
+		const expected = {
+			formats: [ , , [ { ...obj, object: true } ], [ em ], , , , , , , ],
+			text: `on${ OBJECT_REPLACEMENT_CHARACTER }o three`,
+			start: 3,
+			end: 3,
+		};
+		const result = insertObject( deepFreeze( record ), obj, 2, 6 );
+
+		expect( result ).toEqual( expected );
+		expect( result ).not.toBe( record );
+		expect( getSparseArrayLength( result.formats ) ).toBe( 2 );
+	} );
+} );