Comment étendre le bloc de galeries à Gutenberg?

10

Je joue avec Gutenberg en avance sur 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 afficher un diaporama d'images. C'est possible? Si c'est le cas, comment? Toute aide serait la bienvenue.

    
posée leemon 19.03.2018 - 10:12

1 réponse

9

Ok, je joue un peu avec cela 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 compliqué.
  • 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 front-end qui devront être traités. À ce stade, je ne suis pas sûr s'il existe un moyen de filtrer la manière dont le bloc fait cela. Si cela était possible, ce ne serait même pas une bonne idée si cela signifiait que des blocs de la Galerie étaient cassés lorsqu'un thème ou un plugin était désactivé. Un tout nouveau bloc serait probablement la solution pour les situations où cela serait nécessaire.
  • Je ne sais pas trop comment fonctionnent les tailles d'image à ce stade.
  • La méthode des points d'ancrage JavaScript utilisés peut ne pas être pertinente dans la version finale. Gutenberg utilise @wordpress/hooks tout en discutant du système de crochets à utiliser dans le noyau est en cours .
  • Etant donné que la sortie de Blocks est enregistrée au format HTML, et non en tant que shortcode ou méta, il ne sera pas possible de modifier la sortie des galeries existantes sans les modifier.

La première chose à faire est d’enregistrer un script. Ceci est fait avec wp_enqueue_scripts() , mais sur le crochet enqueue_block_editor_assets .

Le script doit avoir le dépendance wp-blocks comme dépendance. Il est presque certainement déjà chargé dans l’éditeur, mais en faire une dépendance assure probablement son chargement 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 méthode save() du bloc. Vous pouvez voir le bloc Galerie dans ce fichier .

À ce stade (mars 2018), Gutenberg prend en charge un filtre sur la méthode de sauvegarde des blocs, blocks.getSaveElement . Nous pouvons ajouter un crochet à ceci en JavaScript comme ceci:

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

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

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

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

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 fournit ceci avec 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 utilisons wp.element.createElement() .

Dans la fonction de rappel pour blocks.getSaveElement , nous obtenons:

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

Notre fonction de rappel doit donc:

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

Voici un exemple complet qui sort simplement un ul avec une classe, my-gallery et li s pour chaque image avec la classe my-gallery-item et et img dans chacune avec le src défini sur 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 éléments à prendre en compte:

  • Le bloc de la galerie d'origine recherche les images en recherchant ul.wp-block-gallery .blocks-gallery-item . Ce balisage et ces classes sont donc indispensables pour pouvoir modifier le bloc. Ce balisage est également utilisé pour le style par défaut.
  • attributes.images.map parcourt chaque image et renvoie un tableau d'éléments enfants en tant que contenu de 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.
réponse donnée Jacob Peattie 21.03.2018 - 10:57

Lire d'autres questions sur les étiquettes