From a64ecd8cd5bc585984bf43d2fe8eb677584367dd Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 4 Aug 2022 12:05:46 +1000 Subject: [PATCH 01/12] Release script: Update react-native-editor version to 1.81.0 --- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index 2a281e93dd756..52e9a4b40be8d 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.80.0", + "version": "1.81.0", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index 29201ac95e322..eafbeb6b5d91e 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.80.0", + "version": "1.81.0", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index 5f056657908eb..dc246210b01e5 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.80.0", + "version": "1.81.0", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 29d06a6fbbc2831de2412a4be5d64e81558d2b47 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 4 Aug 2022 12:08:54 +1000 Subject: [PATCH 02/12] Release script: Update with changes from 'npm run core preios' --- packages/react-native-editor/ios/Podfile.lock | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 49985a3614dac..bf9721cb70c0a 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.66.2) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.80.0): + - Gutenberg (1.81.0): - React-Core (= 0.66.2) - React-CoreModules (= 0.66.2) - React-RCTImage (= 0.66.2) @@ -350,7 +350,7 @@ PODS: - React-Core - RNSVG (9.13.6): - React-Core - - RNTAztecView (1.80.0): + - RNTAztecView (1.81.0): - React-Core - WordPress-Aztec-iOS (~> 1.19.8) - SDWebImage (5.11.1): @@ -528,7 +528,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 18438b1c04ce502ed681cd19db3f4508964c082a fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: 5337263514dd6f09803962437687240c5dc39aa4 - Gutenberg: 6ccd799c85433d1d1a0e0ecaccebe77d410acb43 + Gutenberg: d54a8223fceb4f08381e7238597449bb70c9abc8 libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9 RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a @@ -569,7 +569,7 @@ SPEC CHECKSUMS: RNReanimated: b413cc7aa3e2a740d9804cda3a9396a68f9eea7f RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0 - RNTAztecView: 7326c35cf5ebef31470b95d618ef473ea8f8c63d + RNTAztecView: b7ab8acc090ef19f02cefecab9dfc896241c897b SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504 From 4d1ca7e24e7d8128b1f69af2b7585c2d8ccd8071 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 24 Aug 2022 16:45:06 -0500 Subject: [PATCH 03/12] Release script: Update react-native-editor version to 1.81.1 --- packages/react-native-aztec/package.json | 2 +- packages/react-native-bridge/package.json | 2 +- packages/react-native-editor/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native-aztec/package.json b/packages/react-native-aztec/package.json index 52e9a4b40be8d..90e80d47c2c33 100644 --- a/packages/react-native-aztec/package.json +++ b/packages/react-native-aztec/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-aztec", - "version": "1.81.0", + "version": "1.81.1", "description": "Aztec view for react-native.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-bridge/package.json b/packages/react-native-bridge/package.json index eafbeb6b5d91e..7bd70c1556447 100644 --- a/packages/react-native-bridge/package.json +++ b/packages/react-native-bridge/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-bridge", - "version": "1.81.0", + "version": "1.81.1", "description": "Native bridge library used to integrate the block editor into a native App.", "private": true, "author": "The WordPress Contributors", diff --git a/packages/react-native-editor/package.json b/packages/react-native-editor/package.json index dc246210b01e5..dc09caaee7eb0 100644 --- a/packages/react-native-editor/package.json +++ b/packages/react-native-editor/package.json @@ -1,6 +1,6 @@ { "name": "@wordpress/react-native-editor", - "version": "1.81.0", + "version": "1.81.1", "description": "Mobile WordPress gutenberg editor.", "author": "The WordPress Contributors", "license": "GPL-2.0-or-later", From 78fc8f48772e49f3f9e466df09b92e16c6c51951 Mon Sep 17 00:00:00 2001 From: David Calhoun <438664+dcalhoun@users.noreply.github.com> Date: Wed, 24 Aug 2022 16:45:27 -0500 Subject: [PATCH 04/12] Release script: Update with changes from 'npm run core preios' --- packages/react-native-editor/ios/Podfile.lock | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index bf9721cb70c0a..41368ad1f32fb 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -13,7 +13,7 @@ PODS: - ReactCommon/turbomodule/core (= 0.66.2) - fmt (6.2.1) - glog (0.3.5) - - Gutenberg (1.81.0): + - Gutenberg (1.81.1): - React-Core (= 0.66.2) - React-CoreModules (= 0.66.2) - React-RCTImage (= 0.66.2) @@ -350,7 +350,7 @@ PODS: - React-Core - RNSVG (9.13.6): - React-Core - - RNTAztecView (1.81.0): + - RNTAztecView (1.81.1): - React-Core - WordPress-Aztec-iOS (~> 1.19.8) - SDWebImage (5.11.1): @@ -528,7 +528,7 @@ SPEC CHECKSUMS: FBReactNativeSpec: 18438b1c04ce502ed681cd19db3f4508964c082a fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: 5337263514dd6f09803962437687240c5dc39aa4 - Gutenberg: d54a8223fceb4f08381e7238597449bb70c9abc8 + Gutenberg: 042d71a355481c2fb8b71dd8398ab50a77071c95 libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc RCT-Folly: a21c126816d8025b547704b777a2ba552f3d9fa9 RCTRequired: 5e9e85f48da8dd447f5834ce14c6799ea8c7f41a @@ -544,12 +544,12 @@ SPEC CHECKSUMS: React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993 react-native-blur: ef741a08d020010ba65e411be0ab82d1d325e7ad react-native-get-random-values: b6fb85e7169b9822976793e467458c151c3e8b69 - react-native-keyboard-aware-scroll-view: 0bc6c2dfe9056935a40dc1a70e764b7a1bbf6568 + react-native-keyboard-aware-scroll-view: 374b637c8684d7de50bd930df1a2d2b8fd49daa5 react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f - react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 + react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d react-native-slider: d4c3367c5db5d2bec3ac0ab9d15ebb73d896034c - react-native-video: 0b09cc469df0249509def5dc1484e0419342de9b - react-native-webview: 193d233c29eacce1f42ca2637dab7ba79c25a6de + react-native-video: 2ad952d1a9ce83e058dcb4a1800af3a99cb7edee + react-native-webview: 1f56115845c98f0a59dfbbac685797c014a821be React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea @@ -562,14 +562,14 @@ SPEC CHECKSUMS: React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01 ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6 - RNCClipboard: 99fc8ad669a376b756fbc8098ae2fd05c0ed0668 - RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd + RNCClipboard: f49f3de56b40d0f4104680dabadc7a1f063f4fd4 + RNCMaskedView: d367b2a8df3992114e31b32b091a0c00dc800827 RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7 RNGestureHandler: 3b13cc25407d1cdbee33b6ae65790a55c032d2a9 RNReanimated: b413cc7aa3e2a740d9804cda3a9396a68f9eea7f RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b RNSVG: 36a7359c428dcb7c6bce1cc546fbfebe069809b0 - RNTAztecView: b7ab8acc090ef19f02cefecab9dfc896241c897b + RNTAztecView: a80beb06c7f139b7cbd3c2c781f9b9e7b3666747 SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d WordPress-Aztec-iOS: 7d11d598f14c82c727c08b56bd35fbeb7dafb504 From 9edbebed1a1078de98271f05c2f45ef35bbca8ea Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 25 Aug 2022 09:11:32 +0200 Subject: [PATCH 05/12] [Mobile] - Add BlockListCompact (#43431) * Mobile - Introduce BlockListCompact - Lighter version of the default BlockList with simpler functionality for use cases like the List V2 block * Mobile - Update List V2 tests since it's not needed to fire the layout event change with the BlockListCompact component * Mobile - BlockListCompact - Add note of the component props and which block is currently using it --- .../block-list/block-list-compact.native.js | 62 +++++++ .../components/inner-blocks/index.native.js | 6 +- .../src/list-item/edit.native.js | 2 +- .../src/list/test/edit.native.js | 154 ------------------ packages/block-library/src/list/v2/edit.js | 1 + 5 files changed, 69 insertions(+), 156 deletions(-) create mode 100644 packages/block-editor/src/components/block-list/block-list-compact.native.js diff --git a/packages/block-editor/src/components/block-list/block-list-compact.native.js b/packages/block-editor/src/components/block-list/block-list-compact.native.js new file mode 100644 index 0000000000000..1b2740d5bd45d --- /dev/null +++ b/packages/block-editor/src/components/block-list/block-list-compact.native.js @@ -0,0 +1,62 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { store as blockEditorStore } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import styles from './style.scss'; +import BlockListBlock from './block'; + +/** + * NOTE: This is a component currently used by the List block (V2) + * It only passes the needed props for this block, if other blocks will use it + * make sure you pass other props that might be required coming from: + * components/inner-blocks/index.native.js + */ + +function BlockListCompact( props ) { + const { + marginHorizontal = styles.defaultBlock.marginLeft, + marginVertical = styles.defaultBlock.marginTop, + rootClientId, + } = props; + const { blockClientIds } = useSelect( + ( select ) => { + const { getBlockOrder } = select( blockEditorStore ); + const blockOrder = getBlockOrder( rootClientId ); + + return { + blockClientIds: blockOrder, + }; + }, + [ rootClientId ] + ); + + const containerStyle = { + marginVertical: -marginVertical, + marginHorizontal: -marginHorizontal, + }; + + return ( + + { blockClientIds.map( ( currentClientId ) => ( + + ) ) } + + ); +} + +export default BlockListCompact; diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 27bfec37adaf5..2b5ffe01aaf08 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -21,6 +21,7 @@ import getBlockContext from './get-block-context'; * Internal dependencies */ import BlockList from '../block-list'; +import BlockListCompact from '../block-list/block-list-compact'; import { useBlockEditContext } from '../block-edit/context'; import useBlockSync from '../provider/use-block-sync'; import { BlockContextProvider } from '../block-context'; @@ -96,6 +97,7 @@ function UncontrolledInnerBlocks( props ) { blockWidth, __experimentalLayout: layout = defaultLayout, gridProperties, + useCompactList, } = props; const block = useSelect( @@ -112,8 +114,10 @@ function UncontrolledInnerBlocks( props ) { templateInsertUpdatesSelection ); + const BlockListComponent = useCompactList ? BlockListCompact : BlockList; + let blockList = ( - { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Select List Item block @@ -180,61 +166,18 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Select List Item block const firstNestedLevelBlock = within( listBlock ).getByA11yLabel( /List item Block\. Row 2/ ); - - fireEvent( - within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 350, - }, - }, - } - ); - fireEvent.press( firstNestedLevelBlock ); // Select second level list const secondNestedLevelBlock = within( firstNestedLevelBlock ).getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( secondNestedLevelBlock ).getByTestId( - 'block-list-wrapper' - ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( secondNestedLevelBlock ); expect( getEditorHtml() ).toMatchSnapshot(); @@ -256,20 +199,6 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Select Secont List Item block @@ -300,40 +229,12 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Select List Item block const firstNestedLevelBlock = within( listBlock ).getByA11yLabel( /List item Block\. Row 1/ ); - - fireEvent( - within( firstNestedLevelBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 350, - }, - }, - } - ); - fireEvent.press( firstNestedLevelBlock ); // Select Inner block List @@ -341,19 +242,6 @@ describe( 'List V2 block', () => { /List Block\. Row 1/ ); - fireEvent( - within( innerBlockList ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - // Select nested List Item block const listItemBlock = within( innerBlockList ).getByA11yLabel( /List item Block\. Row 1/ @@ -386,20 +274,6 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Update to ordered list @@ -428,20 +302,6 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Update to ordered list @@ -481,20 +341,6 @@ describe( 'List V2 block', () => { // Select List block const listBlock = getByA11yLabel( /List Block\. Row 1/ ); - - fireEvent( - within( listBlock ).getByTestId( 'block-list-wrapper' ), - 'layout', - { - nativeEvent: { - layout: { - width: 100, - height: 50, - }, - }, - } - ); - fireEvent.press( listBlock ); // Update to ordered list diff --git a/packages/block-library/src/list/v2/edit.js b/packages/block-library/src/list/v2/edit.js index 9ef320b53b001..471e6c9fd913b 100644 --- a/packages/block-library/src/list/v2/edit.js +++ b/packages/block-library/src/list/v2/edit.js @@ -139,6 +139,7 @@ function Edit( { attributes, setAttributes, clientId, style } ) { ...( Platform.isNative && { marginVertical: NATIVE_MARGIN_SPACING, marginHorizontal: NATIVE_MARGIN_SPACING, + useCompactList: true, } ), } ); useMigrateOnLoad( attributes, clientId ); From 201e83a8e5be0aab10dbe71baca5aed5b1c91127 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Fri, 19 Aug 2022 17:09:04 +1000 Subject: [PATCH 06/12] [RNMobile] List block v2: Fix text color inconsistencies with list items (#43244) * List block v2: use default color for preferred color scheme * Use usePreferredColorSchemeStyle hook for List Item style * Remove unneeded font-size value from list item styles --- .../src/list-item/list-style-type.native.js | 9 ++++++++- packages/block-library/src/list-item/style.native.scss | 4 ++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/list-item/list-style-type.native.js b/packages/block-library/src/list-item/list-style-type.native.js index c3bd787ff2960..2ce3397cffb0b 100644 --- a/packages/block-library/src/list-item/list-style-type.native.js +++ b/packages/block-library/src/list-item/list-style-type.native.js @@ -8,6 +8,7 @@ import { View, Text } from 'react-native'; */ import { Icon } from '@wordpress/components'; import { Platform } from '@wordpress/element'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies @@ -109,9 +110,15 @@ export default function ListStyleType( { style?.fontSize ? style.fontSize : defaultFontSize, 10 ); + + const colorWithPreferredScheme = usePreferredColorSchemeStyle( + styles[ 'wp-block-list-item__list-item--default' ], + styles[ 'wp-block-list-item__list-item--default--dark' ] + ); + const defaultColor = style?.baseColors?.color?.text ? style.baseColors.color.text - : styles[ 'wp-block-list-item__list-item--default' ].color; + : colorWithPreferredScheme.color; const color = style?.color ? style.color : defaultColor; if ( ordered ) { diff --git a/packages/block-library/src/list-item/style.native.scss b/packages/block-library/src/list-item/style.native.scss index 6b4f2dcc04356..f4946ff39c7cd 100644 --- a/packages/block-library/src/list-item/style.native.scss +++ b/packages/block-library/src/list-item/style.native.scss @@ -28,6 +28,10 @@ font-size: $editor-font-size; } +.wp-block-list-item__list-item--default--dark { + color: $white; +} + .wp-block-list-item__list-item-ordered--default { margin-top: 2; } From f41577eb8ebc854e62b8f1fa9c8a200321935839 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Thu, 18 Aug 2022 09:39:32 +0200 Subject: [PATCH 07/12] Mobile - Disable FastImage on Android (#43322) --- .../src/mobile/image/index.native.js | 39 +++++-------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/packages/components/src/mobile/image/index.native.js b/packages/components/src/mobile/image/index.native.js index 7260fc5f7abb0..34f6557e8255e 100644 --- a/packages/components/src/mobile/image/index.native.js +++ b/packages/components/src/mobile/image/index.native.js @@ -1,12 +1,7 @@ /** * External dependencies */ -import { - Image as RNImage, - Text, - View, - useWindowDimensions, -} from 'react-native'; +import { Image as RNImage, Text, View } from 'react-native'; import FastImage from 'react-native-fast-image'; /** @@ -16,7 +11,7 @@ import { __ } from '@wordpress/i18n'; import { Icon } from '@wordpress/components'; import { image as icon } from '@wordpress/icons'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; -import { useEffect, useState, useRef, Platform } from '@wordpress/element'; +import { useEffect, useState, Platform } from '@wordpress/element'; /** * Internal dependencies @@ -59,14 +54,14 @@ const ImageComponent = ( { } ) => { const [ imageData, setImageData ] = useState( null ); const [ containerSize, setContainerSize ] = useState( null ); - const [ shouldUseFallback, setShouldUseFallback ] = useState( false ); - const { height: windowHeight, width: windowWidth } = useWindowDimensions(); - const isLandscape = useRef( windowWidth > windowHeight ); - const Image = ! shouldUseFastImage ? RNImage : FastImage; - const imageResizeMode = ! shouldUseFastImage - ? resizeMode - : FastImage.resizeMode[ resizeMode ]; + // Disabled for Android due to https://github.com/WordPress/gutenberg/issues/43149 + const Image = + ! shouldUseFastImage || Platform.isAndroid ? RNImage : FastImage; + const imageResizeMode = + ! shouldUseFastImage || Platform.isAndroid + ? resizeMode + : FastImage.resizeMode[ resizeMode ]; useEffect( () => { let isCurrent = true; @@ -89,21 +84,6 @@ const ImageComponent = ( { return () => ( isCurrent = false ); }, [ url ] ); - // Workaround for Android where changing the orientation breaks FastImage - // for now if there's any orientation changes, it will use the fallback - // prop to use the default Image component. - // https://github.com/WordPress/gutenberg/issues/42869 - useEffect( () => { - if ( Platform.isAndroid && shouldUseFastImage ) { - const isCurrentOrientationLandscape = windowWidth > windowHeight; - - if ( isLandscape.current !== isCurrentOrientationLandscape ) { - setShouldUseFallback( true ); - isLandscape.current = isCurrentOrientationLandscape; - } - } - }, [ windowHeight, windowWidth ] ); - const onContainerLayout = ( event ) => { const { height, width } = event.nativeEvent.layout; @@ -250,7 +230,6 @@ const ImageComponent = ( { resizeMethod: 'scale', } ) } resizeMode={ imageResizeMode } - fallback={ shouldUseFallback } /> ) } From a439a53a0d1e9d7ffbbad58d80aa2588323cfec2 Mon Sep 17 00:00:00 2001 From: Gerardo Pacheco Date: Mon, 8 Aug 2022 12:40:04 +0200 Subject: [PATCH 08/12] [Mobile] - Fix dynamic React Native version (#43058) * Mobile - Fix dynamic React Native version * Mobile - Adds jvmargs setting --- packages/react-native-editor/android/app/build.gradle | 5 +++-- packages/react-native-editor/android/gradle.properties | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-native-editor/android/app/build.gradle b/packages/react-native-editor/android/app/build.gradle index d2488b7182221..e4b5d092724e2 100644 --- a/packages/react-native-editor/android/app/build.gradle +++ b/packages/react-native-editor/android/app/build.gradle @@ -170,16 +170,17 @@ android { } dependencies { + def packageJson = '../../package.json' + implementation("org.wordpress-mobile.gutenberg-mobile:react-native-bridge", { exclude group: 'org.wordpress', module: 'utils' }) implementation 'androidx.appcompat:appcompat:1.2.0' //noinspection GradleDynamicVersion - implementation "com.facebook.react:react-native:+" // From node_modules + implementation "com.facebook.react:react-native:${extractPackageVersion(packageJson, 'react-native', 'dependencies')}" // From node_modules implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0" - def packageJson = '../../package.json' implementation "org.wordpress-mobile:react-native-svg:${extractPackageVersion(packageJson, 'react-native-svg', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-video:${extractPackageVersion(packageJson, 'react-native-video', 'dependencies')}" implementation "com.github.wordpress-mobile:react-native-linear-gradient:${extractPackageVersion(packageJson, 'react-native-linear-gradient', 'dependencies')}" diff --git a/packages/react-native-editor/android/gradle.properties b/packages/react-native-editor/android/gradle.properties index 28aa4856737ee..094d0de62d995 100644 --- a/packages/react-native-editor/android/gradle.properties +++ b/packages/react-native-editor/android/gradle.properties @@ -11,6 +11,7 @@ # The setting is particularly useful for tweaking memory settings. # Default value: -Xmx10248m -XX:MaxPermSize=256m # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 +org.gradle.jvmargs=-Xmx6g -XX:+HeapDumpOnOutOfMemoryError # When configured, Gradle will run in incubating parallel mode. # This option should only be used with decoupled projects. More details, visit From 94b8447887f4dd7e3897baa9f849a1898877abb4 Mon Sep 17 00:00:00 2001 From: Derek Blank Date: Thu, 25 Aug 2022 23:47:51 +1000 Subject: [PATCH 09/12] [RNMobile] Use default placeholder text color for native List Item (#43353) * Use default placeholder text color for native List Item * Move list item placeholder hex value to stylesheet * Resolve test failure * Add opacity to list block placeholder color styles * Update List block v2 placholder currentTextColor * Mobile - List Item - Check if currentTextColor is not undefined and moves opacity value into a const * Mobile - List Item - Add optional chaining for style.color Co-authored-by: Gerardo --- .../src/list-item/edit.native.js | 32 ++++++++++++++++++- .../src/list-item/style.native.scss | 8 +++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js index 84cadbb78f21b..5326cbd79b0e4 100644 --- a/packages/block-library/src/list-item/edit.native.js +++ b/packages/block-library/src/list-item/edit.native.js @@ -14,6 +14,7 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { useState, useCallback } from '@wordpress/element'; @@ -26,6 +27,8 @@ import { IndentUI } from './edit.js'; import styles from './style.scss'; import ListStyleType from './list-style-type'; +const OPACITY = '9e'; + export default function ListItemEdit( { attributes, setAttributes, @@ -84,11 +87,35 @@ export default function ListItemEdit( { const blockProps = useBlockProps( { ...( hasInnerBlocks && styles[ 'wp-block-list-item__nested-blocks' ] ), } ); + const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: [ 'core/list' ], useCompactList: true, } ); + // Set default placeholder text color from light/dark scheme or base colors + const defaultPlaceholderFromScheme = usePreferredColorSchemeStyle( + styles[ 'wp-block-list-item__list-item-placeholder' ], + styles[ 'wp-block-list-item__list-item-placeholder--dark' ] + ); + + const currentTextColor = style?.color || style?.baseColors?.color?.text; + + const defaultPlaceholderTextColor = currentTextColor + ? currentTextColor + : defaultPlaceholderFromScheme?.color; + + // Add hex opacity to default placeholder text color and style object + const defaultPlaceholderTextColorWithOpacity = + defaultPlaceholderTextColor + OPACITY; + + const styleWithPlaceholderOpacity = { + ...style, + ...( style?.color && { + placeholderColor: style.color + OPACITY, + } ), + }; + const onSplit = useSplit( clientId ); const onMerge = useMerge( clientId ); const onLayout = useCallback( ( { nativeEvent } ) => { @@ -128,12 +155,15 @@ export default function ListItemEdit( { } value={ content } placeholder={ placeholder || __( 'List' ) } + placeholderTextColor={ + defaultPlaceholderTextColorWithOpacity + } onSplit={ onSplit } onMerge={ onMerge } onReplace={ ( blocks, ...args ) => { onReplace( convertToListItems( blocks ), ...args ); } } - style={ style } + style={ styleWithPlaceholderOpacity } deleteEnter={ true } containerWidth={ contentWidth } /> diff --git a/packages/block-library/src/list-item/style.native.scss b/packages/block-library/src/list-item/style.native.scss index f4946ff39c7cd..b5cdd3e8919ca 100644 --- a/packages/block-library/src/list-item/style.native.scss +++ b/packages/block-library/src/list-item/style.native.scss @@ -47,3 +47,11 @@ .wp-block-list-item__list-item-container { margin-right: 8; } + +.wp-block-list-item__list-item-placeholder { + color: $gray; +} + +.wp-block-list-item__list-item-placeholder--dark { + color: $gray-50; +} From 8599e8c0a4e5a31a59ab381e2510a0332de77833 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Thu, 25 Aug 2022 15:54:44 +0200 Subject: [PATCH 10/12] Mobile - Update CHANGELOG --- packages/react-native-editor/CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md index b3f2ea03ddca9..7a73cd291cce1 100644 --- a/packages/react-native-editor/CHANGELOG.md +++ b/packages/react-native-editor/CHANGELOG.md @@ -11,6 +11,13 @@ For each user feature we should also add a importance categorization label to i ## Unreleased +## 1.81.1 +- [*] List block v2: Fix text color inconsistencies with list items [#43244] +- [*] Use default placeholder text color for native List Item [#43353] +- [**] Add BlockListCompact [#43431] +- [*] Fix dynamic React Native version [#43058] +- [**] Disable FastImage on Android [#43322] + ## 1.81.0 - [***] List block V2 [#42702] From 098255d260f07f2b55880c19d42006ed578c16a4 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 26 Aug 2022 14:53:22 +0200 Subject: [PATCH 11/12] Mobile - Update Podfile after resolving conflicts --- packages/react-native-editor/ios/Podfile.lock | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react-native-editor/ios/Podfile.lock b/packages/react-native-editor/ios/Podfile.lock index 41368ad1f32fb..cf202650ed75f 100644 --- a/packages/react-native-editor/ios/Podfile.lock +++ b/packages/react-native-editor/ios/Podfile.lock @@ -544,12 +544,12 @@ SPEC CHECKSUMS: React-logger: faee236598b0f7e1a5e3b68577016ac451f1f993 react-native-blur: ef741a08d020010ba65e411be0ab82d1d325e7ad react-native-get-random-values: b6fb85e7169b9822976793e467458c151c3e8b69 - react-native-keyboard-aware-scroll-view: 374b637c8684d7de50bd930df1a2d2b8fd49daa5 + react-native-keyboard-aware-scroll-view: 0bc6c2dfe9056935a40dc1a70e764b7a1bbf6568 react-native-safe-area: c9cf765aa2dd96159476a99633e7d462ce5bb94f - react-native-safe-area-context: e471852c5ed67eea4b10c5d9d43c1cebae3b231d + react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 react-native-slider: d4c3367c5db5d2bec3ac0ab9d15ebb73d896034c - react-native-video: 2ad952d1a9ce83e058dcb4a1800af3a99cb7edee - react-native-webview: 1f56115845c98f0a59dfbbac685797c014a821be + react-native-video: 0b09cc469df0249509def5dc1484e0419342de9b + react-native-webview: 193d233c29eacce1f42ca2637dab7ba79c25a6de React-perflogger: 5ab487cacfe6ec19bfe3d3f8072bf71eb07d63da React-RCTActionSheet: 03f25695e095fb5aa003828620943c74cc281fec React-RCTAnimation: eaf82da39f0c36fb0ef2a28df797c5f73a2a98ea @@ -562,8 +562,8 @@ SPEC CHECKSUMS: React-RCTVibration: 3e815c3d2dd2e0e931b68595b5b92d23ba38b3fb React-runtimeexecutor: 393e26602c1b248683372051e34db63e359e3b01 ReactCommon: c0263c1a41509aeb94be3214fa7bc3b71eae5ef6 - RNCClipboard: f49f3de56b40d0f4104680dabadc7a1f063f4fd4 - RNCMaskedView: d367b2a8df3992114e31b32b091a0c00dc800827 + RNCClipboard: 99fc8ad669a376b756fbc8098ae2fd05c0ed0668 + RNCMaskedView: c298b644a10c0c142055b3ae24d83879ecb13ccd RNFastImage: 1f2cab428712a4baaf78d6169eaec7f622556dd7 RNGestureHandler: 3b13cc25407d1cdbee33b6ae65790a55c032d2a9 RNReanimated: b413cc7aa3e2a740d9804cda3a9396a68f9eea7f From 434231b856e22f0e5ab049dc26e481c195381108 Mon Sep 17 00:00:00 2001 From: Gerardo Date: Fri, 26 Aug 2022 15:14:12 +0200 Subject: [PATCH 12/12] Mobile - Add mock style for list item --- test/native/__mocks__/styleMock.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/test/native/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js index f81d0b9809638..1fbc34dc69f58 100644 --- a/test/native/__mocks__/styleMock.js +++ b/test/native/__mocks__/styleMock.js @@ -168,4 +168,7 @@ module.exports = { 'wp-block-list-item__list-item--default': { fontSize: 16, }, + 'wp-block-list-item__list-item-placeholder': { + color: '#87a6bc', + }, };