Custom Elementor Widgets, Gutenberg Blocks and Divi Modules

add_action( 'elementor/widgets/register', function ( $widgets_manager ) {
    require_once __DIR__ . '/widgets/class-vendor-card.php';
    $widgets_manager->register( new \MyPlugin\Widgets\Vendor_Card() );
} );

// Dynamic tag group must exist before the tag registers.
add_action( 'elementor/dynamic_tags/register', function ( $dynamic_tags ) {
    \Elementor\Plugin::$instance->dynamic_tags->register_group( 'my-plugin', [
        'title' => __( 'My Plugin', 'my-textdomain' ),
    ] );
    require_once __DIR__ . '/tags/class-vendor-rating-tag.php';
    $dynamic_tags->register( new \MyPlugin\Tags\Vendor_Rating() );
} );

The old widgets_registered hook is the most common reason a widget disappears after an Elementor update.

{
  "apiVersion": 3,
  "name": "my-plugin/vendor-card",
  "title": "Vendor Card",
  "category": "widgets",
  "icon": "store",
  "supports": { "html": false, "align": true },
  "attributes": {
    "vendorId": { "type": "number" },
    "showRating": { "type": "boolean", "default": true }
  },
  "render": "file:./render.php",
  "editorScript": "file:./index.js",
  "style": "file:./style.css"
}

Pointing render at a PHP file makes the block server-rendered, so it stays correct when vendor data changes.

<?php
// render.php
$vendor_id = isset( $attributes['vendorId'] ) ? (int) $attributes['vendorId'] : 0;
if ( ! $vendor_id ) {
    return;
}
$store  = dokan_get_store_info( $vendor_id );
$rating = dokan_get_seller_rating( $vendor_id );
?>
<div <?php echo get_block_wrapper_attributes( [ 'class' => 'vendor-card' ] ); ?>>
    <h3><?php echo esc_html( $store['store_name'] ?? '' ); ?></h3>
    <?php if ( ! empty( $attributes['showRating'] ) ) : ?>
        <span class="vendor-card__rating"><?php echo esc_html( $rating['rating'] ); ?>/5</span>
    <?php endif; ?>
</div>

get_block_wrapper_attributes() is what keeps the align and className supports working, and server rendering avoids the invalid-block problem.

add_action( 'acf/init', function () {
    if ( ! function_exists( 'acf_register_block_type' ) ) {
        return;
    }
    acf_register_block_type( [
        'name'            => 'testimonial',
        'title'           => __( 'Testimonial', 'my-textdomain' ),
        'render_template' => get_stylesheet_directory() . '/blocks/testimonial/render.php',
        'category'        => 'formatting',
        'icon'            => 'format-quote',
        'mode'            => 'auto',
        'supports'        => [ 'align' => false, 'jsx' => true ],
    ] );
} );

acf/init is the safe hook because ACF may not be loaded earlier, and the function_exists guard keeps the site alive if ACF is deactivated.