Hier ein Beispiel, wie man das HTML Markup von Gutenberg Blocks komplett selbst erstellen kann.

Eine Möglichkeit, den Output von Gutenberg Blöcken zu ändern ist es, den render_block Filter Hook zu verwenden. Für Kleinigkeiten funktioniert das auch gut. Wenn man aber größere Änderungen am HTML Markup machen will, dann ist es meist einfacher, die komplette render() Funktion des Blocks zu ersetzen.

In diesem Beispiel wird die render Funktion des WooCommerce-Blocks featured-category komplett überschrieben, indem die Klasse FeaturedCategory mit einer eigenen Klasse beerbt wird.

Bei Initialisierung der Klasse wird die Standard-Renderfunktion der Originalklasse überschrieben und fortan unsere eigene Funktion verwendet.

Da wir die Klasse beerben, können wir einfach die Funktion render() aus der Originalklasse kopieren und nach Belieben bearbeiten. Darin aufgerufene Funktionen wie $this->get_classes() funktionieren weiterhin.

Hier wurde in der Funktion lediglich ein String TEST vor dem Titel des Blocks hinzugefügt, um zu zeigen, dass es funktioniert.

Ich hab hier noch eingebaut, dass das Rendering im Gutenberg Editor nicht beeinflusst wird, ansonsten kann es Probleme geben, wenn z.B. Elemente einfach entfernt werden. Die neue Renderfunktion wird also nur im Frontend auf der Website verwendet.

<?php
namespace Automattic\WooCommerce\Blocks\BlockTypes;

/**
 * CustomFeaturedCategory class.
 */
class CustomFeaturedCategory extends FeaturedCategory {

    /**
     * Class constructor.
     *
     * add hook for override
     */
    function __construct(){
        // too keep all working fine in backend
        if(is_admin()) return;

        add_action( 'after_setup_theme', [$this, 'override_register'] );

    }

    /**
     * we override the default render function for this block;
     */
    function override_register() {

        register_block_type( $this->namespace.'/'.$this->block_name, array(
            'render_callback' => [$this, 'render'],
        ) );
    }


    /**
     * Render the Featured Category block.
     *
     * @param array  $attributes Block attributes. Default empty array.
     * @param string $content    Block content. Default empty string.
     * @return string Rendered block type output.
     */
    public function render( $attributes = array(), $content = '' ) {
        $id       = isset( $attributes['categoryId'] ) ? (int) $attributes['categoryId'] : 0;
        $category = get_term( $id, 'product_cat' );
        if ( ! $category || is_wp_error( $category ) ) {
            return '';
        }
        $attributes = wp_parse_args( $attributes, $this->defaults );
        if ( ! $attributes['height'] ) {
            $attributes['height'] = wc_get_theme_support( 'featured_block::default_height', 500 );
        }

        $title = sprintf(
            '<h2 class="wc-block-featured-category__title">TEST %s</h2>',
            wp_kses_post( $category->name )
        );

        $desc_str = sprintf(
            '<div class="wc-block-featured-category__description">%s</div>',
            wc_format_content( $category->description )
        );

        $output = sprintf( '<div class="%1$s" style="%2$s">', esc_attr( $this->get_classes( $attributes ) ), esc_attr( $this->get_styles( $attributes, $category ) ) );

        $output .= $title;
        if ( $attributes['showDesc'] ) {
            $output .= $desc_str;
        }
        $output .= '<div class="wc-block-featured-category__link">' . $content . '</div>';
        $output .= '</div>';

        return $output;
    }

}

// initialize Class
new CustomFeaturedCategory();