Comment étendre le bloc galerie à Gutenberg?

Je joue avec Gutenberg avant son inclusion dans le noyau, et j'aimerais savoir comment étendre le bloc de galerie existant pour changer son affichage. Par exemple, au lieu d'une grille de vignettes, j'aimerais montrer un diaporama d'images. C'est possible? Si c'est le cas, comment? Toute aide serait appréciée.

Ok, je joue avec cela depuis un petit moment et j'ai réussi à changer la sortie du bloc Gallery, avec les mises en garde suivantes:

• L'aperçu ne correspond pas à la sortie. Je pense que cela est possible mais semble être un peu plus impliqué.
• Certaines classes et balises sont requises dans la sortie pour que le bloc puisse analyser le contenu et le garder modifiable. Ces classes ont des styles frontaux qui devront être traités. Je ne suis pas sûr à ce stade s'il existe un moyen de filtrer la façon dont le bloc fait cela. Si c'était possible, cela pourrait même ne pas être une bonne idée si cela signifie que les blocs de la Galerie sont cassés lorsqu'un thème ou un plugin est désactivé. Un bloc totalement nouveau serait probablement la voie à suivre pour les situations où cela serait nécessaire.
• Je ne sais pas vraiment comment fonctionnent les tailles d'image à ce stade.
• La méthode des hooks JavaScript utilisée peut ne pas être pertinente dans la version finale. Gutenberg utilise @wordpress/hookspendant que la discussion sur le système de crochets à utiliser dans Core est en cours .
• Étant donné que la sortie des blocs est enregistrée au format HTML, pas un shortcode ou une méta, il ne sera pas possible de modifier la sortie des galeries existantes sans les modifier.

La première chose que nous devons faire est d'enregistrer un script. Cela se fait avec wp_enqueue_scripts(), mais sur le enqueue_block_editor_assetscrochet.

Le script doit avoir le wp-blocksscript comme dépendance. Il est presque certainement déjà chargé dans l'éditeur, mais en faire une dépendance assure probablement qu'il est chargé avant notre script.

function wpse_298225_enqueue_block_assets() {
    wp_enqueue_script(
        'wpse-298225-gallery-block',
        get_theme_file_uri( 'block.js' ),
        ['wp-blocks']
    );
}
add_action( 'enqueue_block_editor_assets', 'wpse_298225_enqueue_block_assets' );

Le code HTML pour la sortie d'un bloc est géré par la save()méthode du bloc. Vous pouvez voir le bloc Galerie dans ce fichier .

A ce stade (Mars 2018) Gutenberg soutient un filtre sur la méthode des blocs de sauvegarde, blocks.getSaveElement. Nous pouvons ajouter un crochet à cela en JavaScript comme ceci:

wp.hooks.addFilter(
    'blocks.getSaveElement',
    'wpse-298225',
    wpse298225GallerySaveElement
)

Le premier argument est le nom du hook, le 2ème argument est - je pense - un espace de noms, et le dernier argument est la fonction de rappel.

Puisque nous remplaçons la save()méthode du bloc, nous devons retourner un nouvel élément. Cependant, ce n'est pas un élément HTML normal que nous devons retourner. Nous devons renvoyer un élément React .

Lorsque vous regardez la save()méthode du bloc d'origine, vous voyez JSX. React, que Gutenberg utilise sous le capot, le prend en charge pour le rendu des éléments. Consultez cet article pour en savoir plus.

JSX nécessite normalement une étape de construction, mais comme je n'introduis pas d'étape de construction pour cet exemple, nous avons besoin d'un moyen de créer un élément sans JSX. React le fournit createElement(). WordPress fournit un wrapper pour cela et d'autres fonctionnalités de réaction sous la forme de wp.element. Donc, pour utiliser, createElement()nous utilisonswp.element.createElement() .

Dans la fonction de rappel pour blocks.getSaveElementnous obtenons:

• element L'élément d'origine créé par le bloc.
• blockType Un objet représentant le bloc utilisé.
• attributesLes propriétés de l'instance de bloc. Dans notre exemple, cela inclut les images dans la galerie et les paramètres comme le nombre de colonnes.

Notre fonction de rappel doit donc:

• Renvoie l'élément d'origine pour les galeries non bloquées.
• Prenez les attributs, en particulier les images, et créez-en un nouvel élément représentant la galerie.

Voici un exemple complet qui affiche simplement a ulavec une classe,, my-galleryet lis pour chaque image avec la classe my-gallery-itemet et imgdans chacun avec l' srcensemble vers l'URL de l'image.

function wpse298225GallerySaveElement( element, blockType, attributes ) {
    if ( blockType.name !== 'core/gallery' ) {
        return element;
    }

    var newElement = wp.element.createElement(
        'ul',
        {
            'className': 'wp-block-gallery my-gallery',
        },
        attributes.images.map(
            function( image ) {
                return wp.element.createElement(
                    'li',
                    {
                        'className': 'blocks-gallery-item my-gallery-item',
                    },
                    wp.element.createElement(
                        'img',
                        {
                            'src': image.url,
                        }
                    )
                )
            }
        )
    )

    return newElement
}

Quelques points à noter:

• Le bloc de galerie d'origine trouve des images en recherchant ul.wp-block-gallery .blocks-gallery-item , donc ce balisage et ces classes sont nécessaires pour que le bloc soit éditable. Ce balisage est également utilisé pour le style par défaut.
• attributes.images.mapboucle sur chaque image et renvoie un tableau d'éléments enfants en tant que contenu pour l'élément principal. À l'intérieur de ces éléments, il y a un autre élément enfant pour l'image elle-même.

Ici pour fournir une réponse mise à jour. J'ai trouvé cet article extrêmement utile pour répondre à la question de savoir comment étendre le bloc Galerie.

En bref, il est conseillé de simplement créer un nouveau bloc plutôt que d'étendre un existant. De la poste dans mon lien ci-dessus:

si vous modifiez le code HTML d'un bloc [en l'étendant], il ne sera pas reconnu comme le bloc d'origine. Plutôt que d'essayer de manipuler un bloc de base, il semble que désinscrire le bloc de base et enregistrer un nouveau bloc de remplacement à sa place serait une approche plus sûre - de cette façon, vous vous assurez que les utilisateurs du site utilisent votre galerie personnalisée particulière, qui sera validée car il définit sa propre structure HTML.

Le lien ci-dessus fait également référence au plugin Create-Guten_Block qui est un outil en ligne de commande qui générera tout ce dont vous avez besoin pour vous lancer dans la création de blocs. L'outil est très facile à utiliser et à configurer.

Avec ces ressources, j'ai pu comprendre comment développer un bloc de galerie personnalisé en peu de temps