Try to fix auto resizing in template part focus mode (#37394)

* Try to fix auto resizing in template part focus mode * Force min-height: 0 in auto resize mode * Try fixing border issue and fix firefox bugs * Force min-height: 0 for body and html * Remove mutation observer
WordPress · Dec 28, 2021 · 32bcb7b · 32bcb7b
1 parent 5404904
commit 32bcb7b
Showing 1 changed file with 52 additions and 12 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
@@ -57,22 +57,49 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
  return;
  }
 
- const resizeObserver = new iframe.contentWindow.ResizeObserver(
- () => {
- setHeight(
- iframe.contentDocument.querySelector(
- `.edit-site-block-editor__block-list`
- ).offsetHeight
+ let animationFrame = null;
+
+ function resizeHeight() {
+ if ( ! animationFrame ) {
+ // Throttle the updates on animation frame.
+ animationFrame = iframe.contentWindow.requestAnimationFrame(
+ () => {
+ setHeight(
+ iframe.contentDocument.documentElement
+ .scrollHeight
+ );
+ animationFrame = null;
+ }
  );
  }
- );
+ }
+
+ let resizeObserver;
+
+ function registerObserver() {
+ resizeObserver?.disconnect();
+
+ resizeObserver = new iframe.contentWindow.ResizeObserver(
+ resizeHeight
+ );
+ // Observing the <html> rather than the <body> because the latter
+ // gets destroyed and remounted after initialization in <Iframe>.
+ resizeObserver.observe(
+ iframe.contentDocument.documentElement
+ );
+
+ resizeHeight();
+ }
 
- // Observing the <html> rather than the <body> because the latter
- // gets destroyed and remounted after initialization in <Iframe>.
- resizeObserver.observe( iframe.contentDocument.documentElement );
+ // This is only required in Firefox for some unknown reasons.
+ iframe.addEventListener( 'load', registerObserver );
+ // This is required in Chrome and Safari.
+ registerObserver();
 
  return () => {
- resizeObserver.disconnect();
+ iframe.contentWindow?.cancelAnimationFrame( animationFrame );
+ resizeObserver?.disconnect();
+ iframe.removeEventListener( 'load', registerObserver );
  };
  },
  [ enableResizing ]
@@ -133,8 +160,21 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
  <style>{
  // Forming a "block formatting context" to prevent margin collapsing.
  // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- `.edit-site-block-editor__block-list { display: flow-root; }`
+ `.is-root-container { display: flow-root; }`
  }</style>
+ { enableResizing && (
+ <style>
+ {
+ // Force the <html> and <body>'s heights to fit the content.
+ `html, body { height: -moz-fit-content !important; height: fit-content !important; min-height: 0 !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>
+ ) }
  </>
  }
  assets={ settings.__unstableResolvedAssets }