Merge changes from mobile v1.24.0 to master

packages/block-library/src/gallery/gallery-image.native.js

@@ -22,7 +22,7 @@ import { Component } from '@wordpress/element';
 import { Icon } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Caption, MediaUploadProgress } from '@wordpress/block-editor';
-import { isURL } from '@wordpress/url';
+import { getProtocol } from '@wordpress/url';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { close, arrowLeft, arrowRight } from '@wordpress/icons';
 
@@ -91,7 +91,10 @@ class GalleryImage extends Component {
 
 		if ( this.state.isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
-		} else if ( this.state.didUploadFail || ( id && ! isURL( url ) ) ) {
+		} else if (
+			this.state.didUploadFail ||
+			( id && getProtocol( url ) === 'file:' )
+		) {
 			requestImageFailedRetryDialog( id );
 		}
 	}

packages/block-library/src/gallery/gallery.native.js

@@ -77,7 +77,7 @@ export const Gallery = ( props ) => {
 	};
 
 	return (
-		<View>
+		<View style={ { flex: 1 } }>
 			<Tiles
 				columns={ displayedColumns }
 				spacing={ TILE_SPACING }

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

@@ -44,7 +44,7 @@ import {
 	MediaEdit,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { isURL } from '@wordpress/url';
+import { getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -83,8 +83,6 @@ const getUrlForSlug = ( image, { sizeSlug } ) => {
 	return get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] );
 };
 
-const isFileUrl = ( url ) => url && url.startsWith( 'file:' );
-
 export class ImageEdit extends React.Component {
 	constructor( props ) {
 		super( props );
@@ -130,7 +128,7 @@ export class ImageEdit extends React.Component {
 		if (
 			! attributes.id &&
 			attributes.url &&
-			isFileUrl( attributes.url )
+			getProtocol( attributes.url ) === 'file:'
 		) {
 			requestMediaImport( attributes.url, ( id, url ) => {
 				if ( url ) {
@@ -141,7 +139,11 @@ export class ImageEdit extends React.Component {
 
 		// Make sure we mark any temporary images as failed if they failed while
 		// the editor wasn't open
-		if ( attributes.id && attributes.url && ! isURL( attributes.url ) ) {
+		if (
+			attributes.id &&
+			attributes.url &&
+			getProtocol( attributes.url ) === 'file:'
+		) {
 			mediaUploadSync();
 		}
 	}
@@ -180,7 +182,10 @@ export class ImageEdit extends React.Component {
 
 		if ( this.state.isUploadInProgress ) {
 			requestImageUploadCancelDialog( attributes.id );
-		} else if ( attributes.id && ! isURL( attributes.url ) ) {
+		} else if (
+			attributes.id &&
+			getProtocol( attributes.url ) === 'file:'
+		) {
 			requestImageFailedRetryDialog( attributes.id );
 		} else if ( ! this.state.isCaptionSelected ) {
 			requestImageFullscreenPreview(
@@ -669,7 +674,8 @@ export default compose( [
 		} = props;
 		const { imageSizes } = getSettings();
 
-		const shouldGetMedia = id && isSelected && ! isFileUrl( url );
+		const shouldGetMedia =
+			id && isSelected && getProtocol( url ) !== 'file:';
 		return {
 			image: shouldGetMedia ? getMedia( id ) : null,
 			imageSizes,

packages/block-library/src/index.native.js

@@ -154,7 +154,7 @@ export const registerCoreBlocks = () => {
 		shortcode,
 		latestPosts,
 		devOnly( verse ),
-		cover,
+		devOnly( cover ),
 	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );

packages/block-library/src/latest-posts/edit.native.js

@@ -14,7 +14,7 @@ import { coreBlocks } from '@wordpress/block-library';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
 import { InspectorControls } from '@wordpress/block-editor';
-import { fetchRequest } from 'react-native-gutenberg-bridge';
+import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
 	PanelBody,
@@ -52,23 +52,13 @@ class LatestPostsEdit extends Component {
 
 	componentDidMount() {
 		this.isStillMounted = true;
-		this.fetchRequest = fetchRequest( '/wp/v2/categories' )
+		this.fetchRequest = apiFetch( { path: '/wp/v2/categories' } )
 			.then( ( categoriesList ) => {
 				if ( this.isStillMounted ) {
-					let parsedCategoriesList = categoriesList;
-
-					// TODO: remove this check after `fetchRequest` types are made consist across platforms
-					// (see: https://github.com/wordpress-mobile/gutenberg-mobile/issues/1961)
-					if ( typeof categoriesList === 'string' ) {
-						parsedCategoriesList = JSON.parse( categoriesList );
-					}
-
-					if ( isEmpty( parsedCategoriesList ) ) {
-						parsedCategoriesList = [];
-					}
-
 					this.setState( {
-						categoriesList: parsedCategoriesList,
+						categoriesList: isEmpty( categoriesList )
+							? []
+							: categoriesList,
 					} );
 				}
 			} )

packages/block-library/src/latest-posts/style.native.scss

@@ -31,7 +31,7 @@
 	text-align: center;
 	margin-top: 8;
 	font-size: 14;
-	color: #2e4453;
+	color: $gray-dark;
 }
 
 .latestPostBlockMessageDark {

packages/block-library/src/media-text/media-container.native.js

@@ -29,7 +29,7 @@ import {
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { isURL } from '@wordpress/url';
+import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { replace } from '@wordpress/icons';
 
@@ -74,7 +74,7 @@ class MediaContainer extends Component {
 
 		// Make sure we mark any temporary images as failed if they failed while
 		// the editor wasn't open
-		if ( mediaId && mediaUrl && mediaUrl.indexOf( 'file:' ) === 0 ) {
+		if ( mediaId && mediaUrl && getProtocol( mediaUrl ) === 'file:' ) {
 			mediaUploadSync();
 		}
 	}
@@ -101,7 +101,7 @@ class MediaContainer extends Component {
 
 		if ( this.state.isUploadInProgress ) {
 			requestImageUploadCancelDialog( mediaId );
-		} else if ( mediaId && ! isURL( mediaUrl ) ) {
+		} else if ( mediaId && getProtocol( mediaUrl ) === 'file:' ) {
 			requestImageFailedRetryDialog( mediaId );
 		}
 	}

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

@@ -68,7 +68,7 @@ const SpacerEdit = ( {
 					<RangeControl
 						label={ __( 'Height in pixels' ) }
 						min={ MIN_SPACER_HEIGHT }
-						max={ MAX_SPACER_HEIGHT }
+						max={ Math.max( MAX_SPACER_HEIGHT, height ) }
 						separatorType={ 'none' }
 						value={ height }
 						onChange={ updateHeight }

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

@@ -36,7 +36,7 @@ import {
 	InspectorControls,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { isURL } from '@wordpress/url';
+import { isURL, getProtocol } from '@wordpress/url';
 import { doAction, hasAction } from '@wordpress/hooks';
 import { video as SvgIcon, replace } from '@wordpress/icons';
 
@@ -80,7 +80,7 @@ class VideoEdit extends React.Component {
 
 	componentDidMount() {
 		const { attributes } = this.props;
-		if ( attributes.id && ! isURL( attributes.src ) ) {
+		if ( attributes.id && getProtocol( attributes.src ) === 'file:' ) {
 			mediaUploadSync();
 		}
 	}
@@ -111,7 +111,10 @@ class VideoEdit extends React.Component {
 
 		if ( this.state.isUploadInProgress ) {
 			requestImageUploadCancelDialog( attributes.id );
-		} else if ( attributes.id && ! isURL( attributes.src ) ) {
+		} else if (
+			attributes.id &&
+			getProtocol( attributes.src ) === 'file:'
+		) {
 			requestImageFailedRetryDialog( attributes.id );
 		}
 

packages/components/src/query-controls/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,17 +12,6 @@ const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 const MAX_CATEGORIES_SUGGESTIONS = 20;
 
-// currently this is needed for consistent controls UI on mobile
-// this can be removed after control components settle on consistent defaults
-const MOBILE_CONTROL_PROPS = Platform.select( {
-	web: {},
-	native: { separatorType: 'fullWidth' },
-} );
-const MOBILE_CONTROL_PROPS_SEPARATOR_NONE = Platform.select( {
-	web: {},
-	native: { separatorType: 'none' },
-} );
-
 export default function QueryControls( {
 	categorySuggestions,
 	selectedCategories,
@@ -72,7 +60,6 @@ export default function QueryControls( {
 						onOrderByChange( newOrderBy );
 					}
 				} }
-				{ ...MOBILE_CONTROL_PROPS }
 			/>
 		),
 		onCategoryChange && (
@@ -100,7 +87,6 @@ export default function QueryControls( {
 				min={ minItems }
 				max={ maxItems }
 				required
-				{ ...MOBILE_CONTROL_PROPS_SEPARATOR_NONE }
 			/>
 		),
 	];

packages/components/src/query-controls/index.native.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { RangeControl, SelectControl } from '../';
+import CategorySelect from './category-select';
+
+const DEFAULT_MIN_ITEMS = 1;
+const DEFAULT_MAX_ITEMS = 100;
+
+export default function QueryControls( {
+	categoriesList,
+	selectedCategoryId,
+	numberOfItems,
+	order,
+	orderBy,
+	maxItems = DEFAULT_MAX_ITEMS,
+	minItems = DEFAULT_MIN_ITEMS,
+	onCategoryChange,
+	onNumberOfItemsChange,
+	onOrderChange,
+	onOrderByChange,
+} ) {
+	return [
+		onOrderChange && onOrderByChange && (
+			<SelectControl
+				label={ __( 'Order by' ) }
+				value={ `${ orderBy }/${ order }` }
+				options={ [
+					{
+						label: __( 'Newest to oldest' ),
+						value: 'date/desc',
+					},
+					{
+						label: __( 'Oldest to newest' ),
+						value: 'date/asc',
+					},
+					{
+						/* translators: label for ordering posts by title in ascending order */
+						label: __( 'A → Z' ),
+						value: 'title/asc',
+					},
+					{
+						/* translators: label for ordering posts by title in descending order */
+						label: __( 'Z → A' ),
+						value: 'title/desc',
+					},
+				] }
+				onChange={ ( value ) => {
+					const [ newOrderBy, newOrder ] = value.split( '/' );
+					if ( newOrder !== order ) {
+						onOrderChange( newOrder );
+					}
+					if ( newOrderBy !== orderBy ) {
+						onOrderByChange( newOrderBy );
+					}
+				} }
+				{ ...{ separatorType: 'fullWidth' } }
+			/>
+		),
+		onCategoryChange && (
+			<CategorySelect
+				categoriesList={ categoriesList }
+				label={ __( 'Category' ) }
+				noOptionLabel={ __( 'All' ) }
+				selectedCategoryId={ selectedCategoryId }
+				onChange={ onCategoryChange }
+				{ ...{ separatorType: 'fullWidth' } }
+			/>
+		),
+		onNumberOfItemsChange && (
+			<RangeControl
+				label={ __( 'Number of items' ) }
+				value={ numberOfItems }
+				onChange={ onNumberOfItemsChange }
+				min={ minItems }
+				max={ maxItems }
+				required
+				{ ...{ separatorType: 'none' } }
+			/>
+		),
+	];
+}

packages/url/src/test/index.test.js

@@ -89,6 +89,7 @@ describe( 'getProtocol', () => {
 		expect( getProtocol( 'https://localhost:8080' ) ).toBe( 'https:' );
 		expect( getProtocol( 'tel:1234' ) ).toBe( 'tel:' );
 		expect( getProtocol( 'blob:data' ) ).toBe( 'blob:' );
+		expect( getProtocol( 'file:///folder/file.txt' ) ).toBe( 'file:' );
 	} );
 
 	it( 'returns undefined when the provided value does not contain a URL protocol', () => {