Making things backwards compatible by defaulting to ownerdocument att…

…ributes.
WordPress · Jul 29, 2024 · 9a53507 · 9a53507
1 parent 827931a
commit 9a53507
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -126,6 +126,7 @@ function Iframe( {
 	);
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
+	const [ iframeOwnerDocument, setIframeOwnerDocument ] = useState();
 	const prevContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
@@ -138,6 +139,7 @@ function Iframe( {
 	const setRef = useRefEffect( ( node ) => {
 		node._load = () => {
 			setIframeDocument( node.contentDocument );
+			setIframeOwnerDocument( node.ownerDocument );
 		};
 		let iFrameDocument;
 		// Prevent the default browser action for files dropped outside of dropzones.
@@ -262,11 +264,25 @@ function Iframe( {
 		isZoomedOut ? iframeResizeRef : null,
 	] );
 
+	const userIsRTL = isRTL();
+
+	// Fallback locale values from parent frame.
+	let defaultLang = iframeOwnerDocument?.lang;
+	let defaultDir = iframeOwnerDocument?.dir;
+
+	if (
+		siteLocale?.hasOwnProperty( 'isRTL' ) &&
+		typeof siteLocale?.lang === 'string'
+	) {
+		defaultLang = siteLocale.lang;
+		defaultDir = siteLocale.isRTL ? 'rtl' : 'ltr';
+	}
+
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
 	const html = `<!doctype html>
-<html lang="${ siteLocale?.lang }" dir="${ siteLocale?.isRTL ? 'rtl' : 'ltr' }">
+<html lang="${ defaultLang }" dir="${ defaultDir }">
 	<head>
 		<meta charset="utf-8">
 		<script>window.frameElement._load()</script>
@@ -285,9 +301,11 @@ function Iframe( {
 			/* 
 				Block placeholders are "technically" part of the editor UI,
 				and should therefore match the editor UI's directionality.
+				! A better approach might be to create a HOC wrapping Placeholder in @wordpress/block-editor
+				that sets the directionality and lang of the Placeholder component.
 			*/
 			.block-editor-block-list__layout .components-placeholder { 
-				direction: ${ isRTL() ? 'rtl' : 'ltr' };
+				direction: ${ userIsRTL ? 'rtl' : 'ltr' };
 			}
 		</style>
 		${ styles }

diff --git a/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js b/test/e2e/specs/editor/plugins/iframed-enqueue-block-editor-settings.spec.js
@@ -101,25 +101,23 @@ test.describe( 'iframed block editor settings styles', () => {
 		editor,
 		page,
 	} ) => {
+		const htmlElement = editor.canvas.locator( 'css=html' );
+		await expect( htmlElement ).toHaveAttribute( 'lang', 'en_US' );
+		await expect( htmlElement ).toHaveAttribute( 'dir', 'ltr' );
+
 		await page.evaluate( () => {
 			const settings = window.wp.data
 				.select( 'core/editor' )
 				.getEditorSettings();
 			window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
 				...settings,
-				locale: {
-					site: {
-						lang: 'ar',
-						isRTL: true,
-					},
-					user: {
-						lang: 'en_US',
-						isRTL: false,
-					},
+				siteLocale: {
+					lang: 'ar',
+					isRTL: true,
 				},
 			} );
 		} );
-		const htmlElement = editor.canvas.locator( 'css=html' );
+
 		await expect( htmlElement ).toHaveAttribute( 'lang', 'ar' );
 		await expect( htmlElement ).toHaveAttribute( 'dir', 'rtl' );
 	} );