it-swarm.com.de

Hinzufügen einer benutzerdefinierten Klasse zu Kernblöcken in Gutenberg

Ich versuche, eine Klasse zum Auflisten von Blöcken (core/list) in Gutenberg hinzuzufügen. Leider sieht es so aus, als ob einige Blöcke wie Listen und Absätze nicht den Standardklassennamen wp-block-{name} haben. Sie können nicht mit dem Filter blocks.getBlockDefaultClassName umbenannt werden.

Um das zu umgehen, habe ich den blocks.getSaveContent.extraProps-Filter verwendet, mit dem ich scheinbar ALLEN Blöcken, die noch keine Klassen haben, eine Klasse hinzufügen kann. Der folgende Code zeigt, wie ich das zum Laufen gebracht habe. Es fügt added-class-name zu Block-Likes-Listen, Absätzen usw. hinzu.

function addBlockClassName( className ) {
  return Object.assign( className, { class: 'added-class-name' } );
}

wp.hooks.addFilter(
  'blocks.getSaveContent.extraProps',
  'gdt-guten-plugin/add-block-class-name',
  addBlockClassName
);

Und ich stelle es so an:

function gdt_blocks_class_rename() {
  wp_enqueue_script(
      'gdt-plugin-blacklist-blocks',
      get_stylesheet_directory_uri() . '/dist/guten-addons.js',
      array( 'wp-blocks' )
  );
}
add_action( 'enqueue_block_editor_assets', 'gdt_blocks_class_rename' );

Ich möchte jedoch in der Lage sein, eine Klasse zuONLYlist blocks hinzuzufügen? Kann das überhaupt gemacht werden?

7
Trevor

Mit diesem Hook haben Sie ein zweites und ein drittes Argument. Mit dem zweiten können Sie den Blocktyp ermitteln.

https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/

Ein Filter, der für alle Blöcke gilt, die ein WP -Element in der Speicherfunktion zurückgeben. Dieser Filter wird verwendet, um dem Stammelement der Speicherfunktion zusätzliche Requisiten hinzuzufügen. Beispiel: Hinzufügen eines Klassennamens, einer ID oder einer gültigen Requisite für dieses Element. Er erhält die aktuellen Requisiten des Sicherungselements, den Blocktyp und die Blockattribute als Argumente.

function addBlockClassName( props, blockType ) {
    if(blockType.name === 'core/list') {
        return Object.assign( props, { class: 'wp-block-list' } );
    }
    return props;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'gdt-guten-plugin/add-block-class-name',
    addBlockClassName
);
8
Shibi