[RNMobile][Embed block] Add device's locale to preview content (#33858)

* Add locale to block editor settings * Add localized embed content * Sort sandbox props * Update react-native-editor changelog
WordPress · Sep 9, 2021 · 7c88877 · 7c88877
1 parent eb1071f
commit 7c88877
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/packages/block-library/src/embed/embed-preview.native.js b/packages/block-library/src/embed/embed-preview.native.js
@@ -9,11 +9,14 @@ import classnames from 'classnames/dedupe';
  * WordPress dependencies
  */
 import { View } from '@wordpress/primitives';
-
-import { BlockCaption } from '@wordpress/block-editor';
+import {
+	BlockCaption,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { memo, useState } from '@wordpress/element';
 import { SandBox } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -38,6 +41,7 @@ const EmbedPreview = ( {
 	url,
 } ) => {
 	const [ isCaptionSelected, setIsCaptionSelected ] = useState( false );
+	const { locale } = useSelect( blockEditorStore ).getSettings();
 
 	const wrapperStyle = styles[ 'embed-preview__wrapper' ];
 	const wrapperAlignStyle =
@@ -105,6 +109,7 @@ const EmbedPreview = ( {
 				>
 					<PreviewContent
 						html={ html }
+						lang={ locale }
 						title={ iframeTitle }
 						type={ sandboxClassnames }
 						providerUrl={ providerUrl }

diff --git a/packages/components/src/sandbox/index.native.js b/packages/components/src/sandbox/index.native.js
@@ -154,8 +154,9 @@ const EMPTY_ARRAY = [];
 
 function Sandbox( {
 	containerStyle,
-	html = '',
 	customJS,
+	html = '',
+	lang = 'en',
 	providerUrl = '',
 	scripts = EMPTY_ARRAY,
 	styles = EMPTY_ARRAY,
@@ -185,9 +186,6 @@ function Sandbox( {
 	} );
 
 	function getHtmlDoc() {
-		// TODO: Use the device's locale
-		const lang = 'en';
-
 		// Put the html snippet into a html document, and update the state to refresh the WebView,
 		// we can use this in the future to inject custom styles or scripts.
 		// Scripts go into the body rather than the head, to support embedded content such as Instagram

diff --git a/packages/editor/src/components/provider/index.native.js b/packages/editor/src/components/provider/index.native.js
@@ -92,6 +92,7 @@ class NativeEditorProvider extends Component {
 	componentDidMount() {
 		const {
 			capabilities,
+			locale,
 			updateSettings,
 			galleryWithImageBlocks,
 		} = this.props;
@@ -100,6 +101,7 @@ class NativeEditorProvider extends Component {
 			...capabilities,
 			...{ __unstableGalleryWithImageBlocks: galleryWithImageBlocks },
 			...this.getThemeColors( this.props ),
+			locale,
 		} );
 
 		this.subscriptionParentGetHtml = subscribeParentGetHtml( () => {

diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
@@ -12,6 +12,7 @@ For each user feature we should also add a importance categorization label  to i
 ## Unreleased
 -   [**] [Embed block] Implement WP embed preview component [#34004]
 -   [*] [Embed block] Fix content disappearing on Android when switching light/dark mode [#34207]
+-   [*] Embed block: Add device's locale to preview content [#33858]
 
 ## 1.61.0
 -   [**] Enable embed preview for a list of providers (for now only YouTube and Twitter) [#34446]

diff --git a/packages/react-native-editor/src/index.js b/packages/react-native-editor/src/index.js
@@ -84,6 +84,7 @@ const setupInitHooks = () => {
 				rawStyles,
 				rawFeatures,
 				galleryWithImageBlocks,
+				locale,
 			} = props;
 
 			if ( initialData === undefined && __DEV__ ) {
@@ -112,6 +113,7 @@ const setupInitHooks = () => {
 				rawStyles,
 				rawFeatures,
 				galleryWithImageBlocks,
+				locale,
 			};
 		}
 	);