@wordpress/components 19.5.0 → 19.6.0

package/src/higher-order/with-filters/test/index.js

@@ -22,7 +22,7 @@ const assertExpectedHtml = ( wrapper, expectedHTML ) => {
 	expect( element.outerHTML ).toBe( expectedHTML );
 };
 
-// this is needed because TestUtils does not accept a stateless component.
+// This is needed because TestUtils does not accept a stateless component.
 // anything run through a HOC ends up as a stateless component.
 const getTestComponent = ( WrappedComponent ) => {
 	class TestComponent extends Component {

package/src/higher-order/with-focus-outside/test/index.js

@@ -36,7 +36,7 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	// this is needed because TestUtils does not accept a stateless component.
+	// This is needed because TestUtils does not accept a stateless component.
 	// anything run through a HOC ends up as a stateless component.
 	const getTestComponent = ( WrappedComponent, props ) => {
 		class TestComponent extends Component {

package/src/higher-order/with-notices/index.js

@@ -95,7 +95,7 @@ export default createHigherOrderComponent( ( OriginalComponent ) => {
 
 	let isForwardRef;
 	const { render } = OriginalComponent;
-	// Returns a forwardRef if OriginalComponent appears to be a forwardRef
+	// Returns a forwardRef if OriginalComponent appears to be a forwardRef.
 	if ( typeof render === 'function' ) {
 		isForwardRef = true;
 		return forwardRef( Component );

package/src/higher-order/with-notices/test/index.js

@@ -24,7 +24,7 @@ import {
  */
 import withNotices from '..';
 
-// Implementation detail of Notice component used to query the dismissal button
+// Implementation detail of Notice component used to query the dismissal button.
 const stockDismissText = 'Dismiss this notice';
 
 function noticesFrom( list ) {
@@ -151,13 +151,13 @@ describe( 'withNotices rendering', () => {
 		const [ buttonRemoveFirst ] = getAllByLabelText( stockDismissText );
 		const getRemovalTarget = () =>
 			within( container ).getByText(
-				// the last item corresponds to the first notice in the DOM
+				// The last item corresponds to the first notice in the DOM.
 				messages[ messages.length - 1 ]
 			);
 		expect(
 			await waitForElementToBeRemoved( () => {
 				const target = getRemovalTarget();
-				// Removes the first notice in the DOM
+				// Removes the first notice in the DOM.
 				fireEvent.click( buttonRemoveFirst );
 				return target;
 			} ).then( () => true )

package/src/index.js

@@ -1,4 +1,4 @@
-// Primitives
+// Primitives.
 export {
 	SVG,
 	Path,
@@ -10,7 +10,7 @@ export {
 	BlockQuotation,
 } from '@wordpress/primitives';
 
-// Components
+// Components.
 export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';
 export {
 	default as Animate,
@@ -163,7 +163,7 @@ export { Truncate as __experimentalTruncate } from './truncate';
 export {
 	default as __experimentalUnitControl,
 	useCustomUnits as __experimentalUseCustomUnits,
-	parseUnit as __experimentalParseUnit,
+	parseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,
 } from './unit-control';
 export { View as __experimentalView } from './view';
 export { VisuallyHidden } from './visually-hidden';
@@ -179,7 +179,7 @@ export {
 export { default as __experimentalStyleProvider } from './style-provider';
 export { ZStack as __experimentalZStack } from './z-stack';
 
-// Higher-Order Components
+// Higher-Order Components.
 export {
 	default as navigateRegions,
 	useNavigateRegions as __unstableUseNavigateRegions,

package/src/index.native.js

@@ -62,7 +62,7 @@ export {
 } from './unit-control/utils';
 export { default as Disabled } from './disabled';
 
-// Higher-Order Components
+// Higher-Order Components.
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';
 export { default as withFallbackStyles } from './higher-order/with-fallback-styles';
 export { default as withFilters } from './higher-order/with-filters';
@@ -73,7 +73,7 @@ export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
 export * from './text';
 
-// Mobile Components
+// Mobile Components.
 export {
 	__unstableAutocompletionItemsFill,
 	__unstableAutocompletionItemsSlot,
@@ -113,7 +113,7 @@ export { default as AudioPlayer } from './mobile/audio-player';
 export { default as Badge } from './mobile/badge';
 export { default as Gridicons } from './mobile/gridicons';
 
-// Utils
+// Utils.
 export { colorsUtils } from './mobile/color-settings/utils';
 export {
 	WIDE_ALIGNMENTS,
@@ -121,7 +121,7 @@ export {
 	alignmentHelpers,
 } from './mobile/utils/alignments';
 
-// Hooks
+// Hooks.
 export {
 	convertUnitToMobile,
 	useConvertUnitToMobile,

package/src/input-control/input-base.tsx

@@ -72,7 +72,7 @@ export function InputBase(
 	const hideLabel = hideLabelFromVision || ! label;
 
 	return (
-		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions
+		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
 			{ ...props }
 			{ ...getUIFlexProps( labelPosition ) }

package/src/input-control/input-field.tsx

@@ -17,7 +17,7 @@ import type {
  * WordPress dependencies
  */
 import { forwardRef, useRef } from '@wordpress/element';
-import { UP, DOWN, ENTER } from '@wordpress/keycodes';
+import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -25,7 +25,6 @@ import type { WordPressComponentProps } from '../ui/context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
-import { isValueEmpty } from '../utils/values';
 import { useUpdateEffect } from '../utils';
 import type { InputFieldProps } from './types';
 
@@ -56,9 +55,9 @@ function InputField(
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		// State
+		// State.
 		state,
-		// Actions
+		// Actions.
 		change,
 		commit,
 		drag,
@@ -112,11 +111,7 @@ function InputField(
 		 */
 		if ( isPressEnterToChange && isDirty ) {
 			wasDirtyOnBlur.current = true;
-			if ( ! isValueEmpty( value ) ) {
-				handleOnCommit( event );
-			} else {
-				reset( valueProp, event );
-			}
+			handleOnCommit( event );
 		}
 	};
 
@@ -162,6 +157,13 @@ function InputField(
 					handleOnCommit( event );
 				}
 				break;
+
+			case ESCAPE:
+				if ( isPressEnterToChange && isDirty ) {
+					event.preventDefault();
+					reset( valueProp, event );
+				}
+				break;
 		}
 	};
 
@@ -191,6 +193,7 @@ function InputField(
 			}
 		},
 		{
+			axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y',
 			threshold: dragThreshold,
 			enabled: isDragEnabled,
 			pointer: { capture: false },

package/src/input-control/styles/input-control-styles.tsx

@@ -212,6 +212,7 @@ export const Input = styled.input< InputProps >`
 		box-shadow: none !important;
 		color: ${ COLORS.black };
 		display: block;
+		font-family: inherit;
 		margin: 0;
 		outline: none;
 		width: 100%;

package/src/input-control/test/index.js

@@ -77,10 +77,10 @@ describe( 'InputControl', () => {
 			input.focus();
 			fireEvent.change( input, { target: { value: 'two' } } );
 
-			// Ensuring <InputControl /> is controlled
+			// Ensuring <InputControl /> is controlled.
 			fireEvent.blur( input );
 
-			// Updating the value
+			// Updating the value.
 			rerender( <InputControl value="three" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'three' );
@@ -103,12 +103,12 @@ describe( 'InputControl', () => {
 
 			// Assuming <InputControl /> is controlled (not focused)
 
-			// Updating the value
+			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'New' );
 
-			// Change it back to the original value
+			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
 			expect( input.value ).toBe( 'Original' );

package/src/isolated-event-container/index.js

@@ -14,7 +14,7 @@ export default forwardRef( ( { children, ...props }, ref ) => {
 	} );
 
 	// Disable reason: this stops certain events from propagating outside of the component.
-	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	// - onMouseDown is disabled as this can cause interactions with other DOM elements.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...props } ref={ ref } onMouseDown={ stopPropagation }>

package/src/item-group/test/index.js

@@ -7,7 +7,6 @@ import { fireEvent, render, screen } from '@testing-library/react';
  * Internal dependencies
  */
 import { Item, ItemGroup } from '..';
-//  import { CONFIG } from '../../utils';
 
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -19,18 +19,18 @@ if (
 // Context in BottomSheet is necessary for controlling the
 // transition flow between subsheets and replacing a content inside them
 export const BottomSheetContext = createContext( {
-	// Specifies whether content is currently scrolling
+	// Specifies whether content is currently scrolling.
 	isBottomSheetContentScrolling: false,
-	// Function called to enable scroll within bottom sheet
+	// Function called to enable scroll within bottom sheet.
 	shouldEnableBottomSheetScroll: () => {},
 	// Function called to enable/disable bottom sheet max height.
 	// E.g. used to extend bottom sheet on full screen in ColorPicker,
 	// which is helpful on small devices with set the largest font/display size.
 	shouldEnableBottomSheetMaxHeight: () => {},
-	// Callback that is called on closing bottom sheet
+	// Callback that is called on closing bottom sheet.
 	onHandleClosingBottomSheet: () => {},
 	// Android only: Function called to control android hardware back button functionality
-	// Return true if the bottom-sheet default close action shouldn't be called
+	// Return true if the bottom-sheet default close action shouldn't be called.
 	onHandleHardwareButtonPress: () => {},
 	// Toggle full-screen styles and dimensions
 	setIsFullScreen: () => {},

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-container.native.js

@@ -87,7 +87,7 @@ function BottomSheetNavigationContainer( {
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight
+			// The screen is fullHeight.
 			if (
 				typeof height === 'string' &&
 				typeof height !== typeof currentHeight

package/src/mobile/bottom-sheet/cell.native.js

@@ -190,7 +190,7 @@ class BottomSheetCell extends Component {
 		};
 
 		const separatorStyle = () => {
-			//eslint-disable-next-line @wordpress/no-unused-vars-before-return
+			// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 			const defaultSeparatorStyle = this.props.getStylesFromColorScheme(
 				styles.separator,
 				styles.separatorDark

package/src/mobile/bottom-sheet/index.native.js

@@ -121,9 +121,9 @@ class BottomSheet extends Component {
 
 		if ( duration && easing ) {
 			// This layout animation is the same as the React Native's KeyboardAvoidingView component.
-			// Reference: https://github.com/facebook/react-native/blob/266b21baf35e052ff28120f79c06c4f6dddc51a9/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119-L128
+			// Reference: https://github.com/facebook/react-native/blob/266b21baf35e052ff28120f79c06c4f6dddc51a9/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L119-L128.
 			const animationConfig = {
-				// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
+				// We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m.
 				duration: duration > 10 ? duration : 10,
 				type: LayoutAnimation.Types[ easing ] || 'keyboard',
 			};
@@ -151,7 +151,7 @@ class BottomSheet extends Component {
 			// preexisting bug: https://git.io/JMPCV
 			// this.performRegularLayoutAnimation( {
 			// 	useLastLayoutAnimation: false,
-			// } );
+			// } );.
 		}
 	}
 
@@ -195,7 +195,7 @@ class BottomSheet extends Component {
 		);
 
 		// 'Will' keyboard events are not available on Android.
-		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener
+		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener.
 		this.keyboardShowListener = Keyboard.addListener(
 			Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
 			this.keyboardShow
@@ -249,7 +249,7 @@ class BottomSheet extends Component {
 		const statusBarHeight =
 			Platform.OS === 'android' ? StatusBar.currentHeight : 0;
 
-		// `maxHeight` when modal is opened along with a keyboard
+		// `maxHeight` when modal is opened along with a keyboard.
 		const maxHeightWithOpenKeyboard =
 			0.95 *
 			( Dimensions.get( 'window' ).height -
@@ -257,7 +257,7 @@ class BottomSheet extends Component {
 				statusBarHeight -
 				this.headerHeight );
 
-		// In landscape orientation, set `maxHeight` to ~96% of the height
+		// In landscape orientation, set `maxHeight` to ~96% of the height.
 		if ( width > height ) {
 			this.setState( {
 				maxHeight: Math.min(
@@ -265,7 +265,7 @@ class BottomSheet extends Component {
 					maxHeightWithOpenKeyboard
 				),
 			} );
-			// In portrait orientation, set `maxHeight` to ~59% of the height
+			// In portrait orientation, set `maxHeight` to ~59% of the height.
 		} else {
 			this.setState( {
 				maxHeight: Math.min(
@@ -419,7 +419,7 @@ class BottomSheet extends Component {
 		const panResponder = PanResponder.create( {
 			onMoveShouldSetPanResponder: ( evt, gestureState ) => {
 				// 'swiping-to-close' option is temporarily and partially disabled
-				//	on Android ( swipe / drag is still available in the top most area - near drag indicator)
+				// on Android ( swipe / drag is still available in the top most area - near drag indicator).
 				if ( Platform.OS === 'ios' ) {
 					// Activates swipe down over child Touchables if the swipe is long enough.
 					// With this we can adjust sensibility on the swipe vs tap gestures.
@@ -449,7 +449,7 @@ class BottomSheet extends Component {
 			listStyle = { maxHeight };
 
 			// Allow setting a "static" height of the bottom sheet
-			// by settting the min height to the max height.
+			// by setting the min height to the max height.
 			if ( this.props.setMinHeightToMaxHeight ) {
 				listStyle.minHeight = maxHeight;
 			}
@@ -495,12 +495,12 @@ class BottomSheet extends Component {
 		);
 
 		const showDragIndicator = () => {
-			// if iOS or not fullscreen show the drag indicator
+			// If iOS or not fullscreen show the drag indicator.
 			if ( Platform.OS === 'ios' || ! this.state.isFullScreen ) {
 				return true;
 			}
 
-			// Otherwise check the allowDragIndicator
+			// Otherwise check the allowDragIndicator.
 			return this.props.allowDragIndicator;
 		};
 

package/src/mobile/bottom-sheet/link-cell.native.js

@@ -22,7 +22,7 @@ export default function LinkCell( {
 		<Cell
 			icon={ showIcon && link }
 			label={ __( 'Link to' ) }
-			// since this is not actually editable, we treat value as a placeholder
+			// Since this is not actually editable, we treat value as a placeholder.
 			value={ valueMask || value || __( 'Search or type URL' ) }
 			valueStyle={
 				!! ( value || valueMask ) ? undefined : placeholderColor

package/src/mobile/bottom-sheet/link-suggestion-item-cell.native.js

@@ -38,7 +38,7 @@ const getSummaryForType = ( type ) => {
 	}
 };
 
-// we use some Cell styles here with a column flex-direction
+// We use some Cell styles here with a column flex-direction.
 function LinkSuggestionItemCell( { suggestion, onLinkPicked, ...props } ) {
 	const { title: contentTitle, url, type, isDirectEntry } = suggestion;
 	const title = isDirectEntry ? url : contentTitle;

package/src/mobile/bottom-sheet/nav-bar/back-button.native.js

@@ -89,6 +89,6 @@ function DismissButton( { onPress, iosText } ) {
 }
 
 Button.Back = BackButton;
-Button.Dismiss = DismissButton; // Cancel or Close Button
+Button.Dismiss = DismissButton; // Cancel or Close Button.
 
 export default Button;

package/src/mobile/global-styles-context/utils.native.js

@@ -21,7 +21,7 @@ export const BLOCK_STYLE_ATTRIBUTES = [
 	'fontSize',
 ];
 
-// Mapping style properties name to native
+// Mapping style properties name to native.
 const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 	textColor: 'color',
 	text: 'color',
@@ -51,7 +51,7 @@ export function getBlockPaddings(
 		return blockPaddings;
 	}
 
-	// Prevent adding extra paddings to inner blocks without background colors
+	// Prevent adding extra paddings to inner blocks without background colors.
 	if (
 		mergedStyle?.padding &&
 		! wrapperPropsStyle?.backgroundColor &&
@@ -74,7 +74,7 @@ export function getBlockColors(
 	const customBlockStyles = blockStyleAttributes?.style?.color || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
 
-	// Global styles colors
+	// Global styles colors.
 	if ( blockGlobalStyles?.color ) {
 		Object.entries( blockGlobalStyles.color ).forEach(
 			( [ key, value ] ) => {
@@ -91,7 +91,7 @@ export function getBlockColors(
 			baseGlobalStyles?.styles?.color?.text;
 	}
 
-	// Global styles elements
+	// Global styles elements.
 	if ( blockGlobalStyles?.elements ) {
 		const linkColor = blockGlobalStyles.elements?.link?.color?.text;
 		const styleKey = BLOCK_STYLE_ATTRIBUTES_MAPPING.link;
@@ -101,7 +101,7 @@ export function getBlockColors(
 		}
 	}
 
-	// Custom colors
+	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
 		const isCustomColor = startsWith( value, '#' );
 		let styleKey = key;
@@ -123,7 +123,7 @@ export function getBlockColors(
 		}
 	} );
 
-	// Color placeholder
+	// Color placeholder.
 	if ( blockStyles?.color ) {
 		blockStyles[ BLOCK_STYLE_ATTRIBUTES_MAPPING.placeholder ] =
 			blockStyles.color;
@@ -142,7 +142,7 @@ export function getBlockTypography(
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
 
-	// Global styles
+	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
 		const fontSize = blockGlobalStyles?.typography?.fontSize;
 		const lineHeight = blockGlobalStyles?.typography?.lineHeight;
@@ -176,7 +176,7 @@ export function getBlockTypography(
 		}
 	}
 
-	// Custom styles
+	// Custom styles.
 	if ( customBlockStyles?.fontSize ) {
 		typographyStyles.fontSize = customBlockStyles?.fontSize;
 	}
@@ -225,7 +225,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 					return get( customValuesData, path );
 				}
 
-				// Check for camelcase properties
+				// Check for camelcase properties.
 				return get( customValuesData, [
 					...path.slice( 0, path.length - 1 ),
 					camelCase( path[ path.length - 1 ] ),
@@ -281,7 +281,7 @@ export function getMappedValues( features, palette ) {
  * @return {Object} normalized sizes.
  */
 function normalizeFontSizes( fontSizes ) {
-	// Adds normalized PX values for each of the different keys
+	// Adds normalized PX values for each of the different keys.
 	if ( ! fontSizes ) {
 		return fontSizes;
 	}

package/src/mobile/gradient/index.native.js

@@ -60,7 +60,7 @@ export function getGradientColorGroup( gradientValue ) {
 	const excludeSideOrCorner = /linear-gradient\(to\s+([a-z\s]+,)/;
 
 	// Parser has some difficulties with angle defined as a side or corner (e.g. `to left`)
-	// so it's going to be excluded in order to matching color groups
+	// so it's going to be excluded in order to matching color groups.
 	const modifiedGradientValue = gradientValue.replace(
 		excludeSideOrCorner,
 		'linear-gradient('
@@ -151,7 +151,7 @@ function Gradient( {
 			<SVG>
 				<Defs>
 					<RadialGradient
-						//eslint-disable-next-line no-restricted-syntax
+						// eslint-disable-next-line no-restricted-syntax
 						id="radialGradient"
 						gradientUnits="userSpaceOnUse"
 						rx="70%"

package/src/mobile/html-text-input/container.ios.js

@@ -23,9 +23,9 @@ class HTMLInputContainer extends Component {
 
 			onPanResponderMove: ( e, gestureState ) => {
 				if ( gestureState.dy > 100 && gestureState.dy < 110 ) {
-					//Keyboard.dismiss() and this.textInput.blur() are not working here
-					//They require to know the currentlyFocusedID under the hood but
-					//during this gesture there's no currentlyFocusedID
+					// Keyboard.dismiss() and this.textInput.blur() are not working here
+					// They require to know the currentlyFocusedID under the hood but
+					// during this gesture there's no currentlyFocusedID.
 					UIManager.blur( e.target );
 				}
 			},

package/src/mobile/html-text-input/index.native.js

@@ -52,7 +52,7 @@ export class HTMLTextInput extends Component {
 
 	componentWillUnmount() {
 		removeFilter( 'native.persist-html', 'html-text-input' );
-		//TODO: Blocking main thread
+		// TODO: Blocking main thread.
 		this.stopEditing();
 	}
 

package/src/mobile/html-text-input/test/index.native.js

@@ -8,12 +8,12 @@ import { render, fireEvent } from 'test/helpers';
  */
 import { HTMLTextInput } from '..';
 
-// Finds the Content TextInput in our HTMLInputView
+// Finds the Content TextInput in our HTMLInputView.
 const findContentTextInput = ( screen ) => {
 	return screen.getByA11yLabel( 'html-view-content' );
 };
 
-// Finds the Title TextInput in our HTMLInputView
+// Finds the Title TextInput in our HTMLInputView.
 const findTitleTextInput = ( screen ) => {
 	return screen.getByA11yLabel( 'html-view-title' );
 };
@@ -43,11 +43,11 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const htmlTextInput = findContentTextInput( screen );
 		fireEvent( htmlTextInput, 'changeText', 'text' );
 
-		//Check if the onChange is called and the state is updated
+		// Check if the onChange is called and the state is updated.
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'text' );
 
@@ -65,15 +65,15 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const htmlTextInput = findContentTextInput( screen );
 		fireEvent( htmlTextInput, 'changeText', 'text' );
 
-		//Simulate blur event
+		//Simulate blur event.
 		fireEvent( htmlTextInput, 'blur' );
 
-		//Normally prop.value is updated with the help of withSelect
-		//But we don't have it in tests so we just simulate it
+		// Normally prop.value is updated with the help of withSelect
+		// but we don't have it in tests so we just simulate it.
 		screen.update(
 			<HTMLTextInput
 				onPersist={ onPersist }
@@ -83,17 +83,17 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		//Check if the onPersist is called and the state is updated
+		// Check if the onPersist is called and the state is updated.
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 		expect( onPersist ).toHaveBeenCalledWith( 'text' );
 
-		//Simulate blur event
+		//Simulate blur event.
 		fireEvent( htmlTextInput, 'blur' );
 
-		// Check that onPersist is not called for non-dirty state
+		// Check that onPersist is not called for non-dirty state.
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 
-		//We expect state.value is getting propagated from prop.value
+		// We expect state.value is getting propagated from prop.value.
 		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
@@ -107,11 +107,11 @@ describe( 'HTMLTextInput', () => {
 			/>
 		);
 
-		// Simulate user typing text
+		// Simulate user typing text.
 		const textInput = findTitleTextInput( screen );
 		fireEvent( textInput, 'changeText', 'text' );
 
-		//Check if the setTitleAction is called
+		// Check if the setTitleAction is called.
 		expect( editTitle ).toHaveBeenCalledTimes( 1 );
 		expect( editTitle ).toHaveBeenCalledWith( 'text' );
 	} );

package/src/mobile/image/index.native.js

@@ -174,7 +174,7 @@ const ImageComponent = ( {
 		<View
 			style={ [
 				styles.container,
-				// only set alignItems if an image exists because alignItems causes the placeholder
+				// Only set alignItems if an image exists because alignItems causes the placeholder
 				// to disappear when an aligned image can't be downloaded
 				// https://github.com/wordpress-mobile/gutenberg-mobile/issues/1592
 				imageData && align && { alignItems: align },

package/src/mobile/image/style.native.scss

@@ -89,6 +89,7 @@
 	color: #fff;
 	font-size: 14;
 	margin-top: 5;
+	text-align: center;
 }
 
 .editContainer {

package/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -15,7 +15,7 @@ export const KeyboardAwareFlatList = ( props ) => (
 );
 
 KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
-	//no need to handle on Android, it is system managed
+	// no need to handle on Android, it is system managed
 };
 
 export default KeyboardAwareFlatList;