web-dev-qa-db-fra.com

Comment étendre le bloc de galeries à Gutenberg?

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 appréciée.

imagesgalleryblock-editor
13
leemon

Ok, je joue avec cela 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 front-end qui devront être traités. Je ne suis pas sûr à ce stade 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 voie à suivre dans 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 tandis que la discussion sur le système de crochets à utiliser dans Core est en cours .
  • Étant 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 éditer.

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

Le script doit avoir le script wp-blocks en tant que 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 Gallery 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 noms et le dernier argument est la fonction de rappel.

Comme 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 React element.

Lorsque vous regardez la méthode save() du bloc original, 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 à ce sujet.

JSX nécessite normalement une étape de construction, mais comme je n'introduis pas une é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.

Donc, notre fonction de rappel doit:

  • 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 génère simplement une ul avec une classe, my-gallery et lis pour chaque image avec les classes my-gallery-item et et img avec chacune la valeur src définie 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 points à 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.
13
Jacob Peattie

Ici pour fournir une réponse mise à jour. J'ai trouvé ce message extrêmement utile en répondant à 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 étendant], il ne sera pas reconnu comme le bloc d'origine. Plutôt que d'essayer de manipuler un bloc central, il semblerait plus sûr de ne pas enregistrer ce dernier et d'enregistrer un nouveau bloc de remplacement à sa place. Vous garantissez ainsi que les utilisateurs du site utilisent votre galerie personnalisée, ce qui valide il définit sa propre structure HTML.

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

Avec ces ressources, j'ai pu comprendre comment développer rapidement un bloc de galerie personnalisé.

2
Jeff Wilkerson