Créer des blocs Gutenberg personnalisés dans WooCommerce : un guide complet pour les développeurs

WordPress a récemment lancé @wordpress/scripts npm, qui crée un nouveau paquet Développement WordPressUn ensemble de scripts réutilisables est fourni. Cet article explique en détail comment utiliser les scripts ES6etJSX répondre en chantant @wordpress/scripts tenir ou étreindreCréez un fichier personnalisé Gutenberg motte (de terre)et l'intègre dans le WooCommerce Au milieu.

avant le début (de qqch)

Avant de commencer le développement, nous devons configurer certains environnements de développement nécessaires :

• Environnement de développement WordPressPour ce faire, vous devez vous assurer que WordPress est installé et fonctionne.
• Outils de construction JavaScript (Node/npm)Nous utiliserons Réagir répondre en chantant JSXLe besoin deConfiguration de JavaScript Outils de construction.
• Plugin WooCommerceSi vous n'avez pas encore installé le plugin WooCommerce, vous devez d'abord le faire.

Comment créer un thème WordPress avec React

9 mai à 11:44

019240

Étape 1 : Créer le répertoire du plugin et installer les dépendances

Tout d'abord, il est nécessaire de mettre en place l'outil wp-content/plugins pour créer un répertoireplug-in (composant logiciel)catalogue et installez les @wordpress/scripts Paquet.

Les étapes spécifiques sont les suivantes :

1. Création d'un répertoire de plug-ins: en wp-content/plugins pour créer un fichier nommé monPremier-bloc du dossier.
2. Installation des dépendances: Accès monPremier-bloc et utilisez le fichier npm montage @wordpress/scripts Paquet :

cd wp-content/plugins
mkdir monPremier-bloc
cd monPremier-bloc
npm init
npm install --save-dev --save-exact @wordpress/scripts

Une fois l'installation terminée, tous les paquets de dépendances seront sauvegardés dans le dossier node_modules Catalogue.

Étape 2 : Configurer le fichier package.json

existent monPremier-bloc ouvrez le répertoire package.json et ajoutez la configuration de script suivante :

"scripts" : {
  "start" : "wp-scripts start",
  "build" : "wp-scripts build"
}

• npm run startDémarrez le serveur de développement et mettez-le en mode d'écoute pour mettre à jour le code en temps réel.
• npm run build: Emballer le fichier de construction et le préparer pour la publication.

Étape 3 : Créer un fichier plugin pour enregistrer le bloc Gutenberg

Nous devons créer un fichier de plugin dans lequel nous enregistrons et chargeons nos blocs Gutenberg personnalisés.

existent monPremier-bloc pour créer un répertoire monPremier-bloc.php et ajoutez le code suivant :

<?php
/*
Nom du plugin : myFirst-block
Auteur : webkul
*/
function myFirst_block() {
    $styleURI = plugin_dir_url( __FILE__ ) . '/src/style.css' ;
    // Mise en file d'attente des styles
    wp_enqueue_style(
        'myFirst-block-style'.
        $styleURI
    );

    // Enregistrer le fichier JavaScript (build/index.js)
    wp_register_script(
        'myFirst-block-script'.
        plugins_url('build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    // Enregistrer les styles de l'éditeur
    wp_register_style(
        'myFirst-block-editor-style'.
        plugins_url( 'src/editor.css', __FILE__ )
    );

    // Enregistrer le bloc
    register_block_type( 'myCustomBlock/myFirst-block', array(
        'editor_script' => 'myFirst-block-script',
        'editor_style' => 'myFirst-block-editor-style',
    ) );
}
add_action( 'init', 'myFirst_block' ) ;

Le code fait ce qui suit :

• Charger les styles personnalisés et les fichiers JavaScript.
• S'est inscrit à un nouveau bloc Gutenberg.

Étape 4 : Écrire le code JavaScript du bloc d'enregistrement

Ensuite, il est nécessaire d'ajouter le monPremier-bloc/src/index.js pour écrire le code JavaScript permettant d'enregistrer notre bloc Gutenberg. Tout d'abord, créez le fichier src/index.js et ajoutez ce qui suit :

import { registerBlockType } from '@wordpress/blocks' ;
import { RichText } from '@wordpress/block-editor' ;

// Enregistrer le premier bloc personnalisé
registerBlockType( 'myCustomBlock/my-first-block', {
    title : "Mon premier bloc personnalisé",
    icône : "smiley",
    catégorie : "commun",
    attributs : {
        content : {
            type : "string",
            source : 'html',
            sélecteur : "p",
        },
    },
    edit : (props) => {
        const { attributes : { content }, setAttributes } = props.

        const onChangeContent = (newContent) => {
            setAttributes({ content : newContent }) ;
        };

        retourner (
            

                <RichText 
                    tagName="p" 
                    value={ content } 
                    onChange={ onChangeContent } 
                    placeholder="Veuillez saisir le contenu"
                />
            

        );
    },
    save : (props) => {
        retourner (
            

                <RichText.Content tagName="p" value={props.attributes.content} />
            

        );
    }
});

Étape 5 : Ajouter un fichier de style

Nous devons également définir les styles pour le bloc Gutenberg. Créez deux fichiers CSS :src/editor.css pour les styles dans l'éditeur.src/style.css Styles utilisés pour la présentation frontale.

1. Styles de l'éditeur (src/editor.css): :

.my-first-block {
    couleur : bleu ;
    couleur de fond : #f0f0f0f0 ;
    padding : 20px ;
}

2. Style de l'interface (src/style.css): :

.my-first-block {
    couleur : vert ;
    padding : 20px ;
    couleur de fond : #e0e0e0 ;
}

Étape 6 : Construire et exécuter

Lorsque tous les fichiers ont été créés, utilisez la commande suivante pour démarrer le serveur de développement :

npm run start

Cette commande ajoutera une nouvelle commande à la base de données src/index.js Construit et met à jour automatiquement les fichiers au fur et à mesure qu'ils sont modifiés build/index.js fichier. Maintenant, votre bloc Gutenberg personnalisé devrait être prêt à être utilisé dans l'éditeur.

Étape 7 : Autres extensions fonctionnelles (facultatif)

Vous pouvez également créer des blocs Gutenberg plus complexes. Par exemple, nous pouvons créer un bloc de composant de carte qui permet aux utilisateurs d'ajouter des images, des légendes et des descriptions. En utilisant le composant useBlockProps répondre en chantant Blocs intérieurs API qui permet d'ajouter d'autres blocs à l'intérieur du bloc de la carte.

Vous trouverez ci-dessous un exemple de bloc de composants de carte simple :

import { registerBlockType } from '@wordpress/blocks' ;
import { MediaUpload, RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor' ;

registerBlockType( 'myCustomBlock/card-block', {
    title : "Composant de carte",
    icône : "grid-view",
    catégorie : "widgets",
    attributs : {
        title : { type : 'string' },
        description : { type : 'string' },
        imageUrl : { type : 'string' },
    },
    edit : (props) => {
        const { attributes, setAttributes } = props ;
        const blockProps = useBlockProps() ;

        retourner (
            

                <MediaUpload
                    onSelect={(media) => setAttributes({ imageUrl : media.url })}
                    render={({ open }) => (
                        Sélectionner une image
                    )}
                />
                <RichText
                    tagName="h3"
                    value={attributes.title}
                    onChange={(newTitle) => setAttributes({ title : newTitle })}
                    placeholder="Titre"
                />
                <RichText
                    tagName="p"
                    value={attributes.description}
                    onChange={(newDescription) => setAttributes({ description : newDescription })}
                    placeholder="Description"
                />
                <InnerBlocks />
            

        );
    },
    save : (props) => {
        const { attributes } = props ;
        retourner (
            

                
                <RichText.Content tagName="h3" value={attributes.title} />
                <RichText.Content tagName="p" value={attributes.description} />
                <InnerBlocks.Content />
            

        );
    }
});

résumés

Avec les étapes ci-dessus, nous avons créé un simple bloc Gutenberg personnalisé et ajouté la balisefaire avancer une partie de qqch.et les styles de l'éditeur. Vous pouvez étendre la fonctionnalité du bloc selon vos besoins, par exemple en prenant en charge davantage d'éléments dans le bloc, en ajoutant des contrôles personnalisés, etc.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.