प्लगइन्स के बिना गुटेनबर्ग कोड ब्लॉक्स में कॉपी और डाउनलोड बटन जोड़ें

मैंने इसके बारे में सोचा है और एक से अधिक बार इसके बारे में लिखा है। मुझे ठीक से समझ नहीं आता कि वर्डप्रेस अपने गुटेनबर्ग ब्लॉक्स में कुछ बुनियादी सुविधाएँ क्यों नहीं जोड़ता या उन्हें कोर में शामिल अंतिम संस्करणों में शामिल करने में इतना समय क्यों लगता है, जैसा कि तालिका-विषय-वस्तु ब्लॉक के मामले में होता है।

इस बार हम कुछ बहुत उपयोगी जोड़ने जा रहे हैं जिसकी मुझे हमेशा कमी खलती रही है, जो गुटेनबर्ग के कोड ब्लॉक में नहीं है और जिसे मैं अनिवार्य मानता हूँ: कॉपी और डाउनलोड बटन।

उपयोग किया गया कॉपी बटन Iconmonstr का है। इसमें एक टूलटिप और हरे रंग में कॉपी होने की दृश्य पुष्टि होती है।

डाउनलोड बटन, जो Iconmonstr से भी है, सब कुछ .txt फॉर्मेट में डाउनलोड करता है, लेकिन मेरी ज़रूरतों के लिए यह काफी है।

दोनों बटनों में एक हल्का होवर प्रभाव है, जो न्यूनतावादी शैली को बनाए रखता है।

प्रदर्शन के लिहाज़ से, यह केवल उन पेजों पर लोड होता है जहाँ कोड ब्लॉक मौजूद होते हैं और CSS व JS अनुकूलित व इनलाइन होते हैं।

आप इसे ठीक यहीं ब्लॉक में काम करते हुए देख सकते हैं, जिसमें वह आवश्यक कोड है जिसे आपको बस अपने टेम्पलेट या चाइल्ड थीम की functions.php फ़ाइल में जोड़ना है।

/**
 * Añade botones "Copiar" y "Descargar" en los bloques de código <code> de Gutenberg
 */
function botones_codigo_personalizados() {
    global $post;
    if (!is_a($post, 'WP_Post') || !has_block('core/code', $post)) {
        return;
    }

    echo '<style>
    .wp-block-code {
        position: relative;
        padding-top: 12px !important;
    }
    .custom-code-buttons {
        position: absolute;
        top: 12px;
        right: 12px;
        display: flex;
        gap: 8px;
    }
    .custom-code-button {
        background: none;
        border: none;
        padding: 4px;
        cursor: pointer;
        color: #6b7280;
        border-radius: 4px;
        transition: all 0.15s ease;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .custom-code-button:hover {
        color: #374151;
        background: rgba(0,0,0,0.05);
    }
    .custom-code-button svg {
        width: 16px;
        height: 16px;
    }
    @media (max-width: 480px) {
        .custom-code-buttons {
            top: 8px;
            right: 8px;
        }
    }
    </style>';

    echo '<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll(".wp-block-code").forEach(block => {
            const container = document.createElement("div");
            container.className = "custom-code-buttons";
            
            // Botón Copiar, icono de Iconmonstr
            const copyBtn = document.createElement("button");
            copyBtn.className = "custom-code-button";
            copyBtn.title = "Copiar código";
            copyBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 18h-3c-.48 0-1-.379-1-1v-14c0-.481.38-1 1-1h14c.621 0 1 .522 1 1v3h3c.621 0 1 .522 1 1v14c0 .621-.522 1-1 1h-14c-.48 0-1-.379-1-1zm1.5-10.5v13h13v-13zm9-1.5v-2.5h-13v13h2.5v-9.5c0-.481.38-1 1-1z" fill-rule="nonzero"/></svg>\';
            
            copyBtn.addEventListener("click", function() {
                const code = block.querySelector("code");
                if (code) {
                    navigator.clipboard.writeText(code.textContent)
                        .then(() => {
                            copyBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 18h-3c-.48 0-1-.379-1-1v-14c0-.481.38-1 1-1h14c.621 0 1 .522 1 1v3h3c.621 0 1 .522 1 1v14c0 .621-.522 1-1 1h-14c-.48 0-1-.379-1-1zm1.5-10.5v13h13v-13zm9-1.5v-2.5h-13v13h2.5v-9.5c0-.481.38-1 1-1z" fill="#10b981" fill-rule="nonzero"/></svg>\';
                            setTimeout(() => {
                                copyBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 18h-3c-.48 0-1-.379-1-1v-14c0-.481.38-1 1-1h14c.621 0 1 .522 1 1v3h3c.621 0 1 .522 1 1v14c0 .621-.522 1-1 1h-14c-.48 0-1-.379-1-1zm1.5-10.5v13h13v-13zm9-1.5v-2.5h-13v13h2.5v-9.5c0-.481.38-1 1-1z" fill-rule="nonzero"/></svg>\';
                            }, 2000);
                        });
                }
            });
            
            // Botón Descargar, icono de Iconmonstr
            const downloadBtn = document.createElement("button");
            downloadBtn.className = "custom-code-button";
            downloadBtn.title = "Descargar código";
            downloadBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z"/></svg>\';
            
            downloadBtn.addEventListener("click", function() {
                const code = block.querySelector("code");
                if (code) {
                    const blob = new Blob([code.textContent], { type: "text/plain" });
                    const url = URL.createObjectURL(blob);
                    const a = document.createElement("a");
                    a.href = url;
                    a.download = "codigo.txt";
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                    
                    downloadBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z" fill="#10b981"/></svg>\';
                    setTimeout(() => {
                        downloadBtn.innerHTML = \'<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21l-8-9h6v-12h4v12h6l-8 9zm9-1v2h-18v-2h-2v4h22v-4h-2z"/></svg>\';
                    }, 2000);
                }
            });
            
            container.appendChild(copyBtn);
            container.appendChild(downloadBtn);
            block.appendChild(container);
        });
    });
    </script>';
}
add_action('wp_footer', 'botones_codigo_personalizados');

और यदि आप सिर्फ़ "कोड कॉपी करें" टेक्स्ट वाला एक बटन चाहते हैं, बिना किसी इमेज के, तो आप कोड यहाँ पा सकते हैं।