Skip to content

Styles are not loaded on some hosted WordPress environments like TasteWP #3

@erseco

Description

@erseco

When using the wp-exelearning plugin on hosted or sandboxed WordPress environments such as TasteWP, the eXeLearning preview loads without styles and several related assets return 404.

Summary

The imported .elpx file is detected and loaded, but the preview shown inside the block/editor appears unstyled. The content is visible, though CSS, JS, icons, and image assets are missing.

This seems to affect environments like TasteWP, where the preview is loaded inside an iframe and asset requests under the plugin REST endpoint fail.

Environment

  • Plugin: wp-exelearning
  • Platform: WordPress
  • Affected environment example: TasteWP
  • Example site: https://tastewp.com/
  • Example affected instance: https://innovatelaugh.s2-tastewp.com/

Steps to reproduce

  1. Install and activate the wp-exelearning plugin on a TasteWP site.
  2. Open the block editor.
  3. Add the eXeLearning block.
  4. Upload or select an .elpx file.
  5. Wait for the preview to render.

Expected behavior

The preview should load with its full styling and assets, including:

  • CSS
  • JS
  • icons
  • images
  • iDevice resources

Actual behavior

The preview renders without styles. Many assets requested from the REST content endpoint return 404, for example:

  • /wp-json/exelearning/v1/content/<hash>/libs/bootstrap/bootstrap.min.css
  • /wp-json/exelearning/v1/content/<hash>/content/css/base.css
  • /wp-json/exelearning/v1/content/<hash>/idevices/text/text.css
  • /wp-json/exelearning/v1/content/<hash>/theme/style.css
  • /wp-json/exelearning/v1/content/<hash>/libs/common.js
  • /wp-json/exelearning/v1/content/<hash>/libs/common_i18n.js
  • /wp-json/exelearning/v1/content/<hash>/libs/jquery/jquery.min.js
  • /wp-json/exelearning/v1/content/<hash>/libs/exe_export.js
  • /wp-json/exelearning/v1/content/<hash>/libs/bootstrap/bootstrap.bundle.min.js
  • /wp-json/exelearning/v1/content/<hash>/idevices/text/text.js
  • /wp-json/exelearning/v1/content/<hash>/theme/style.js
  • /wp-json/exelearning/v1/content/<hash>/theme/icons/arts.png
  • /wp-json/exelearning/v1/content/<hash>/content/resources/88x31.png
  • /wp-json/exelearning/v1/content/<hash>/content/resources/grocery-store-man-shopping-market-supermarket-1456559-pxhere.com.jpg

Because of these missing assets, the preview is shown almost as plain HTML.

Console output

Relevant messages seen in the browser console:

JQMIGRATE: Migrate is installed, version 3.4.1

Block with API version 2 or lower is deprecated since version 6.9.
The block "exelearning/elp-upload" is registered with API version 1.
Set the `apiVersion` field to 3 and test the block inside the iframe editor.

/wp-json/wp/v2/media/334?context=view&_locale=user:1 Failed to load resource: the server responded with a status of 404 ()

/wp-json/exelearning/v1/content/<hash>/theme/style.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/idevices/text/text.css:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/bootstrap/bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/common.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/theme/style.css:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/bootstrap/bootstrap.bundle.min.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/exe_export.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/common_i18n.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/libs/jquery/jquery.min.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/idevices/text/text.js:1 Failed to load resource: the server responded with a status of 404 ()
/wp-json/exelearning/v1/content/<hash>/content/css/base.css:1 Failed to load resource: the server responded with a status of 404 ()

ExeLearningEditor: Error updating attachment

There are also repeated browser warnings such as:

Browsing Topics API removed from ... which is iframe
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing.

These may be secondary warnings, but the main functional problem is that the preview assets are not being served correctly.

Notes

  • The issue is reproducible in hosted preview/sandbox environments like TasteWP.
  • The .elpx file is recognized correctly.
  • The editor itself opens, but the rendered preview misses all styling.
  • This may be related to how assets are resolved when the block/editor runs inside an iframe or when the REST endpoint serves content resources.

Possible areas to review

  • REST endpoint asset serving under /wp-json/exelearning/v1/content/...
  • Path resolution for preview assets
  • Compatibility with iframe-based editors
  • Updating the block registration from apiVersion: 1 to apiVersion: 3

Attachment

I am attaching a screenshot showing the unstyled preview and the current editor state.

Image

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions