From bdec6134c32800cb2fc3b93fc00a368a28e27d0d Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Tue, 17 Mar 2020 18:32:52 +0100 Subject: [PATCH 1/7] Disable Cover for production --- packages/block-library/src/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 968e652d86505..aaa2305a9fdc8 100644 --- a/packages/block-library/src/index.native.js +++ b/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 ); From 8c7612ed7ef5b8a1a11ff6bf11081a0cb517222d Mon Sep 17 00:00:00 2001 From: jbinda Date: Wed, 18 Mar 2020 15:12:18 +0100 Subject: [PATCH 2/7] apply flex to prevent caption overlap in Gallery block (#20987) --- packages/block-library/src/gallery/gallery.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/gallery.native.js b/packages/block-library/src/gallery/gallery.native.js index 27dc15df623e9..0a72cd8bbe42b 100644 --- a/packages/block-library/src/gallery/gallery.native.js +++ b/packages/block-library/src/gallery/gallery.native.js @@ -77,7 +77,7 @@ export const Gallery = ( props ) => { }; return ( - + Date: Wed, 18 Mar 2020 17:27:46 +0000 Subject: [PATCH 3/7] Rnmobile/fix space max2 (#20986) * Disable Cover for production * Adapt max according to the current value. Co-authored-by: Marko Savic --- packages/block-library/src/spacer/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/spacer/edit.js b/packages/block-library/src/spacer/edit.js index ce843e1a31331..76993d3977207 100644 --- a/packages/block-library/src/spacer/edit.js +++ b/packages/block-library/src/spacer/edit.js @@ -68,7 +68,7 @@ const SpacerEdit = ( { Date: Thu, 19 Mar 2020 10:37:17 +0000 Subject: [PATCH 4/7] Add isFileURL method and use it on all native media upload checks. (#20985) * Add isFileURL method and use it on all native media upload checks. * Check if url is defined. * Add test for undefined and fix lint error for isFileURL * Replace isFileURL method for getProcotol == 'file' mettod --- .../src/gallery/gallery-image.native.js | 7 +++++-- .../block-library/src/image/edit.native.js | 20 ++++++++++++------- .../src/media-text/media-container.native.js | 6 +++--- .../block-library/src/video/edit.native.js | 9 ++++++--- packages/url/src/test/index.test.js | 1 + 5 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/gallery/gallery-image.native.js b/packages/block-library/src/gallery/gallery-image.native.js index 83aad48961ca8..43f4125121ee7 100644 --- a/packages/block-library/src/gallery/gallery-image.native.js +++ b/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 ); } } diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6eacd85a2438a..14fb569a91f8b 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/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, diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js index f3c44e67c9db2..cac4d5615a726 100644 --- a/packages/block-library/src/media-text/media-container.native.js +++ b/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 ); } } diff --git a/packages/block-library/src/video/edit.native.js b/packages/block-library/src/video/edit.native.js index 3a0fe4a1d231a..1afe94d47dc2f 100644 --- a/packages/block-library/src/video/edit.native.js +++ b/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 ); } diff --git a/packages/url/src/test/index.test.js b/packages/url/src/test/index.test.js index ddb603ba3fa76..b9e85c88e748c 100644 --- a/packages/url/src/test/index.test.js +++ b/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', () => { From 8bd203aca0a532d384691d8712533c1b9a4c14de Mon Sep 17 00:00:00 2001 From: Chip Date: Thu, 19 Mar 2020 17:30:16 -0400 Subject: [PATCH 5/7] [RNMobile] Latest-Posts: Resolve issue with Query Controls, and fix API Fetch strategy (#21025) * Convert the categories fetchRequest to use the apiFetch API for cacheing * Fix Conflict in Query Controls to move the stable state to Mobile * Fix Conflict in Query Controls to move the stable state to Mobile --- .../src/latest-posts/edit.native.js | 20 ++--- .../src/latest-posts/style.native.scss | 2 +- .../components/src/query-controls/index.js | 14 --- .../src/query-controls/index.native.js | 87 +++++++++++++++++++ 4 files changed, 93 insertions(+), 30 deletions(-) create mode 100644 packages/components/src/query-controls/index.native.js diff --git a/packages/block-library/src/latest-posts/edit.native.js b/packages/block-library/src/latest-posts/edit.native.js index 53481203a135c..5b37ad2a530a8 100644 --- a/packages/block-library/src/latest-posts/edit.native.js +++ b/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, } ); } } ) diff --git a/packages/block-library/src/latest-posts/style.native.scss b/packages/block-library/src/latest-posts/style.native.scss index cba3877e8904b..529c52f507fec 100644 --- a/packages/block-library/src/latest-posts/style.native.scss +++ b/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 { diff --git a/packages/components/src/query-controls/index.js b/packages/components/src/query-controls/index.js index 67c975b8e4bee..a1a1a2bc4a4cf 100644 --- a/packages/components/src/query-controls/index.js +++ b/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 } /> ), ]; diff --git a/packages/components/src/query-controls/index.native.js b/packages/components/src/query-controls/index.native.js new file mode 100644 index 0000000000000..e7932cd285499 --- /dev/null +++ b/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 && ( + { + const [ newOrderBy, newOrder ] = value.split( '/' ); + if ( newOrder !== order ) { + onOrderChange( newOrder ); + } + if ( newOrderBy !== orderBy ) { + onOrderByChange( newOrderBy ); + } + } } + { ...{ separatorType: 'fullWidth' } } + /> + ), + onCategoryChange && ( + + ), + onNumberOfItemsChange && ( + + ), + ]; +} From c025cf43a3afd3a8e2d4f9a7da1d78c4af5fb3a4 Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Fri, 20 Mar 2020 15:08:36 +0100 Subject: [PATCH 6/7] Cherry pick - Dark mode implementation --- .../index.android.js | 33 +++++++++++++++++++ .../{index.native.js => index.ios.js} | 0 test/native/setup.js | 1 + 3 files changed, 34 insertions(+) create mode 100644 packages/compose/src/hooks/use-preferred-color-scheme/index.android.js rename packages/compose/src/hooks/use-preferred-color-scheme/{index.native.js => index.ios.js} (100%) diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js new file mode 100644 index 0000000000000..6d81eeca5a085 --- /dev/null +++ b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js @@ -0,0 +1,33 @@ +/** + * External dependencies + */ +import { + subscribePreferredColorScheme, + isInitialColorSchemeDark, +} from 'react-native-gutenberg-bridge'; +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; + +/** + * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ] + * + * @return {string} return current color scheme. + */ +const usePreferredColorScheme = function() { + const [ currentColorScheme, setCurrentColorScheme ] = useState( + isInitialColorSchemeDark ? 'dark' : 'light' + ); + useEffect( () => { + subscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => { + const colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light'; + if ( colorScheme !== currentColorScheme ) { + setCurrentColorScheme( colorScheme ); + } + } ); + } ); + return currentColorScheme; +}; + +export default usePreferredColorScheme; diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js similarity index 100% rename from packages/compose/src/hooks/use-preferred-color-scheme/index.native.js rename to packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js diff --git a/test/native/setup.js b/test/native/setup.js index 1a29cb054f924..8dcf3c00f58db 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -13,6 +13,7 @@ jest.mock( 'react-native-gutenberg-bridge', () => { subscribeSetFocusOnTitle: jest.fn(), subscribeUpdateHtml: jest.fn(), subscribeMediaAppend: jest.fn(), + subscribePreferredColorScheme: () => 'light', editorDidMount: jest.fn(), editorDidAutosave: jest.fn(), subscribeMediaUpload: jest.fn(), From d04fe86f6416b845c4ea80d535c8c8d32833db1f Mon Sep 17 00:00:00 2001 From: Marko Savic Date: Fri, 20 Mar 2020 20:30:45 +0100 Subject: [PATCH 7/7] Revert "Cherry pick - Dark mode implementation" This reverts commit c025cf43a3afd3a8e2d4f9a7da1d78c4af5fb3a4. --- .../index.android.js | 33 ------------------- .../{index.ios.js => index.native.js} | 0 test/native/setup.js | 1 - 3 files changed, 34 deletions(-) delete mode 100644 packages/compose/src/hooks/use-preferred-color-scheme/index.android.js rename packages/compose/src/hooks/use-preferred-color-scheme/{index.ios.js => index.native.js} (100%) diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js deleted file mode 100644 index 6d81eeca5a085..0000000000000 --- a/packages/compose/src/hooks/use-preferred-color-scheme/index.android.js +++ /dev/null @@ -1,33 +0,0 @@ -/** - * External dependencies - */ -import { - subscribePreferredColorScheme, - isInitialColorSchemeDark, -} from 'react-native-gutenberg-bridge'; -/** - * WordPress dependencies - */ -import { useState, useEffect } from '@wordpress/element'; - -/** - * Returns the color scheme value when it changes. Possible values: [ 'light', 'dark' ] - * - * @return {string} return current color scheme. - */ -const usePreferredColorScheme = function() { - const [ currentColorScheme, setCurrentColorScheme ] = useState( - isInitialColorSchemeDark ? 'dark' : 'light' - ); - useEffect( () => { - subscribePreferredColorScheme( ( { isPreferredColorSchemeDark } ) => { - const colorScheme = isPreferredColorSchemeDark ? 'dark' : 'light'; - if ( colorScheme !== currentColorScheme ) { - setCurrentColorScheme( colorScheme ); - } - } ); - } ); - return currentColorScheme; -}; - -export default usePreferredColorScheme; diff --git a/packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js b/packages/compose/src/hooks/use-preferred-color-scheme/index.native.js similarity index 100% rename from packages/compose/src/hooks/use-preferred-color-scheme/index.ios.js rename to packages/compose/src/hooks/use-preferred-color-scheme/index.native.js diff --git a/test/native/setup.js b/test/native/setup.js index 8dcf3c00f58db..1a29cb054f924 100644 --- a/test/native/setup.js +++ b/test/native/setup.js @@ -13,7 +13,6 @@ jest.mock( 'react-native-gutenberg-bridge', () => { subscribeSetFocusOnTitle: jest.fn(), subscribeUpdateHtml: jest.fn(), subscribeMediaAppend: jest.fn(), - subscribePreferredColorScheme: () => 'light', editorDidMount: jest.fn(), editorDidAutosave: jest.fn(), subscribeMediaUpload: jest.fn(),