Eklentiler olmadan Gutenberg kod bloklarına kopyalama ve indirme düğmeleri ekleme

Bu konu hakkında birden fazla kez düşündüm ve yazdım. WordPress'in Gutenberg bloklarına neden bazı temel işlevleri eklemediğini veya içindekiler bloğunda olduğu gibi bunları çekirdeğe dahil ettiği son sürümlerine getirmenin neden bir yüzyıl sürdüğünü tam olarak anlamıyorum.

Bu sefer çok kullanışlı ve hep özlediğim, Gutenberg kod bloğunda olmayan ve gerekli olduğunu düşündüğüm bir şey ekleyeceğiz. Kopyala ve indir butonları.

Kullanılan kopyalama düğmesi Iconmonstr'dan bu düğmedir, araç ipucuna ve yeşil renkte kopyalamanın görsel onayına sahiptir.

Yine Iconmonstr'dan indirme düğmesi her şeyi .txt formatında indiriyor, ancak benim kullanımım için yeterli.

Her iki düğme de minimalist tarzı korumak için yumuşak bir hover'a sahiptir.

Performans açısından, yalnızca kod bloklarının bulunduğu, CSS ve JS'nin optimize edildiği ve satır içi olduğu sayfalarda yüklenir.

Burada, şablonunuzun veya alt temanızın functions.php dosyasına eklemeniz gereken gerekli kodla birlikte bloğun kendisinde çalıştığını görebilirsiniz.

/**
 * 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');