Load custom scripts in iframe of editor in FSE and mobile review

[wpsoul]

Currently I can't find any details how to load scripts inside iframe and I see only styles there. Scripts are loaded in admin pages, but it's very common scenarios when we need also scripts inside iframe. For example, for libraries, which are detecting scroll positions. Placing such scripts outside iframe makes them inaccurate for work

[justintadlock]

@wpsoul - Can you verify if the following issue is the same that you're experiencing? #38673

If so, we can close this ticket out in favor of the existing one.

[wpsoul]

@justintadlock No, it's not the same. I don't have problem in loading files. Problem is that they are loaded on page but outside iframe. I want to suggest some hook for possibility to load something inside iframe.

Allowing enqueue_block_editor_assets to work inside iframe can help, but as I understand from comments, this hook is used only for Editor panels and not supposed to work in content area of editor

[webplantmedia]

From my digging, It seems you can load <style> inside the iframe, but not <script>. In my case, I was using Ionicons 5 which requires a <script> to load font icons. The font icons wouldn't load inside a mobile preview and FSE screen since those pages get loaded through an iframe. Despite my best efforts, I could not find a way to hack it either. I had to revert to using a font file version of Ionicons to load the fonts inside the iframe.

[jordesign]

This appears to now be resolved - adding the note added to #47924 for details - and will close it.

This has been fixed since #49655 (in WP 6.3): you can now use the enqueue_block_assets action to enqueue assets. There's more information here: https://make.wordpress.org/core/2023/07/18/miscellaneous-editor-changes-in-wordpress-6-3/#post-editor-iframed. If you need assets to only enqueue in the editor, you could use the is_admin function.

However, regarding the script, I really don't recommend loading editing UI in the iframe. Instead, you should probably render a block preview inside the block and make the user edit the block settings in a modal, or in the block inspector.

Let's close this issue, but feel free to create a new issue if your have additional questions or concerns with the new API.