Try fixing border issue and fix firefox bugs

WordPress · Dec 17, 2021 · bc1a27b · bc1a27b
1 parent 5fa5c02
commit bc1a27b
Showing 1 changed file with 48 additions and 23 deletions.
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -65,36 +65,55 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 					animationFrame = iframe.contentWindow.requestAnimationFrame(
 						() => {
 							setHeight(
-								iframe.contentDocument.querySelector(
-									'.is-root-container'
-								).scrollHeight
+								iframe.contentDocument.documentElement
+									.scrollHeight
 							);
 							animationFrame = null;
 						}
 					);
 				}
 			}
 
-			const resizeObserver = new iframe.contentWindow.ResizeObserver(
-				resizeHeight
-			);
-			const mutationObserver = new iframe.contentWindow.MutationObserver(
-				resizeHeight
-			);
-
-			// Observing the <html> rather than the <body> because the latter
-			// gets destroyed and remounted after initialization in <Iframe>.
-			resizeObserver.observe( iframe.contentDocument.documentElement );
-			mutationObserver.observe( iframe.contentDocument.documentElement, {
-				subtree: true,
-				childList: true,
-				characterData: true,
-			} );
+			let resizeObserver, mutationObserver;
+
+			function registerObservers() {
+				resizeObserver?.disconnect();
+				mutationObserver?.disconnect();
+
+				resizeObserver = new iframe.contentWindow.ResizeObserver(
+					resizeHeight
+				);
+				mutationObserver = new iframe.contentWindow.MutationObserver(
+					resizeHeight
+				);
+
+				// Observing the <html> rather than the <body> because the latter
+				// gets destroyed and remounted after initialization in <Iframe>.
+				resizeObserver.observe(
+					iframe.contentDocument.documentElement
+				);
+				mutationObserver.observe(
+					iframe.contentDocument.documentElement,
+					{
+						subtree: true,
+						childList: true,
+						characterData: true,
+					}
+				);
+
+				resizeHeight();
+			}
+
+			// This is only required in Firefox for some unknown reasons.
+			iframe.addEventListener( 'load', registerObservers );
+			// This is required in Chrome and Safari.
+			registerObservers();
 
 			return () => {
 				iframe.contentWindow?.cancelAnimationFrame( animationFrame );
-				resizeObserver.disconnect();
-				mutationObserver.disconnect();
+				resizeObserver?.disconnect();
+				mutationObserver?.disconnect();
+				iframe.removeEventListener( 'load', registerObservers );
 			};
 		},
 		[ enableResizing ]
@@ -158,10 +177,16 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 							`.is-root-container { display: flow-root; }`
 						}</style>
 						{ enableResizing && (
-							// Some themes will have `min-height: 100vh` for the root container,
-							// which isn't a requirement in auto resize mode.
 							<style>
-								{ `.is-root-container { min-height: 0 !important; }` }
+								{
+									// Force the <html> and <body>'s heights to fit the content.
+									`html, body { height: -moz-fit-content !important; height: fit-content !important; }`
+								}
+								{
+									// Some themes will have `min-height: 100vh` for the root container,
+									// which isn't a requirement in auto resize mode.
+									`.is-root-container { min-height: 0 !important; }`
+								}
 							</style>
 						) }
 					</>