Développer des Blocs Gutenberg Avancés avec React et JSX

Introduction

Le développement de blocs avancés pour l’éditeur Gutenberg de WordPress est une compétence de plus en plus recherchée. En utilisant React et JSX, les développeurs peuvent créer des blocs personnalisés qui améliorent l’expérience utilisateur et enrichissent les fonctionnalités de WordPress. Cet article vous guidera à travers les étapes essentielles pour développer des blocs Gutenberg avancés.

Comprendre Gutenberg et ses Blocs

Gutenberg est l’éditeur par défaut de WordPress, introduit pour faciliter la création de contenu. Les blocs sont les éléments de base de cet éditeur, permettant aux utilisateurs d’ajouter divers types de contenu. Pour développer des blocs avancés, il est crucial de comprendre comment fonctionne le système de blocs de Gutenberg.

Configuration de l’Environnement de Développement

Avant de commencer, assurez-vous d’avoir un environnement de développement configuré. Vous aurez besoin de :

• Node.js et npm installés sur votre machine.
• Un projet WordPress local pour tester vos blocs.
• Le package @wordpress/scripts pour simplifier le processus de build.

Vous pouvez initialiser un nouveau projet en exécutant :

npm init -y

Création d’un Bloc de Base

Pour créer un bloc de base, commencez par créer un fichier JavaScript dans votre dossier de plugin ou de thème. Voici un exemple simple :

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('mon-plugin/mon-bloc', {
    title: 'Mon Bloc Avancé',
    category: 'widgets',
    edit: () => 
Éditez ce bloc !
,
    save: () => 
Ce bloc est sauvegardé !
,
});

Utilisation de JSX pour la Création de Blocs

JSX permet d’écrire du HTML dans votre JavaScript, ce qui rend le code plus lisible. Par exemple, vous pouvez créer un bloc avec des attributs personnalisés :

registerBlockType('mon-plugin/mon-bloc', {
    title: 'Mon Bloc Avancé',
    attributes: {
        content: { type: 'string' },
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            

                 setAttributes({ content: e.target.value })}
                />
            </div>
        );
    },
    save: ({ attributes }) => <p>{attributes.content}</p>,
});</code></pre>
<h2>Styles et Scripts</h2>
<p>Pour ajouter des styles et des scripts à votre bloc, vous devez les enregistrer dans votre fichier PHP. Voici comment procéder :</p>
<pre><code>function mon_plugin_enqueue() {
    wp_enqueue_script('mon-bloc-js', plugins_url('mon-bloc.js', __FILE__), array('wp-blocks', 'wp-element', 'wp-editor'), true);
    wp_enqueue_style('mon-bloc-css', plugins_url('mon-bloc.css', __FILE__));
}
add_action('enqueue_block_editor_assets', 'mon_plugin_enqueue');</code></pre>
<h2>Exemples de Blocs Avancés</h2>
<p>Voici quelques idées de blocs avancés que vous pourriez développer :</p>
<ul>
<li><strong>Un bloc de galerie personnalisée</strong> qui permet aux utilisateurs de choisir des images et d’ajouter des légendes.</li>
<li><strong>Un bloc de témoignages</strong> qui affiche des citations avec des images d’auteur.</li>
<li><strong>Un bloc de formulaire de contact</strong> intégré avec des options de personnalisation.</li>
</ul>
<h2>Conclusion</h2>
<p>Développer des blocs Gutenberg avancés avec React et JSX ouvre de nombreuses possibilités pour enrichir l’expérience utilisateur sur WordPress. En suivant les étapes décrites dans cet article, vous pouvez créer des blocs personnalisés qui répondent aux besoins spécifiques de vos utilisateurs. N’hésitez pas à expérimenter et à explorer les différentes fonctionnalités offertes par l’API de blocs de Gutenberg.</p>
</article>
        <div class="lpc-partner-box internal lpc-ad-content">
            <div class="partner-neon-border" style="background: #ff2262; box-shadow: 0 0 15px #ff2262;"></div>
                            <div class="partner-label" style="color: #ff2262;">LOGICIEL & PROMPTS OS</div>
                        <div class="partner-content">
                <div class="partner-icon-wrap"
                    style="background: rgba(255, 34, 98, 0.1); border: 1px solid rgba(255, 34, 98, 0.2); border-radius: 8px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px;">
                    🚀
                </div>
                <div class="partner-info">
                    <h4 style="color: #ff2262;">Pack IA Sovereign</h4>
                                            <p>Débloquez le Labo complet (47€).</p>
                                        <a href="/mon-labo/" class="partner-btn" style="background: #ff2262;">
                        Accéder <span class="arrow">→</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Partager :</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-facebook-14813"
				class="share-facebook sd-button share-icon no-text"
				href="https://la-pause-code.fr/2025/02/24/developper-des-blocs-gutenberg-avances-avec-react-et-jsx/?share=facebook"
				target="_blank"
				aria-labelledby="sharing-facebook-14813"
				>
				<span id="sharing-facebook-14813" hidden>Partager sur Facebook(ouvre dans une nouvelle fenêtre)</span>
				<span>Facebook</span>
			</a></li><li class="share-twitter"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-twitter-14813"
				class="share-twitter sd-button share-icon no-text"
				href="https://la-pause-code.fr/2025/02/24/developper-des-blocs-gutenberg-avances-avec-react-et-jsx/?share=twitter"
				target="_blank"
				aria-labelledby="sharing-twitter-14813"
				>
				<span id="sharing-twitter-14813" hidden>Partager sur X(ouvre dans une nouvelle fenêtre)</span>
				<span>X</span>
			</a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-linkedin-14813"
				class="share-linkedin sd-button share-icon no-text"
				href="https://la-pause-code.fr/2025/02/24/developper-des-blocs-gutenberg-avances-avec-react-et-jsx/?share=linkedin"
				target="_blank"
				aria-labelledby="sharing-linkedin-14813"
				>
				<span id="sharing-linkedin-14813" hidden>Partager sur LinkedIn(ouvre dans une nouvelle fenêtre)</span>
				<span>LinkedIn</span>
			</a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer"
				data-shared="sharing-whatsapp-14813"
				class="share-jetpack-whatsapp sd-button share-icon no-text"
				href="https://la-pause-code.fr/2025/02/24/developper-des-blocs-gutenberg-avances-avec-react-et-jsx/?share=jetpack-whatsapp"
				target="_blank"
				aria-labelledby="sharing-whatsapp-14813"
				>
				<span id="sharing-whatsapp-14813" hidden>Partager sur WhatsApp(ouvre dans une nouvelle fenêtre)</span>
				<span>WhatsApp</span>
			</a></li><li class="share-end"></li></ul></div></div></div><div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-202367866-14813-6990f242e1979' data-src='https://widgets.wp.com/likes/?ver=15.5#blog_id=202367866&post_id=14813&origin=la-pause-code.fr&obj_id=202367866-14813-6990f242e1979' data-name='like-post-frame-202367866-14813-6990f242e1979' data-title='Aimer ou rebloguer'><h3 class="sd-title">J’aime ça :</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>J’aime</span></span> <span class="loading">chargement…</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div>
<div id='jp-relatedposts' class='jp-relatedposts' >
	<h3 class="jp-relatedposts-headline"><em>Articles similaires</em></h3>
</div>                </div>
            </div>

                <section class="related-posts container">
        <h3 class="section-title">Continuer l'exploration dans le Silo
            GENERAL        </h3>
        <div class="post-grid">
                            <article class="grid-item">
                    <h4 class="post-title"><a href="https://la-pause-code.fr/2024/09/09/resume-du-09-09-2024/">
                            Résumé du 09/09/2024                        </a></h4>
                    <p class="post-excerpt">
                        ReadPartner AI 1.0 – Portal + Extension ReadPartner AI 1.0 est un outil de résumé…                    </p>
                </article>
                            <article class="grid-item">
                    <h4 class="post-title"><a href="https://la-pause-code.fr/2024/09/08/les-ponts-de-la-destinee-dystopique/">
                            Les Ponts de la Destinée – Dystopique                        </a></h4>
                    <p class="post-excerpt">
                        Dans une métropole futuriste où technologie et nature se heurtent, un groupe de personnages aux…                    </p>
                </article>
                            <article class="grid-item">
                    <h4 class="post-title"><a href="https://la-pause-code.fr/2024/10/02/lile-des-innovateurs-une-aventure-dequilibre-ecologique-dystopique/">
                            L’Île des Innovateurs : Une Aventure d’Équilibre Écologique – Dystopique                        </a></h4>
                    <p class="post-excerpt">
                        Découvrez l'histoire d'un jeune inventeur confronté à une menace qui pourrait déstabiliser une île écologique…                    </p>
                </article>
                    </div>
    </section>

    <style>
        .related-posts {
            margin-top: 5rem;
            padding-top: 3rem;
            border-top: 1px solid #333;
        }

        .section-title {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--accent-color);
            margin-bottom: 2rem;
        }

        .related-posts .post-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .related-posts .grid-item {
            border: 1px solid #222;
        }
    </style>
    
            </main>

<script>
    // Simple Scroll Progress
    window.onscroll = function () {
        let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        let scrolled = (winScroll / height) * 100;
        document.querySelector(".reading-progress").style.width = scrolled + "%";
    };

    // Basic TOC logic (Client-side for now)
    document.addEventListener('DOMContentLoaded', () => {
        const headings = document.querySelectorAll('.article-content h2, .article-content h3');
        const toc = document.querySelector('#toc');
        if (headings.length > 0) {
            let tocList = '<ul>';
            headings.forEach((h, i) => {
                const id = 'h-' + i;
                h.id = id;
                tocList += `<li class="toc-${h.tagName.toLowerCase()}"><a href="#${id}">${h.innerText}</a></li>`;
            });
            tocList += '</ul>';
            toc.innerHTML = tocList;
        } else {
            document.querySelector('.article-sidebar').style.display = 'none';
        }
    });
</script>

<style>
    .reading-progress {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 3px;
        background: var(--accent-color);
        z-index: 1001;
        transition: width 0.1s ease;
    }

    .article-single {
        max-width: 1200px;
    }

    .post-header {
        margin-bottom: 3rem;
        text-align: center;
    }

    .post-header h1 {
        font-size: 3.5rem;
        margin-top: 1rem;
    }

    .featured-image {
        margin-bottom: 4rem;
        display: flex;
        justify-content: center;
    }

    .featured-image img {
        max-width: 100%;
        max-height: 60vh;
        width: auto;
        height: auto;
        border-radius: 12px;
        border: 1px solid #333;
        object-fit: cover;
    }

    .article-layout {
        display: grid;
        grid-template-columns: 250px 1fr;
        gap: 4rem;
        align-items: start;
    }

    .article-sidebar {
        position: sticky;
        top: 100px;
    }

    .toc-container h3 {
        font-size: 0.9rem;
        text-transform: uppercase;
        color: var(--text-dim);
        border-bottom: 1px solid #333;
        padding-bottom: 0.5rem;
    }

    #toc ul {
        list-style: none;
        padding: 1rem 0;
    }

    #toc li {
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
    }

    #toc .toc-h3 {
        padding-left: 1rem;
        opacity: 0.8;
    }

    #toc a {
        color: var(--text-color);
    }

    #toc a:hover {
        color: var(--accent-color);
    }

    .article-content {
        font-size: 1.2rem;
        line-height: 1.8;
    }

    .article-content h2 {
        font-size: 2.2rem;
        margin-top: 3rem;
    }

    .article-content h3 {
        font-size: 1.6rem;
        margin-top: 2rem;
    }

    .article-content img {
        height: auto;
        max-width: 100%;
        max-height: 70vh;
        object-fit: contain;
        display: block;
        margin: 3rem auto;
        border-radius: 12px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .article-content figure {
        margin: 3rem 0;
        text-align: center;
    }

    .article-content figcaption {
        font-size: 0.9rem;
        color: #666;
        margin-top: 1rem;
        font-style: italic;
    }

    .article-content p {
        margin-bottom: 1.5rem;
    }

    /* Favorites Button */
    .lpc-fav-btn {
        background: none;
        border: none;
        color: var(--accent-color);
        cursor: pointer;
        padding: 5px;
        margin-left: 1rem;
        transition: transform 0.2s, opacity 0.2s;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }

    .lpc-fav-btn:hover {
        transform: scale(1.2);
    }

    .lpc-fav-btn.is-active svg {
        fill: currentColor;
    }

    .lpc-fav-btn.loading {
        opacity: 0.5;
        pointer-events: none;
    }

    @media (max-width: 900px) {
        .article-layout {
            grid-template-columns: 1fr;
        }

        .article-sidebar {
            display: none;
        }

        .post-header h1 {
            font-size: 2.5rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const favBtn = document.querySelector('.lpc-fav-btn');
        if (favBtn) {
            favBtn.addEventListener('click', async function () {
                const postId = this.dataset.id;
                const nonce = this.dataset.nonce;
                this.classList.add('loading');

                try {
                    if (!window.lpcFavorites) {
                        console.error('lpcFavorites not found');
                        return;
                    }
                    const result = await window.lpcFavorites.toggle(postId, nonce);
                    if (result.success) {
                        this.classList.toggle('is-active', result.data.status === 'added');
                        const svg = this.querySelector('svg');
                        if (result.data.status === 'added') {
                            svg.setAttribute('fill', 'currentColor');
                        } else {
                            svg.setAttribute('fill', 'none');
                        }
                    }
                } catch (e) {
                    console.error('Favorite error:', e);
                } finally {
                    this.classList.remove('loading');
                }
            });
        }
    });
</script>

<footer class="site-footer">
    <div class="container footer-inner">
        <div class="footer-brand">
            <a href="/" class="footer-logo">LPC<span class="dot">.</span></a>
            <p class="footer-tagline">Optimisez votre workflow avec l'IA.</p>
        </div>

        <div class="footer-nav">
            <div class="footer-col">
                <h4>Ressources</h4>
                            </div>
            <div class="footer-col">
                <h4>Labo</h4>
                            </div>
            <div class="footer-col">
                <h4>Légal</h4>
                            </div>
        </div>
    </div>

    <div class="footer-bottom">
        <div class="container">
            <p>© 2026 La Pause Code. Tous droits réservés.</p>
        </div>
    </div>
</footer>

<div id="lpc-search-modal" class="search-modal">
    <div class="search-modal-content">
        <div class="search-field-wrapper">
            <span class="search-icon">🔍</span>
            <input type="text" id="lpc-search-input" placeholder="Rechercher un article, un prompt ou un tutoriel..."
                autocomplete="off">
            <kbd>ESC</kbd>
        </div>
        <div id="lpc-search-results" class="search-results">
            <!-- Les résultats apparaîtront ici -->
            <div class="search-placeholder">Tapez quelque chose pour commencer la recherche...</div>
        </div>
        <div class="search-modal-footer">
            <span><kbd>↑↓</kbd> Naviguer</span>
            <span><kbd>Enter</kbd> Ouvrir</span>
            <span><kbd>ESC</kbd> Fermer</span>
        </div>
    </div>
</div>

<style>
    .search-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(5px);
        z-index: 9999;
        padding-top: 10vh;
    }

    .search-modal.is-active {
        display: block;
    }

    .search-modal-content {
        max-width: 650px;
        margin: 0 auto;
        background: #111;
        border: 1px solid #333;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }

    .search-field-wrapper {
        display: flex;
        align-items: center;
        padding: 1.5rem;
        border-bottom: 1px solid #222;
    }

    .search-icon {
        font-size: 1.2rem;
        margin-right: 1rem;
    }

    #lpc-search-input {
        flex: 1;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 1.2rem;
        outline: none;
        font-family: inherit;
    }

    .search-results {
        max-height: 400px;
        overflow-y: auto;
        padding: 1rem;
    }

    .search-placeholder {
        text-align: center;
        padding: 3rem;
        color: #666;
        font-size: 0.9rem;
    }

    .search-result-item {
        display: block;
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        border: 1px solid transparent;
        transition: all 0.2s;
    }

    .search-result-item:hover,
    .search-result-item.is-selected {
        background: #1a1a1a;
        border-color: var(--accent-color);
    }

    .search-result-item h4 {
        margin: 0 0 0.2rem 0;
        font-size: 1rem;
        color: #fff;
    }

    .search-result-item .meta {
        font-size: 0.7rem;
        color: #666;
        text-transform: uppercase;
    }

    .search-modal-footer {
        padding: 0.8rem 1.5rem;
        background: #0a0a0a;
        border-top: 1px solid #222;
        display: flex;
        gap: 1.5rem;
        font-size: 0.75rem;
        color: #555;
    }

    .search-modal-footer kbd {
        background: #222;
        color: #aaa;
        padding: 2px 4px;
        border-radius: 3px;
        font-size: 0.65rem;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const modal = document.getElementById('lpc-search-modal');
        const input = document.getElementById('lpc-search-input');
        const resultsContainer = document.getElementById('lpc-search-results');
        let selectedIndex = -1;

        // Toggle Modal
        const trigger = document.querySelector('.search-trigger');

        function openModal() {
            modal.classList.add('is-active');
            input.focus();
        }

        if (trigger) {
            trigger.addEventListener('click', openModal);
        }

        window.addEventListener('keydown', function (e) {
            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                e.preventDefault();
                openModal();
            }
            if (e.key === 'Escape') {
                modal.classList.remove('is-active');
            }
        });

        // Close on click outside
        modal.addEventListener('click', function (e) {
            if (e.target === modal) modal.classList.remove('is-active');
        });

        // Search Logic (AJAX / REST)
        let debounceTimer;
        input.addEventListener('input', function () {
            clearTimeout(debounceTimer);
            const query = this.value;
            if (query.length < 2) {
                resultsContainer.innerHTML = '<div class="search-placeholder">Tapez au moins 2 caractères...</div>';
                return;
            }

            resultsContainer.innerHTML = '<div class="search-placeholder">Chargement...</div>';

            debounceTimer = setTimeout(() => {
                const restUrl = 'https://la-pause-code.fr/wp-json/wp/v2/search';
                const separator = restUrl.includes('?') ? '&' : '?';
                const finalUrl = `${restUrl}${separator}search=${encodeURIComponent(query)}&subtype=post,lpc_prompt,page&per_page=8&_embed`;

                fetch(finalUrl)
                    .then(response => {
                        if (!response.ok) throw new Error('Erreur réseau');
                        return response.json();
                    })
                    .then(results => {
                        if (!Array.isArray(results) || results.length === 0) {
                            resultsContainer.innerHTML = '<div class="search-placeholder">Aucun résultat trouvé.</div>';
                            return;
                        }

                        resultsContainer.innerHTML = results.map((item, index) => {
                            const typeLabel = item.subtype === 'lpc_prompt' ? 'PROMPT' : (item.subtype === 'post' ? 'ARTICLE' : 'PAGE');
                            const typeClass = item.subtype === 'lpc_prompt' ? 'label-prompt' : 'label-article';

                            return `
                                <a href="${item.url}" class="search-result-item" data-index="${index}">
                                    <div class="meta ${typeClass}">${typeLabel}</div>
                                    <h4>${item.title}</h4>
                                </a>
                            `;
                        }).join('');
                    })
                    .catch(err => {
                        console.error('Search error:', err);
                        resultsContainer.innerHTML = '<div class="search-placeholder">Erreur lors de la recherche.</div>';
                    });
            }, 300);
        });
    });
</script>
<div id="lpc-exit-intent" class="exit-intent-modal silo-general">
    <div class="exit-intent-overlay"></div>
    <div class="exit-intent-content"
        style="--lpc-accent: #00f2ff; --lpc-accent-rgb: 0, 242, 255;">
        <button class="exit-close">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M18 6L6 18M6 6l12 12" />
            </svg>
        </button>

        <div class="exit-body">
            <div class="exit-header">
                <span class="exit-badge">OFFRE EXCLUSIVE _</span>
            </div>

            <h3>Attends ! Ne pars pas sans ton Pack IA</h3>
            <p>Récupère 100+ prompts exclusifs pour gagner 2h par jour.</p>

            <a href="https://la-pause-code.fr/nos-packs/" class="exit-cta">
                <span class="btn-shine"></span>
                <span class="btn-text">Découvrir le Pack →</span>
            </a>

            <div class="exit-footer">
                <span class="trust-pill">⚡️ Déjà 5,000+ utilisateurs</span>
            </div>
        </div>

        <div class="exit-glow"></div>
    </div>
</div>

<style>
    .exit-intent-modal {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .exit-intent-modal.is-active {
        display: flex;
    }

    .exit-intent-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        animation: lpc-fade-in 0.3s ease-out;
    }

    .exit-intent-content {
        position: relative;
        background: #0a0a0a;
        border: 1px solid rgba(255, 255, 255, 0.1);
        padding: 4rem 3rem;
        border-radius: 32px;
        max-width: 540px;
        width: 100%;
        text-align: center;
        overflow: hidden;
        box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
        animation: lpc-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .exit-glow {
        position: absolute;
        bottom: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 200px;
        background: var(--lpc-accent);
        filter: blur(100px);
        opacity: 0.1;
        pointer-events: none;
    }

    .exit-close {
        position: absolute;
        top: 24px;
        right: 24px;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        z-index: 10;
    }

    .exit-close:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(90deg);
    }

    .exit-badge {
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.75rem;
        color: var(--lpc-accent);
        letter-spacing: 0.2em;
        margin-bottom: 1.5rem;
        display: block;
    }

    .exit-body h3 {
        font-family: 'Inter', sans-serif;
        font-size: 2.4rem;
        font-weight: 800;
        margin: 0 0 1rem;
        color: #fff;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .exit-body p {
        font-size: 1.15rem;
        color: rgba(255, 255, 255, 0.6);
        margin-bottom: 2.5rem;
        line-height: 1.5;
    }

    .exit-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--lpc-accent);
        color: #000;
        padding: 18px 40px;
        border-radius: 16px;
        font-weight: 800;
        font-size: 1.1rem;
        text-decoration: none;
        position: relative;
        overflow: hidden;
        transition: all 0.3s;
        width: 100%;
    }

    .exit-cta:hover {
        transform: scale(1.02);
        box-shadow: 0 0 30px rgba(var(--lpc-accent-rgb), 0.3);
        background: #fff;
    }

    .exit-footer {
        margin-top: 2rem;
    }

    .trust-pill {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.4);
    }

    @keyframes lpc-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes lpc-slide-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 600px) {
        .exit-intent-content {
            padding: 3.5rem 1.5rem 2.5rem;
        }

        .exit-body h3 {
            font-size: 1.8rem;
        }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        let triggered = false;
        const modal = document.getElementById('lpc-exit-intent');
        if (!modal) return;

        const closeBtn = modal.querySelector('.exit-close');
        const overlay = modal.querySelector('.exit-intent-overlay');

        document.addEventListener('mouseleave', function (e) {
            if (e.clientY < 0 && !triggered && !localStorage.getItem('lpc_exit_shown')) {
                modal.classList.add('is-active');
                triggered = true;
                localStorage.setItem('lpc_exit_shown', 'true');
            }
        });

        const closeModal = () => modal.classList.remove('is-active');

        closeBtn.addEventListener('click', closeModal);
        overlay.addEventListener('click', closeModal);

        // ESC key to close
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeModal();
        });
    });
</script>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/lpc-theme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<div id="lpc-social-proof-container"></div>        <style>
            #lpc-social-proof-container {
                position: fixed;
                bottom: 30px;
                left: 30px;
                z-index: 9999;
                pointer-events: none;
            }

            .lpc-toast {
                background: rgba(10, 10, 10, 0.9);
                border: 1px solid rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(10px);
                padding: 12px 16px;
                border-radius: 12px;
                display: flex;
                align-items: center;
                gap: 12px;
                margin-top: 10px;
                transform: translateX(-120%);
                transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
                max-width: 300px;
                pointer-events: auto;
            }

            .lpc-toast.show {
                transform: translateX(0);
            }

            .toast-icon {
                width: 32px;
                height: 32px;
                background: rgba(var(--accent-color-rgb), 0.1);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.2rem;
            }

            .toast-content {
                display: flex;
                flex-direction: column;
            }

            .toast-text {
                color: #fff;
                font-size: 0.85rem;
                font-weight: 500;
                line-height: 1.3;
            }

            .toast-time {
                color: #666;
                font-size: 0.7rem;
                margin-top: 2px;
            }
        </style>
                <script>
            document.addEventListener('DOMContentLoaded', function () {
                document.querySelectorAll('.lpc-premium-form').forEach(form => {
                    form.addEventListener('submit', function () {
                        const postId = 14813;
                        fetch('https://la-pause-code.fr/wp-admin/admin-ajax.php', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                            body: 'action=lpc_track_click&post_id=' + postId,
                            credentials: 'include'
                        });
                    });
                });
            });
        </script>
                <div class="lpc-partner-box internal lpc-ad-footer">
            <div class="partner-neon-border" style="background: #ff2262; box-shadow: 0 0 15px #ff2262;"></div>
                            <div class="partner-label" style="color: #ff2262;">LOGICIEL & PROMPTS OS</div>
                        <div class="partner-content">
                <div class="partner-icon-wrap"
                    style="background: rgba(255, 34, 98, 0.1); border: 1px solid rgba(255, 34, 98, 0.2); border-radius: 8px; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 24px;">
                    🚀
                </div>
                <div class="partner-info">
                    <h4 style="color: #ff2262;">Pack IA Sovereign</h4>
                                            <p>Débloquez le Labo complet (47€).</p>
                                        <a href="/mon-labo/" class="partner-btn" style="background: #ff2262;">
                        Accéder <span class="arrow">→</span>
                    </a>
                </div>
            </div>
        </div>
        
	<script type="text/javascript">
		window.WPCOM_sharing_counts = {"https://la-pause-code.fr/2025/02/24/developper-des-blocs-gutenberg-avances-avec-react-et-jsx/":14813};
	</script>
				<script id="lpc-purchase-js-extra">
var lpc_vars = {"ajax_url":"https://la-pause-code.fr/wp-admin/admin-ajax.php","home_url":"https://la-pause-code.fr/"};
//# sourceURL=lpc-purchase-js-extra
</script>
<script src="https://la-pause-code.fr/wp-content/plugins/lpc-core/assets/js/lpc-purchase.js?ver=1.1.0" id="lpc-purchase-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js?ver=1.29.0" id="prism-script-js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js?ver=1.29.0" id="prism-autoloader-js"></script>
<script src="https://c0.wp.com/p/jetpack/15.5/_inc/build/likes/queuehandler.min.js" id="jetpack_likes_queuehandler-js"></script>
<script id="jetpack-stats-js-before">
_stq = window._stq || [];
_stq.push([ "view", {"v":"ext","blog":"202367866","post":"14813","tz":"0","srv":"la-pause-code.fr","j":"1:15.5"} ]);
_stq.push([ "clickTrackerInit", "202367866", "14813" ]);
//# sourceURL=jetpack-stats-js-before
</script>
<script src="https://stats.wp.com/e-202607.js" id="jetpack-stats-js" defer data-wp-strategy="defer"></script>
<script id="sharing-js-js-extra">
var sharing_js_options = {"lang":"en","counts":"1","is_stats_active":"1"};
//# sourceURL=sharing-js-js-extra
</script>
<script src="https://c0.wp.com/p/jetpack/15.5/_inc/build/sharedaddy/sharing.min.js" id="sharing-js-js"></script>
<script id="sharing-js-js-after">
var windowOpen;
			( function () {
				function matches( el, sel ) {
					return !! (
						el.matches && el.matches( sel ) ||
						el.msMatchesSelector && el.msMatchesSelector( sel )
					);
				}

				document.body.addEventListener( 'click', function ( event ) {
					if ( ! event.target ) {
						return;
					}

					var el;
					if ( matches( event.target, 'a.share-facebook' ) ) {
						el = event.target;
					} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-facebook' ) ) {
						el = event.target.parentNode;
					}

					if ( el ) {
						event.preventDefault();

						// If there's another sharing window open, close it.
						if ( typeof windowOpen !== 'undefined' ) {
							windowOpen.close();
						}
						windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomfacebook', 'menubar=1,resizable=1,width=600,height=400' );
						return false;
					}
				} );
			} )();
var windowOpen;
			( function () {
				function matches( el, sel ) {
					return !! (
						el.matches && el.matches( sel ) ||
						el.msMatchesSelector && el.msMatchesSelector( sel )
					);
				}

				document.body.addEventListener( 'click', function ( event ) {
					if ( ! event.target ) {
						return;
					}

					var el;
					if ( matches( event.target, 'a.share-twitter' ) ) {
						el = event.target;
					} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-twitter' ) ) {
						el = event.target.parentNode;
					}

					if ( el ) {
						event.preventDefault();

						// If there's another sharing window open, close it.
						if ( typeof windowOpen !== 'undefined' ) {
							windowOpen.close();
						}
						windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomtwitter', 'menubar=1,resizable=1,width=600,height=350' );
						return false;
					}
				} );
			} )();
var windowOpen;
			( function () {
				function matches( el, sel ) {
					return !! (
						el.matches && el.matches( sel ) ||
						el.msMatchesSelector && el.msMatchesSelector( sel )
					);
				}

				document.body.addEventListener( 'click', function ( event ) {
					if ( ! event.target ) {
						return;
					}

					var el;
					if ( matches( event.target, 'a.share-linkedin' ) ) {
						el = event.target;
					} else if ( event.target.parentNode && matches( event.target.parentNode, 'a.share-linkedin' ) ) {
						el = event.target.parentNode;
					}

					if ( el ) {
						event.preventDefault();

						// If there's another sharing window open, close it.
						if ( typeof windowOpen !== 'undefined' ) {
							windowOpen.close();
						}
						windowOpen = window.open( el.getAttribute( 'href' ), 'wpcomlinkedin', 'menubar=1,resizable=1,width=580,height=450' );
						return false;
					}
				} );
			} )();
//# sourceURL=sharing-js-js-after
</script>
	<iframe src='https://widgets.wp.com/likes/master.html?ver=20260214#ver=20260214&lang=fr' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe>
	<div id='likes-other-gravatars' role="dialog" aria-hidden="true" tabindex="-1"><div class="likes-text"><span>%d</span></div><ul class="wpl-avatars sd-like-gravatars"></ul></div>
	</body>

</html>

<style>
    .site-footer {
        background: #050505;
        border-top: 1px solid #1a1a1a;
        padding: 5rem 0 2rem;
        margin-top: 6rem;
    }

    .footer-inner {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 4rem;
        margin-bottom: 4rem;
    }

    .footer-logo {
        font-family: var(--font-code);
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        text-decoration: none;
        margin-bottom: 1rem;
        display: block;
    }

    .footer-logo .dot {
        color: var(--accent-color);
    }

    .footer-tagline {
        color: #666;
        font-size: 0.9rem;
        max-width: 250px;
    }

    .footer-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .footer-col h4 {
        color: #fff;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 1.5rem;
    }

    .footer-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-col li {
        margin-bottom: 0.8rem;
    }

    .footer-col a {
        color: #888;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s;
    }

    .footer-col a:hover {
        color: var(--accent-color);
    }

    .footer-bottom {
        border-top: 1px solid #111;
        padding-top: 2rem;
        text-align: center;
        color: #444;
        font-size: 0.8rem;
    }

    @media (max-width: 768px) {
        .footer-inner {
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .footer-nav {
            grid-template-columns: 1fr;
            gap: 2rem;
        }
    }
</style>