Extend Media Library

Question

The Media Library in WordPress has "Insert from URL" link to the left. It accepts image URLs. It's not said anywhere but if you paste YouTube URL or <iframe> code then it will insert it too. It just won't show the preview like it does with image URLs so you can't tell if the code you typed in is valid or not.

1. I'd like to edit this page and make it show previews of valid WordPress Embeds and of valid <iframes>. I want it to just show basic information that the embed code was recognized, is valid and can be inserted. I can write all the AJAX requests to validate URLs but I need help with wp.media object. I have no idea how to update that page or replace it with my own page? So far I've found /wp-includes/js/media-editor.js where on line 1054 it says Called when 'Insert From URL' source is not an image. Example: YouTube url..
2. Secondly, once it's already done, I'd like to be able to call something like the following piece of code to open the Media Library with "Insert from URL" page selected and with the code added (for users to modify the existing code).

The code below is a working example of how to bring a window for editing images but I need this for "Insert from URL":

frame = wp.media({
    frame: 'image',
    state: 'image-details',
    metadata: { 'url': 'some-url' }
});
frame.open();

Answer 1

To modify the behavior of the "Insert from URL" feature in the WordPress Media Library, you will need to write a custom JavaScript code that extends the existing functionality of the media editor. Here are the steps you can follow:

Enqueue your custom JavaScript file to WordPress using the wp_enqueue_script() function. You can do this by adding the following code to your theme's functions.php file or to a custom plugin:

function my_custom_script() {
wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/js/my- 
custom-script.js', array( 'jquery', 'media-editor' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );

In your custom JavaScript file, you can modify the behavior of the "Insert from URL" feature by hooking into the wp.media.controller.Library object. Here's an example of how you can modify the behavior to show previews of valid WordPress Embeds and valid :

( function( $ ) {
'use strict';

$( document ).ready( function() {
    wp.media.controller.Library.prototype.insert = function() {
        var selection = this.get( 'selection' ).first(),
            url = selection.get( 'url' ),
            type = 'image',
            attachment = wp.media.attachment( selection.id ),
            embed = wp.media.embeds.get( url ),
            iframe = $( '<iframe>' ).attr( 'src', url );

        if ( embed ) {
            type = 'embed';
            iframe = embed.html;
        } else if ( url.match( /<iframe.*?<\/iframe>/i ) ) {
            type = 'iframe';
        }

        // Show a preview of the valid WordPress Embed or iframe
        if ( type === 'embed' || type === 'iframe' ) {
            $( '.media-modal-content' ).append( iframe );
        }

        // Insert the URL as an attachment
        attachment.set( 'url', url );
        this.options.set( 'attachment', attachment );
        wp.media.editor.insert( attachment.toJSON() );

        // Close the media modal
        this.close();
    };
   } );

   } )( jQuery );

The code above extends the insert() method of the wp.media.controller.Library object to check if the URL is a valid WordPress Embed or . If it is, the code will show a preview of the valid Embed or iframe in the media modal. The attachment will then be inserted as usual, and the media modal will be closed.

To open the Media Library with the "Insert from URL" page selected and with the URL added, you can use the following code:

var frame = wp.media({
frame: 'post',
state: 'insert',
title: 'Insert from URL',
library: { type: 'url' },
multiple: false,
states: [
    new wp.media.controller.Library({
        title: 'Insert from URL',
        library: wp.media.query({ type: 'url' }),
        multiple: false,
        date: false,
        allowLocalEdits: false,
        displaySettings: true,
        displays: [ 'insert' ],
        insert: function() {
            var url = $( '#media-url-input' ).val();
            wp.media.editor.insert( '<iframe src="' + url + '"></iframe>' );
            this.controller.close();
        }
        })
        ]
        });

        frame.on( 'open', function() {
         $( '#media-url-input' ).val( 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' );
          } );

  frame.open();

This code creates a new media frame with the title "Insert from URL" and the type set to "url". It then sets the 'states' option to an array with a single item, which is a new instance of the wp.media.controller.Library object. This object sets the 'library' option to wp.media.query({ type: 'url' }), which means it will only show the "Insert from URL" page in the media library.

The insert() method of the wp.media.controller.Library object is overridden to extract the URL from the input field and insert an with the given URL into the editor.

Finally, the 'open' event of the media frame is hooked to set the default URL value to "https://www.youtube.com/watch?v=dQw4w9WgXcQ" for demonstration purposes.

Note that the above code is just an example, and you may need to adjust it to fit your specific needs. Also, keep in mind that modifying core WordPress files is generally not recommended, as it can lead to compatibility issues and make it harder to update your site. It's better to use a plugin or child theme to add your custom functionality.