Opening Media Library in WordPress 6.3 fails when MLA v3.09 is active

Thanks for your positive MLA feedback and for your report. Thanks as well for all the investigation work you posted to identify the cause of the problem.

I have been unable to reproduce the problem on my own system and have found no WP 6.3 issues with MLA v3.09. On my system, accessing the Media/Library Grid mode page adds three templates to the footer area, including the two templates that seem to be missing on your site. Since you seem to have a good handle on JavaScript debugging, could you check and see if those scripts are present on your site? You should see something like:

script type="text/html" id="tmpl-mla-search-box
script type="text/html" id="tmpl-mla-simulate-search-button
script type="text/html" id="tmpl-mla-terms-search-button
form id="mla-terms-search-form" ...

These elements are echoed from /media-library-assistant/includes/mla-media-modal-js-template.php, called from /media-library-assistant/includes/class-media-modal.php. Can you ensure that those files are present and working?

Maybe a hard refresh of the browser page would help, but it seems unlikely. You could also try re-installing MLA; also unlikely. I’m not sure what else to suggest. Any additional details you can provide will help me investigate further. Thanks for your understanding, your help and your interest in MLA.

Hi David,

Yes, I’m a developer myself and love to help out on things like this, so others can enjoy it as well. ??

I have checked, and the mla-media-modal-js-template.php file exists, and I presume you meant the class-mla-media-modal.php, which also exists, and there is code inside.

As for the scripts existing on the page, I think that’s the issue. The scripts are supposed to be echoed, but they were not.

I tried getting the element of one (same code as when it fails):

var e = "mla-terms-search-button";
var missingTemplate = document.getElementById("tmpl-" + e);
console.log(missingTemplate);

And it as expected returned null/undefined.

On further inspection, I have found that the code for echoing the scripts you mentioned exists in the HTML of the page, but unfortunately, as an escaped string (in JSON):

It’s part of the script wp-edit-post-js-after, somewhere inside an endless oneliner of the call of “resolve( wp.editPost.initializeEditor( ‘editor’, “post”,…”

Inside this code, it is included in the value of __unstableResolvedAssets

Not sure where to go from this, as it seems like something else is also broken, as I see some mention of some WooCommerce script inside of the above-mentioned call.

Hopefully, this can help out a bit in understanding the situation on my side. But I’m suspicious it’s rather a WordPress bug.

Kind regards,
Matej

• This reply was modified 1 year, 3 months ago by Matej @ Shipped Away.

Update: This seems to be related to the latest Gutenberg version in WordPress 6.3. I’m researching further, but it seems like many things are broken.

For reference, I am using the new block editor bundled on WordPress core 6.3, and not a separate plugin (Editor Version is 7.7).

Found the cause!

This issue is directly related to the one found here: https://github.com/WordPress/gutenberg/issues/53236

It seems like in the newest version of Gutenberg editor where it’s displayed inside an iFrame, the “enqueue_block_editor_assets” call does not work, as explained in the comment https://github.com/WordPress/gutenberg/issues/53236#issuecomment-1660982735

Further down that issue are possible solutions to get around this. Do you presume it’s something you could do in a new version of MLA or is it something that you would recommend me to try to “hack” myself?

• This reply was modified 1 year, 3 months ago by Matej @ Shipped Away.
• This reply was modified 1 year, 3 months ago by Matej @ Shipped Away.
• This reply was modified 1 year, 3 months ago by Matej @ Shipped Away.
• This reply was modified 1 year, 3 months ago by Matej @ Shipped Away.

Thank you for all your work investigating the cause of the problem. I’m not sure the enqueue_block_editor_assets issue is relevant. MLA does not use any Gutenberg functions, filters, actions or features. The MLA scripts in question are added by the print_media_templates action, part of the original Media Manager code introduced in WP 3.5. You should be able to see about 28 “script type=text/html ” elements just below the “div id=wpfooter” element. The MLA scripts are at the bottom, after the Media Manager scripts. Does your page source look something like that?

You wrote “there is a problem when trying to open the Media Library to select an image to put inside a post“. Does the problem occur only within Gutenberg? Are you able to open and use the Media/Library Grid mode screen?

I am not sure how to proceed. As I wrote, I cannot reproduce the problem on my system; everything’s working fine. I have not had any other reports of a similar problem, either. You mentioned WooCommerce – is that part of your site? Perhaps you could contact me at my web site?to email me the Site Info content from the Site Health screen. Any additional details or hacking you can do would be most helpful. Thanks for your understanding and your patience.

I have checked for the presence of the MLA scripts at the bottom of the page source, but unfortunately, they are not there. I can see others you mention, but none of MLA.

At the end of all these scripts, though, I can see the “mla-terms-search-form” <form>. In addition to the MLA HTML found in __unstableResolvedAssets, this form at the end is the only MLA code on the page.

And I think I didn’t explain exactly where the problem occurs well enough before.

Where it works (Media -> Library)

Indeed, when I open the Media Library from the WP menu on the left (Media -> Library) in Grid view, then everything from MLA is available. I can filter through images with specific Att. Categories, and I can open a specific image and set categories, tags, etc.

Where it doesn’t work (Edit post -> Image -> Media Library)

When I am editing a post (post.php?post=ID&action=edit), and I try to add an image or replace an image by opening the Media Library (Replace -> Media Library), or Image -> Media Library, then it crashes as mentioned in the original post.

Gutenberg

I mentioned the Gutenberg editor because, supposedly, in WordPress 6.3, it’s shown inside an iFrame, and the functions for enqueueing scripts/styles have to be used differently. (I do not develop anything WP, I understood this from the mentioned issues posted on github – maybe falsely).

Also, the Gutenberg version I am using is part of the WordPress 6.3 core (latest version) and not as a separately installed plugin. I have never manually altered this since setting up the site a few years back. It regularly updates, as WordPress does.

I guess the only way to get the same site for testing purposes as I do, is to install a fresh new copy of WordPress 6.3.

WooCommerce

As for WooCommerce, yes, I do have it installed, but I only mentioned it, as I also found one part of the styles/scripts, in addition to MLA, inside the __unstableResolvedAssets, for reference.

Thank you. I will also send you my site information in detail on email.

I’ve got the same problem as reported above. I don’t have WooCommerce installed. I’ve been using MLA for a long time without problems and have noticed this after the 6.3 update.

When I try using the default Gutenberg to set the post or page featured image using “replace” or add then I get an empty list. But when I edit the post or page with Elementor and attempt to select the featured image there, I get a list of images.

So it would seem to be related to Gutenberg. When I de-activate MLA then I can see the list of images in the Gutenberg editor.

Thanks, @zanduino, for your report confirming the problem.

Thanks, @shippedaway, for testing the Media/Library Grid mode and for your earlier clue regarding __unstableResolvedAssets, which enabled me to investigate further. Although I still cannot reproduce the failure on my system, I believe I have found and fixed the problem.

The?print_media_templates?action is performed once to load the Media Manager in the traditional way, e.g., the Media/Library Grid mode. When the Gutenberg iFrame loading is processed, the action is performed again. The current MLA version does not add its scripts during this second action.

I have uploaded a new MLA Development Version dated 20230814 that corrects the problem. You can find step-by-step instructions for using the Development Version in this earlier topic:

How to download & install the current development version of MLA

Once the Development Version is installed you can retest the Gutenberg problems and let me know if they still occur.

The fix will be part of my next MLA version, but in the interim it would be great if you could install the Development Version and let me know if it works for you. Thanks for alerting me to this MLA defect.

Hello David,

I followed the instructions in the linked topic to remove the original MLA and install the newest development version.

It has solved the problem for me. Thanks!

Hi David,

I have updated the plugin on my site, and everything works as it should. ??

Thank you David for the fast response and fix.

And thank you @zanduino for confirming the issue.

Cheers,
Matej

Thanks again to both of you for your patience and your help in resolving this issue. By the way, I discovered why I could not reproduce the problem on my system:

Post editor: iframe if all blocks are v3 by ellatrix · Pull Request #48286 · WordPress/gutenberg · GitHub

Apparently I have some of the older blocks on my system and couldn’t load the editor in an iFrame.

I have released MLA version 3.10, which contains the fixes required for this topic.

I am leaving this topic resolved, but please update it if you have any problems or further questions regarding MLA’s support for the Media Manager Modal (popup) Window. Thanks for alerting me to this MLA defect.