Mobile Release v1.47.0

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

@@ -476,7 +476,7 @@ const ColumnsEdit = ( props ) => {
 				editorSidebarOpened: isSelected && isEditorSidebarOpened(),
 			};
 		},
-		[ clientId ]
+		[ clientId, isSelected ]
 	);
 
 	const memoizedInnerWidths = useMemo( () => {

packages/components/src/color-palette/index.native.js

@@ -105,7 +105,8 @@ function ColorPalette( {
 	}, [ currentSegment ] );
 
 	function isSelectedCustom() {
-		const isWithinColors = activeColor && colors.includes( activeColor );
+		const isWithinColors =
+			activeColor && colors && colors.includes( activeColor );
 		if ( activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;

packages/components/src/mobile/utils/use-unit-converter-to-mobile.native.js

@@ -37,7 +37,7 @@ const getValueAndUnit = ( value, unit ) => {
 
 const convertUnitToMobile = ( containerSize, globalStyles, value, unit ) => {
 	const { width, height } = containerSize;
-	const { valueToConvert, valueUnit } = getValueAndUnit( value, unit );
+	const { valueToConvert, valueUnit } = getValueAndUnit( value, unit ) || {};
 	const { fontSize = 16 } = globalStyles || {};
 
 	switch ( valueUnit ) {

packages/react-native-aztec/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-aztec",
-	"version": "1.46.0",
+	"version": "1.47.0",
 	"description": "Aztec view for react-native.",
 	"private": true,
 	"author": "The WordPress Contributors",

packages/react-native-bridge/android/src/main/java/org/wordpress/mobile/WPAndroidGlue/GutenbergProps.kt

@@ -9,6 +9,7 @@ data class GutenbergProps @JvmOverloads constructor(
     val enableXPosts: Boolean,
     val enableUnsupportedBlockEditor: Boolean,
     val canEnableUnsupportedBlockEditor: Boolean,
+    val enableAudioBlock: Boolean,
     val localeSlug: String,
     val postType: String,
     val editorTheme: Bundle?,
@@ -44,6 +45,7 @@ data class GutenbergProps @JvmOverloads constructor(
         putBoolean(PROP_CAPABILITIES_MEDIAFILES_COLLECTION_BLOCK, enableMediaFilesCollectionBlocks)
         putBoolean(PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, enableUnsupportedBlockEditor)
         putBoolean(PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR, canEnableUnsupportedBlockEditor)
+        putBoolean(PROP_CAPABILITIES_AUDIO_BLOCK, enableAudioBlock)
     }
 
     companion object {
@@ -74,5 +76,6 @@ data class GutenbergProps @JvmOverloads constructor(
         const val PROP_CAPABILITIES_XPOSTS = "xposts"
         const val PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR = "unsupportedBlockEditor"
         const val PROP_CAPABILITIES_CAN_ENABLE_UNSUPPORTED_BLOCK_EDITOR = "canEnableUnsupportedBlockEditor"
+        const val PROP_CAPABILITIES_AUDIO_BLOCK = "audioBlock"
     }
 }

packages/react-native-bridge/ios/GutenbergBridgeDelegate.swift

@@ -22,6 +22,7 @@ public enum Capabilities: String {
     case xposts
     case unsupportedBlockEditor
     case canEnableUnsupportedBlockEditor
+    case audioBlock
 }
 
 /// Wrapper for single block data
@@ -269,5 +270,5 @@ public extension GutenbergBridgeDelegate {
     func gutenbergDidRequestMediaFilesFailedRetryDialog(_ mediaFiles: [[String: Any]]) { }
     func gutenbergDidRequestMediaFilesUploadCancelDialog(_ mediaFiles: [[String: Any]]) { }
     func gutenbergDidRequestMediaFilesSaveCancelDialog(_ mediaFiles: [[String: Any]]) { }
-    func gutenbergDidRequestMediaFilesBlockReplaceSync() {}
+    func gutenbergDidRequestMediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {}
 }

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.m

@@ -31,6 +31,6 @@ @interface RCT_EXTERN_MODULE(RNReactNativeGutenbergBridge, NSObject)
 RCT_EXTERN_METHOD(setFocalPointPickerTooltipShown:(BOOL)tooltipShown)
 RCT_EXTERN_METHOD(actionButtonPressed:(NSString *)buttonType)
 RCT_EXTERN_METHOD(mediaSaveSync)
-RCT_EXTERN_METHOD(mediaFilesBlockReplaceSync)
+RCT_EXTERN_METHOD(mediaFilesBlockReplaceSync:(NSArray<NSDictionary *> *)mediaFiles clientId:(NSString *)clientId)
 
 @end

packages/react-native-bridge/ios/RNReactNativeGutenbergBridge.swift

@@ -338,10 +338,10 @@ public class RNReactNativeGutenbergBridge: RCTEventEmitter {
     }
 
     @objc
-    func mediaFilesBlockReplaceSync() {
+    func mediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {
         DispatchQueue.main.async {
             if self.hasObservers {
-                self.delegate?.gutenbergDidRequestMediaFilesBlockReplaceSync()
+                self.delegate?.gutenbergDidRequestMediaFilesBlockReplaceSync(mediaFiles, clientId: clientId)
             }
         }
     }

packages/react-native-bridge/package.json

@@ -1,31 +1,31 @@
 {
-  "name": "@wordpress/react-native-bridge",
-  "version": "1.46.0",
-  "description": "Native bridge library used to integrate the block editor into a native App.",
-  "private": true,
-  "author": "The WordPress Contributors",
-  "license": "GPL-2.0-or-later",
-  "keywords": [
-    "react-native"
-  ],
-  "homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-bridge/README.md",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/WordPress/gutenberg.git",
-    "directory": "packages/react-native-bridge"
-  },
-  "bugs": {
-    "url": "https://github.com/WordPress/gutenberg/issues"
-  },
-  "main": "index.js",
-  "react-native": "index",
-  "dependencies": {
-    "@wordpress/react-native-aztec": "file:../react-native-aztec"
-  },
-  "peerDependencies": {
-    "react-native": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "@wordpress/react-native-bridge",
+	"version": "1.47.0",
+	"description": "Native bridge library used to integrate the block editor into a native App.",
+	"private": true,
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"react-native"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/react-native-bridge/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/react-native-bridge"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"main": "index.js",
+	"react-native": "index",
+	"dependencies": {
+		"@wordpress/react-native-aztec": "file:../react-native-aztec"
+	},
+	"peerDependencies": {
+		"react-native": "*"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
 }

packages/react-native-editor/CHANGELOG.md

@@ -10,9 +10,14 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
-* [**] Make inserter long-press options "add to beginning" and "add to end" always available. [#28610]
+
+## 1.47.0
 * [**] Add support for setting Cover block focal point. [#25810]
 
+## 1.46.1
+* [**] Make inserter long-press options "add to beginning" and "add to end" always available. [#28610]
+* [*] Fix crash when Column block width attribute was empty. [#29015]
+
 ## 1.46.0
 * [***] New Block: Audio [#27401, #27467, #28594]
 * [**] Add support for setting heading anchors [#27935]

packages/react-native-editor/android/app/src/main/java/com/gutenberg/MainActivity.java

@@ -31,6 +31,7 @@ protected Bundle getLaunchOptions() {
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_MENTIONS, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_XPOSTS, true);
                 capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_UNSUPPORTED_BLOCK_EDITOR, true);
+                capabilities.putBoolean(GutenbergProps.PROP_CAPABILITIES_AUDIO_BLOCK, true);
                 bundle.putBundle(GutenbergProps.PROP_CAPABILITIES, capabilities);
                 return bundle;
             }

packages/react-native-editor/ios/GutenbergDemo/GutenbergViewController.swift

@@ -233,7 +233,7 @@ extension GutenbergViewController: GutenbergBridgeDelegate {
         print(#function)
     }
 
-    func gutenbergDidRequestMediaFilesBlockReplaceSync() {
+    func gutenbergDidRequestMediaFilesBlockReplaceSync(_ mediaFiles: [[String: Any]], clientId: String) {
         print(#function)
     }
 
@@ -310,6 +310,7 @@ extension GutenbergViewController: GutenbergBridgeDataSource {
             .unsupportedBlockEditor: unsupportedBlockEnabled,
             .canEnableUnsupportedBlockEditor: unsupportedBlockCanBeActivated,
             .mediaFilesCollectionBlock: true,
+            .audioBlock: true
         ]
     }
 

packages/react-native-editor/ios/Podfile.lock

@@ -21,7 +21,7 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - Gutenberg (1.46.0):
+  - Gutenberg (1.47.0):
     - React-Core (= 0.61.5)
     - React-CoreModules (= 0.61.5)
     - React-RCTImage (= 0.61.5)
@@ -253,7 +253,7 @@ PODS:
     - React-Core
   - RNSVG (9.13.6-gb):
     - React-Core
-  - RNTAztecView (1.46.0):
+  - RNTAztecView (1.47.0):
     - React-Core
     - WordPress-Aztec-iOS (~> 1.19.3)
   - WordPress-Aztec-iOS (1.19.3)
@@ -402,7 +402,7 @@ SPEC CHECKSUMS:
   FBReactNativeSpec: 118d0d177724c2d67f08a59136eb29ef5943ec75
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
-  Gutenberg: ddf8773fb7cb17282b990a92bb4bb689f5561778
+  Gutenberg: 103a9ebea785a8e1dd4c8bd4378d4a8a70efa678
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
@@ -435,7 +435,7 @@ SPEC CHECKSUMS:
   RNReanimated: f05baf4cd76b6eab2e4d7e2b244424960b968918
   RNScreens: 953633729a42e23ad0c93574d676b361e3335e8b
   RNSVG: 46c4b680fe18237fa01eb7d7b311d77618fde31f
-  RNTAztecView: 70085b41b999a670bc94d13e58adfd6c7f46fa2a
+  RNTAztecView: 9c5552d00636833f452d88509421697869b1d13a
   WordPress-Aztec-iOS: b7ac8b30f746992e85d9668453ac87c2cdcecf4f
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 

packages/react-native-editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/react-native-editor",
-	"version": "1.46.0",
+	"version": "1.47.0",
 	"description": "Mobile WordPress gutenberg editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -79,7 +79,7 @@
 		"access": "public"
 	},
 	"scripts": {
-        "start": "echo \"\\x1b[33mThe start command is not available in this project. It is strongly recommended to use \\x1b[1:33mstart:reset\\x1b[0m\\x1b[33m to perform some cleanup when starting the metro bundler.\nOr you may use \\x1b[1:33mstart:quick\\x1b[0m\\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\\x1b[0m\"",
+		"start": "echo \"\\x1b[33mThe start command is not available in this project. It is strongly recommended to use \\x1b[1:33mstart:reset\\x1b[0m\\x1b[33m to perform some cleanup when starting the metro bundler.\nOr you may use \\x1b[1:33mstart:quick\\x1b[0m\\x1b[33m for a quicker startup, but this may lead to unexpected javascript errors when running the app.\\x1b[0m\"",
 		"start:debug": "node --inspect-brk node_modules/.bin/react-native start",
 		"start:reset": "npm run clean:runtime && npm run start:quick -- --reset-cache",
 		"start:quick": "react-native start",

packages/react-native-editor/src/index.js

@@ -18,6 +18,7 @@ import {
 	validateThemeColors,
 	validateThemeGradients,
 } from '@wordpress/block-editor';
+import { dispatch } from '@wordpress/data';
 
 const reactNativeSetup = () => {
 	// Disable warnings as they disrupt the user experience in dev mode
@@ -99,6 +100,21 @@ const setupInitHooks = () => {
 			};
 		}
 	);
+
+	wpHooks.addAction(
+		'native.render',
+		'core/react-native-editor',
+		( props ) => {
+			const isAudioBlockEnabled =
+				props.capabilities && props.capabilities.audioBlock;
+
+			if ( isAudioBlockEnabled === true ) {
+				dispatch( 'core/edit-post' ).showBlockTypes( [ 'core/audio' ] );
+			} else {
+				dispatch( 'core/edit-post' ).hideBlockTypes( [ 'core/audio' ] );
+			}
+		}
+	);
 };
 
 let blocksRegistered = false;

packages/rich-text/src/component/index.native.js

@@ -756,6 +756,12 @@ export class RichText extends Component {
 
 		if ( isSelected && ! prevIsSelected ) {
 			this._editor.focus();
+			// Update selection props explicitly when component is selected as Aztec won't call onSelectionChange
+			// if its internal value hasn't change. When created, default value is 0, 0
+			this.onSelectionChange(
+				this.props.selectionStart || 0,
+				this.props.selectionEnd || 0
+			);
 		} else if ( ! isSelected && prevIsSelected ) {
 			this._editor.blur();
 		}