fukidashi-block

functions.php

function fukidashi_block_cgb_block_assets() { // phpcs:ignore
    // Register block styles for both frontend + backend.
    $block_url = get_stylesheet_directory_uri() . "/fukidashi-block/dist";
    wp_register_style(
        'fukidashi_block-cgb-style-css', // Handle.
        "$block_url/blocks.style.build.css",
        array( 'wp-editor' ), // Dependency to include the CSS after it.
        null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.style.build.css' ) // Version: File modification time.
    );

    // Register block editor script for backend.
    wp_register_script(
        'fukidashi_block-cgb-block-js', // Handle.
        "$block_url/blocks.build.js",
        array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
        null, // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ), // Version: filemtime — Gets file modification time.
        true // Enqueue the script in the footer.
    );

    // Register block editor styles for backend.
    wp_register_style(
        'fukidashi_block-cgb-block-editor-css', // Handle.
        "$block_url/blocks.editor.build.css",
        array( 'wp-edit-blocks' ), // Dependency to include the CSS after it.
        null // filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' ) // Version: File modification time.
    );

    /**
     * Register Gutenberg block on server-side.
     *
     * Register the block on server-side to ensure that the block
     * scripts and styles for both frontend and backend are
     * enqueued when the editor loads.
     *
     * @link https://wordpress.org/gutenberg/handbook/blocks/writing-your-first-block-type#enqueuing-block-scripts
     * @since 1.16.0
     */
    register_block_type(
        'cgb/block-fukidashi-block', array(
            // Enqueue blocks.style.build.css on both frontend & backend.
            'style'         => 'fukidashi_block-cgb-style-css',
            // Enqueue blocks.build.js in the editor only.
            'editor_script' => 'fukidashi_block-cgb-block-js',
            // Enqueue blocks.editor.build.css in the editor only.
            'editor_style'  => 'fukidashi_block-cgb-block-editor-css',
        )
    );
}

// Hook: Block assets.
add_action( 'init', 'fukidashi_block_cgb_block_assets' );