Skip to content

fix: serve embed behavior as an enqueued script instead of inline markup - #125

Merged
erseco merged 5 commits into
mainfrom
feature/enqueue-embed-behavior
Sep 27, 2026
Merged

erseco merged 5 commits into
mainfrom
feature/enqueue-embed-behavior

Conversation

@erseco

@erseco erseco commented Sep 18, 2026 •

Copy link
Copy Markdown
Contributor

No translation changes: no strings change here, and since #148 code-only changes no longer touch the catalogs.

WordPress.org asked that plugins stop printing <script> and <style> blocks by hand and use the enqueue APIs instead. After this PR, plugin PHP prints none.

Frontend

  • Block and shortcode: each printed an inline fullscreen/poster <script> per embed. One delegated script, assets/js/exelearning-embed.js, replaces both.
    • It is registered with exelearning-embed-loader in ExeLearning_Elp_Upload_Block::register_frontend_scripts(), hooked on init.
    • The block and the shortcode enqueue it by handle only when an embed renders.
    • No new class: the earlier ExeLearning_Embed_Assets wrapper was dropped.
  • ExeLearning_Viewer_Enhancements: printed a <style> and a ResizeObserver <script> to turn a percentage height (for example height="75%") into pixels. CSS aspect-ratio produces the same box without script, and without the 150px collapse before the script ran. The class and its tests are removed, and the E2E height test is rewritten for aspect-ratio.

Standalone editor and export pages

These are full HTML documents written without a theme header, so there is no wp_head to print a queue into. They still use the queue, but print only their own handles:

  • Scripts: each bridge is registered with wp_register_script() and enqueued with wp_enqueue_script(). Its configuration is added with wp_add_inline_script( …, 'before' ), which WordPress always prints before the src tag. Then wp_print_scripts( array( $handle ) ) prints that handle alone into an output buffer, with no theme or other plugin scripts.
  • defer on the export bridge, kept on every supported version:
    • WordPress 6.3+ honours wp_script_add_data( $handle, 'strategy', 'defer' ).
    • For 6.1 and 6.2 a script_loader_tag filter adds the attribute. It is scoped to that handle and removed right after the print, and it only touches the first <script> tag with a src (the inline config arrives in the same string). A test simulates pre-6.3 core to cover it.
    • Passing array( 'strategy' => 'defer' ) to wp_register_script() is avoided on purpose: on 6.1/6.2 it is read as $in_footer = true.
  • Styles: the editor page's CSS is registered and enqueued as an inline style (wp_register_style( false ) + wp_enqueue_style() + wp_add_inline_style()) and printed with wp_print_styles( handle ).

The embed scripts are registered on init, so the shortcode can enqueue them even where wp_enqueue_scripts never fires (the /embed/ template, previews).

Verification

  • PHPUnit: all green, including new checks:
    • the config is printed inline before the bridge;
    • the export bridge is deferred and the editor's is not;
    • the bridge is printed exactly once;
    • the embed scripts are registered on init.
  • npm run test:js: 258 passed, including every branch of exelearning-embed.js.
  • WordPress Playground (the exact export page output):
    • 6.1.14: …-js-before config, then <script defer src=… id='exelearning-export-bridge-js'>;
    • 6.3.12: the same, with defer data-wp-strategy='defer'.
  • make test-e2e for shortcode-viewer and viewer-enhancements: 38 passed.
  • PHPCS clean with no NonEnqueuedScript exclusions left.

@github-actions

Copy link
Copy Markdown
Contributor

Test in WordPress Playground

Test the plugin with the code from this branch:

Preview in WordPress Playground

ℹ️ The eXeLearning editor is fetched from the shared release and unpacked into the plugin when the playground boots, so the first load may take a few extra seconds. ELP upload, shortcode, Gutenberg block and preview work normally.

@codecov-commenter

codecov-commenter commented Sep 18, 2026 •

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 98.85057% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 96.43%. Comparing base (8aed260) to head (c6f1ee7).

Files with missing lines Patch % Lines
includes/class-export-bootstrap.php 95.65% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff              @@
##               main     #125      +/-   ##
============================================
+ Coverage     96.39%   96.43%   +0.04%     
+ Complexity      815      806       -9     
============================================
  Files            36       36              
  Lines          4213     4238      +25     
============================================
+ Hits           4061     4087      +26     
+ Misses          152      151       -1     
Flag Coverage Δ
javascript 95.84% <100.00%> (+0.13%) ⬆️
php 96.64% <98.14%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
admin/views/editor-bootstrap.php 92.50% <100.00%> (+0.95%) ⬆️
assets/js/exelearning-embed.js 100.00% <100.00%> (ø)
exelearning.php 0.00% <ø> (ø)
includes/class-elp-upload-block.php 100.00% <100.00%> (ø)
public/class-shortcodes.php 100.00% <100.00%> (ø)
includes/class-export-bootstrap.php 90.72% <95.65%> (+0.72%) ⬆️
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@erseco
erseco force-pushed the feature/enqueue-embed-behavior branch from 619901a to 1f4ebf8 Compare September 26, 2026 10:17
@erseco
erseco changed the base branch from main to feature/pot-file-references September 26, 2026 10:17
@erseco
erseco force-pushed the feature/pot-file-references branch from 9184b21 to bc32141 Compare September 26, 2026 10:50
Base automatically changed from feature/pot-file-references to main September 26, 2026 11:08
WordPress.org asked that plugins stop printing <script> and <style> blocks by
hand. The frontend printed three:

- the block and the shortcode each emitted an inline fullscreen/poster script
  per embed. One delegated script, assets/js/exelearning-embed.js, replaces
  both; it is registered with the block's other frontend assets and enqueued
  only when an embed renders.
- ExeLearning_Viewer_Enhancements printed a <style> and a ResizeObserver
  <script> to turn a percentage height into pixels. CSS aspect-ratio gives
  the same box without script, so the class is removed.

The editor and export pages are standalone HTML documents written without a
theme header, so their tags are built with wp_get_inline_script_tag() and
wp_get_script_tag() (WordPress 5.7+), keeping the export bridge deferred as
before, and the editor page's CSS goes through wp_add_inline_style().
@erseco
erseco force-pushed the feature/enqueue-embed-behavior branch from 1f4ebf8 to 20700a0 Compare September 26, 2026 11:12
erseco and others added 4 commits September 26, 2026 17:11
Register the editor and export bridges with wp_register_script(), add their
configuration with wp_add_inline_script( ..., 'before' ) and print only that
handle with wp_print_scripts(), so the review's 'use wp_enqueue commands'
applies literally, as it already did for the editor page's CSS.

The export bridge stays deferred on every supported version: WordPress 6.3+
honours wp_script_add_data( ..., 'strategy', 'defer' ); for 6.1 and 6.2 a
script_loader_tag filter, scoped to that handle and removed right after the
print, adds the attribute. Checked on WordPress 6.1.14 and 6.3.12.

Also register the embed scripts on init instead of wp_enqueue_scripts, so the
shortcode can enqueue them in contexts where that hook never fires (the
/embed/ template, previews), and restore the AGENTS.md note from #148 that an
earlier rebase of this branch dropped.
…llback

Enqueue the editor and export bridges and the editor page style before
printing them, so the code reads as the review asked: register, enqueue,
add inline, print.

The WordPress < 6.3 defer fallback matched the exact tag serialization
(id='…-js'>). It now adds defer to the first <script> tag with a src in the
handle's output, which skips the inline config printed in the same string,
and leaves a tag that already has defer alone. A test simulates pre-6.3 core
to cover it; checked again on WordPress 6.1.14 and 6.3.12.

Also cover the remaining branches of exelearning-embed.js: the legacy Edge
fullscreen request, a control outside any embed, and a non-element target.
@erseco
erseco merged commit ae96741 into main Sep 27, 2026
5 checks passed
@erseco
erseco deleted the feature/enqueue-embed-behavior branch September 27, 2026 03:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants