Comment mettre en place des actifs pour un bloc Gutenberg

Lorsque vous développez des blocs Gutenberg, la bonne façon d'obtenir des actifs d'observation comprend: 1. Utilisez Register_Block_Type pour spécifier les chemins de chemin de Editor_Script, Editor_Style and Style; 2. Enregistrez les ressources via WP_register_Script et WP_register_style dans Functions.php ou plug-in, et définissez les dépendances et versions correctes; 3. Configurez l'outil de construction pour sortir les formats de module appropriés et assurez-vous que les chemins sont cohérents; 4. Contrôlez la logique de chargement des styles frontaux via ADD_THEME_SUPPORT ou ENQUEUE_BLOCK_Assets pour s'assurer que les styles prennent effet et évitent les conflits.

Lors du développement de blocs Gutenberg, les actifs d'observation correctement (tels que les fichiers JavaScript et CSS) sont une étape clé pour s'assurer que les blocs fonctionnent correctement. Il ne s'agit pas seulement de charger des fichiers dans l'éditeur backend, mais également de prendre en compte les problèmes d'affichage frontal et de gestion des dépendances.

1. Utilisez register_block_type pour spécifier correctement le chemin d'actif

WordPress fournit la fonction register_block_type pour enregistrer un type de bloc et vous permet de spécifier les chemins de fichier JS et CSS correspondants via les paramètres.

 registre_block_type (__dir__, array (
    'editor_script' => 'my-block-editor-script',
    'editor_style' => 'my-block-éditeur-styles',
    'Style' => 'My-Block-Fontend-Styles',
));

• editor_script : utilisé pour les scripts dans les éditeurs de blocs (généralement compilés .js ou .jsx )
• editor_style : seul le style chargé dans l'éditeur et n'affecte pas le premier plan
• style : un style qui sera chargé à l'avant et au backend, généralement utilisé pour l'apparence de base des blocs

2. Enregistrer les scripts et les feuilles de style en functions.php ou plugin

Vous devez d'abord enregistrer ces ressources avec wp_register_script et wp_register_style afin que WordPress puisse reconnaître la poignée que vous avez mentionnée dans register_block_type .

 fonction my_block_assets () {
    wp_register_script (
        'My-Block-Editor-Script',
        get_template_directory_uri (). '/blocks/my-lock/build/index.js',
        Array («WP-Blocks», «WP-Element», «WP-Editor»),
        filemtime (get_template_directory (). '/blocks/my-lock/build/index.js')
    ));

    wp_register_style (
        'My-Block-Editor-Styles',
        get_template_directory_uri (). '/blocks/my-lock/editor.css',
        tableau(),
        filemtime (get_template_directory (). '/blocks/my-lock/editor.css')
    ));

    wp_register_style (
        «My-block-frontend-style»,
        get_template_directory_uri (). '/blocks/my-lock/style.css',
        tableau(),
        filemtime (get_template_directory (). '/blocks/my-lock/style.css')
    ));
}
add_action ('init', 'my_block_assets');

Faites attention à plusieurs points clés:

• Les dépendances de script doivent être écrites en entier, telles que wp-blocks , wp-element , wp-editor
• Utilisez filemtime() pour éviter que le navigateur ne mette la mise en cache de l'ancienne version des fichiers
• Si vous utilisez la structure du répertoire de thème, il est recommandé d'utiliser get_template_directory ; S'il s'agit d'un plugin, utilisez plugins_url() pour coopérer avec __FILE__

3. Précautions pour la configuration des outils de construction

Si vous utilisez WebPack, Vite ou d'autres outils de construction pour former le code de blocage, vous devez faire attention aux points suivants:

• Le fichier JS de sortie doit être un module UMD ou être correctement emballé dans un format adapté aux environnements WordPress.
• Ne préparez pas à réagir et à réagir dans votre script séparément, mais utilisez des références de variables globales fournies par WordPress (telles que window.React , window.ReactDOM )
• Assurez-vous que le chemin de sortie est cohérent avec le chemin enregistré en PHP

Pratiques courantes:

• Mettez le script de l'éditeur dans /src/blocks/your-block/index.js
• Compiler avec /build/your-block/index.js à l'aide de webpack
• Dans le même temps, générez un fichier .asset.php pour obtenir automatiquement des dépendances et des numéros de version (prise en charge par défaut WordPress)

4. Conseils pour charger les styles frontaux

Par défaut, le paramètre style du bloc Gutenberg chargera automatiquement le style au premier plan. Mais parfois, vous constaterez que le style n'est pas efficace, la raison peut être:

• Le thème ne permet pas correctement la prise en charge du style de bloc (vérifiez si add_theme_support( 'wp-block-styles' ) est appelé)
• Le style est couvert par d'autres styles de thème, il est recommandé d'ajouter des noms de classe d'espace de noms
• Certains blocs ne seront pas rendus sur l'avant (comme certains blocs dynamiques). Pour le moment, vous pouvez envisager d'utiliser enqueue_block_assets pour charger à la demande.

 fonction my_enqueue_frontend_assets () {
    if (has_block ('my / block-name')) {
        wp_enqueue_style ('my-block-frontend-style');
    }
}
add_action ('wp_enqueue_scripts', 'my_enqueue_fronttend_assets');

Cette méthode est plus flexible, mais elle nécessite également de déterminer si le bloc existe réellement sur la page.

Fondamentalement, c'est tout. Tant que vous suivez les spécifications d'enregistrement des blocs de WordPress et faites attention aux problèmes de construction et de chemin, vous pouvez charger avec succès les actifs dans le bloc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!