Block theme: Fix preview height on my patterns page

This brings back the dynamic iframe height, but only when the preview

public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/render.php

@@ -13,6 +13,7 @@
 	'url' => $view_url,
 	'previewWidth' => 1200,
 	'previewHeight' => 200,
+	'isControlled' => true,
 ];
 $encoded_state = wp_json_encode( $init_state );
 

public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/style.scss

@@ -26,6 +26,7 @@
 			margin: 0;
 			display: block;
 			border-radius: var(--wp--custom--wporg-pattern-preview--border--radius);
+			pointer-events: auto;
 		}
 	}
 

public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/controls/view.js

@@ -110,15 +110,33 @@ const { actions, state } = store( 'wporg/patterns/preview', {
 		},
 		updatePreviewHeight() {
 			const context = getContext();
-			context.previewHeight = 600;
+			const { ref } = getElement();
+
+			// If this is a "controlled" preview (has the toggles and
+			// drag handles), it should also have a fixed height.
+			if ( context.isControlled ) {
+				context.previewHeight = 600;
+				return;
+			}
+
+			// Need to "use" previewWidth so that `data-wp-watch` will re-run this action when it changes.
+			context.previewWidth; // eslint-disable-line no-unused-expressions
+
+			const iframeDoc = ref.contentDocument;
+			const height = iframeDoc.querySelector( '.entry-content' )?.clientHeight;
+			if ( height ) {
+				context.previewHeight = height * state.scale;
+			}
 		},
 		handleOnResize() {
 			const context = getContext();
 			const { ref } = getElement();
 
 			// Back up to the block container, so that this works regardless
 			// of which element interaction triggered it.
-			const container = ref.closest( '.wp-block-wporg-pattern-view-control' );
+			const container =
+				ref.closest( '.wp-block-wporg-pattern-view-control' ) ||
+				ref.closest( '.wp-block-wporg-pattern-preview' );
 			if ( container ) {
 				const preview = container.querySelector( '.wp-block-wporg-pattern-preview__container' );
 				context.pageWidth = preview?.clientWidth;

public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/render.php

@@ -18,6 +18,7 @@
 	'url' => $view_url,
 	'previewWidth' => $viewport_width,
 	'previewHeight' => 200,
+	'isControlled' => false,
 ];
 $encoded_state = wp_json_encode( $init_state );
 

public_html/wp-content/themes/wporg-pattern-directory-2024/src/blocks/pattern-preview/frame/style.scss

@@ -7,5 +7,6 @@
 	iframe {
 		border: none;
 		max-width: none;
+		pointer-events: none;
 	}
 }