web-dev-qa-db-fra.com

Le bloc personnalisé de Gutenberg ne s'affiche pas dans la boîte de dialogue d'insertion

J'essaie de construire le plus simple des blocs personnalisés de Gutenberg en consultant le manuel https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type/ .

La structure du répertoire est la suivante:

wp-content
   plugins
      gutenberg-bolierplate-block
         block.js
         gutenberg-boilerplate-block.php

Contenu de gutenberg-boilerplate-block.php

<?php
function gutenberg_bolierplate_block() {
    wp_register_script(
        'gutenberg-boilerplate-block-es5',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' )
    );

    register_block_type( 'gutenberg-boilerplate-block/hello-world', array(
        'editor_script' => 'gutenberg-boilerplate-block-es5',
    ) );
}

add_action( 'init', 'gutenberg_bolierplate_block' );

Contenu de block.js

var el = wp.elements.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    blockStyle = { backgroundColor: '#900', color: '#fff', padding: '20px' };

registerBlockType ( 'gutenberg-boilerplate-block/hello-world', {
        title: 'Hello World',
        icon: 'universal-access-alt',
        category: 'common',
        edit: function() {
            return el( 'p', { style: blockStyle }, 'Hello editor' );
        },
        save:  function() {
            return el( 'p', { style: blockStyle }, 'Hello saved content' );
        }
} );

Mais le bloc est n'apparaissant jamais dans la boîte de dialogue d'insertion . J'ai essayé dans différents navigateurs et aussi en effaçant le cache. C'est la première fois que je m'essaye à cela et je ne sais absolument pas ce que je fais mal.

Toute suggestion aiderait grandement!

block-editor
1
Subrata Sarkar

Vous devriez mettre vos scripts en file d'attente en utilisant l'action enqueue_block_assets, comme ceci:

add_action('enqueue_block_assets', 'gutenberg_bolierplate_block');

Deuxièmement, vous devez utiliser JSX avec un environnement de développement JavaScript moderne pour écrire facilement vos blocs.

J'ai fabriqué un passe-partout pour mon usage personnel que vous pouvez utiliser: https://github.com/HardeepAsrani/gutenberg-boilerplate

Vous devez simplement exécuter npm install pour installer les dépendances, puis npm run dev ou npm run build pour transpiler le code.

Si vous voulez continuer de cette façon, vous devrez éditer la première ligne de votre code de

var el = wp.elements.createElement,

à

var el = wp.element.createElement,

Comme il utilise un nom de module incorrect.

2
Hardeep Asrani

Le problème est:

var el = wp.element s . createElement

Je vous recommande de vérifier la console souvent pendant le développement de votre bloc. En tant qu'erreur de ce genre, celle-ci apparaît souvent en premier.

2
Danny Cooper