Because life’s too short to click things twice. Unless it’s a double-click. Then it’s exactly the right amount of life time.

Cleanshot 2025 02 18 At 23.13.39 Optimised.gif

What it does…

This snippet enhances the WordPress media library modal by adding double-click functionality. When browsing images in the media library, instead of clicking once to select and again to confirm, users can simply double-click any image to both select it and trigger the insert/select button automatically.

Why it does it…

The default WordPress media selection process requires two distinct actions: selecting an image and confirming that selection. For users who know exactly which image they want, this two-step process creates unnecessary friction. This enhancement mirrors common desktop file browser behavior where double-clicking performs both selection and confirmation.

How it does it…

  • Hooks into WordPress admin using admin_enqueue_scripts to add custom JavaScript
  • Implements native double-click detection via jQuery’s dblclick event listener
  • Forces image selection if not already selected using .click() simulation
  • Adds 50ms delay using setTimeout to ensure selection processes before triggering submit
  • Uses .media-button-select and .button-primary selectors to support both modern and classic editor buttons
  • Creates isolated scope using IIFE pattern with "use strict" mode
  • Initializes for both Gutenberg editor via wp.data.subscribe and classic editor via wp.media.frame
  • Prevents event bubbling using preventDefault() and stopPropagation()

See the code…

<?php

/**
 * Title: Media Library Double-Click Selection [SnipSnip.pro]
 * Description: Enhances the WordPress Media Library modal by enabling double-click to select and confirm media items. Double-clicking an image automatically selects it and triggers the select/insert button, streamlining the media selection workflow.
 * Version: 2.2.0
 * Author: brandonjp.com
 * Last Updated: 2025-02-18
 * Blog URL: https://snipsnip.pro/s/858
 * Requirements: WordPress 5.0 or later
 * License: GPL v2 or later
 */

if (!class_exists('WP_Media_Library_Double_Click_Handler')):

class WP_Media_Library_Double_Click_Handler {
    
    const VERSION = '2.2.0';

    public function __construct() {
        add_action('admin_enqueue_scripts', array($this, 'add_scripts'));
    }

    public function add_scripts() {
        if (!is_admin()) {
            return;
        }

        $js = <<<'JAVASCRIPT'
window.addEventListener("load", function() {
    (function createMediaLibraryDoubleClick() {
        "use strict";
        
        function handleDoubleClick(event) {
            event.preventDefault();
            event.stopPropagation();
            
            const attachment = jQuery(event.currentTarget);
            
            // Force selection if not already selected
            if (!attachment.hasClass('selected')) {
                attachment.click();
            }
            
            // Small delay to ensure selection is processed
            setTimeout(() => {
                const selectButton = jQuery('.media-modal .media-toolbar .media-button-select, .media-modal .media-toolbar .button-primary');
                if (selectButton.length && !selectButton.prop('disabled')) {
                    selectButton.click();
                }
            }, 50);
        }
        
        function init() {
            // Remove any existing handlers
            jQuery(document).off('dblclick', '.media-modal .attachments-browser .attachments .attachment');
            
            // Add double-click handler
            jQuery(document).on('dblclick', '.media-modal .attachments-browser .attachments .attachment', handleDoubleClick);
            
            // Add handler for classic editor (if present)
            if (typeof wp.media.frame !== 'undefined') {
                wp.media.frame.on('open', function() {
                    setTimeout(init, 100);
                });
            }
        }

        // Initialize when document is ready
        init();
        
        // Initialize for Gutenberg
        if (window.wp && wp.data && wp.data.subscribe) {
            wp.data.subscribe(function() {
                const coreEditor = wp.data.select('core/editor');
                if (coreEditor && coreEditor.isCleanNewPost) {
                    init();
                }
            });
        }
    })();
});
JAVASCRIPT;

        wp_add_inline_script('jquery', $js);
    }
}

endif;

if (class_exists('WP_Media_Library_Double_Click_Handler')):
    new WP_Media_Library_Double_Click_Handler();
endif;

See the code on github…