WP - Add block style variations

block-style-variations.js

jQuery(document).ready(function($) {

    // Add 'Semibold' style to Paragraph blocks
    wp.blocks.registerBlockStyle("core/paragraph", {
        name: "semibold",
        label: "Semibold"
    });

    // Add 'Black' style to Paragraph blocks
    wp.blocks.registerBlockStyle("core/paragraph", {
        name: "weightblack",
        label: "Black"
    });

});

custom-block-styles.css

p.is-style-semibold {
  font-weight: 600 !important; 
}

p.is-style-weightblack {
  font-weight: 800 !important; 
}

functions.php

<?php

// Enqueue the variations JS.
add_action( 'enqueue_block_editor_assets', 'block_editor_variations_js' );
function block_editor_variations_js() {
  wp_enqueue_script( 'blockstylevariations-js', get_stylesheet_directory_uri() . '/js/block-style-variations.js', array( 'jquery' ), '1.0', true );
}

// Enqueue custom Block Styles.
add_action( 'enqueue_block_assets', 'custom_block_styles_css' );
function custom_block_styles_css() {
  wp_enqueue_style( 'custom-block-styles', get_stylesheet_directory_uri() . '/css/custom-block-styles.css' );
}