',
$iframe_src_attr,
- esc_attr( $height ),
+ esc_attr( $this->height_style( $height ) ),
$is_poster ? ' display: none;' : '',
esc_attr( $title )
);
return sprintf(
- '
+ '
',
esc_attr( $unique_id ),
esc_html( $title ),
'' !== $download_html ? $download_html : $fallback_download,
$fullscreen_html,
$poster_html,
$iframe_html,
- $this->render_preview_script( $unique_id, $is_poster, $fullscreen ),
esc_attr( $width )
);
}
/**
- * Build the inline behavior script for a preview iframe.
- *
- * Wires only the behaviors present in this instance: the optional fullscreen
- * button and the optional poster click-to-load. When both are enabled the
- * fullscreen button first activates the deferred poster (loading and
- * revealing the iframe) so it never tries to expand a hidden, srcless frame.
- * When neither is enabled no script is emitted. Each block is scoped to the
- * instance container so multiple embeds on one page stay independent.
+ * CSS sizing declarations for an embed of the requested height.
*
- * Teacher-mode visibility is handled by eXeLearning core through the
- * ?exe-teacher=1 query parameter on the iframe src, so no host-side CSS/JS
- * injection is emitted here.
+ * A pixel height is written as-is. A percentage means "this fraction of the
+ * rendered width" -- the reading every eXeLearning embed has always had -- and
+ * CSS `height: 75%` does not say that: it resolves against the parent's height,
+ * which no theme sets, so the frame collapses. `aspect-ratio` states the same
+ * intent in CSS alone, which is why the script and resize observer this used to
+ * need are gone.
*
- * @param string $unique_id Container element ID.
- * @param bool $is_poster Whether the iframe loads lazily from a poster.
- * @param bool $fullscreen Whether the fullscreen button is present.
- * @return string Inline ',
- esc_attr( $unique_id ),
- $body
- );
+ return sprintf( 'height: %s;', $height );
}
/**
@@ -518,6 +450,9 @@ private function render_toolbar_download_fallback( $file_url ) {
private function enqueue_frontend_assets() {
wp_enqueue_style( 'dashicons' );
+ // Registered with the block's frontend assets.
+ wp_enqueue_script( 'exelearning-embed' );
+
wp_enqueue_style(
'exelearning-frontend',
plugins_url( '../assets/css/exelearning.css', __FILE__ ),
diff --git a/tests/e2e/shortcode-viewer.spec.js b/tests/e2e/shortcode-viewer.spec.js
index a133c46..779cc48 100644
--- a/tests/e2e/shortcode-viewer.spec.js
+++ b/tests/e2e/shortcode-viewer.spec.js
@@ -190,12 +190,13 @@ test.describe('Shortcode viewer (public frontend)', () => {
await expect(page.locator('.exelearning-fullscreen-btn')).toBeVisible();
});
- test('height="75%" is applied to the iframe', async ({ page }) => {
+ test('height="75%" makes the iframe 75% as tall as it is wide', async ({ page }) => {
await gotoScenario(page, 'height');
- // A percentage height can compute to 0 without a sized parent, so assert
- // on the inline style rather than the element's rendered box.
- const style = await page.locator('iframe.exelearning-iframe').getAttribute('style');
- expect(style).toContain('height: 75%');
+ // The percentage is rendered as an aspect-ratio, which resolves against the
+ // embed's own width, so the rendered box is what this can be asserted on --
+ // a bare CSS `height: 75%` would have computed to 0 against an unsized parent.
+ const box = await page.locator('iframe.exelearning-iframe').boundingBox();
+ expect(Math.abs(box.height - box.width * 0.75)).toBeLessThanOrEqual(2);
});
test('width="75%" is applied to the embed box', async ({ page }) => {
diff --git a/tests/js/exelearning_embed.test.js b/tests/js/exelearning_embed.test.js
new file mode 100644
index 0000000..6cd81ef
--- /dev/null
+++ b/tests/js/exelearning_embed.test.js
@@ -0,0 +1,239 @@
+// Unit tests for assets/js/exelearning-embed.js.
+//
+// The script replaces the per-instance inline