Adding separator block extension

assets/js/sendig-custom.js

@@ -1,8 +1,8 @@
 /**
  * Custom Block Theme Styles
  */
-wp.blocks.registerBlockStyle('core/separator', {
-    name: 'sendig-separator',
-    label: wp.i18n.__('Sendig Separator', 'sendig'),
-    is_default: true
+wp.blocks.registerBlockStyle( 'core/separator', {
+	name: 'sendig-separator',
+	label: wp.i18n.__( 'Sendig Separator', 'sendig' ),
+	is_default: true
 } );

functions.php

@@ -2,18 +2,33 @@
 /**
  * Sending Theme functions
  */
+define( 'SENDIG_THEME_VERSION', '1.0.0' );
 
 /**
- * Register the custom block styles for the theme
+ * Register the custom block styles JavaScript for the theme
  */
 add_action( 'enqueue_block_editor_assets', 'sendig_editor_assets' );
 function sendig_editor_assets() {
+	$asset_file   = include get_template_directory() . '/build/index.asset.php';
+	$dependencies = $asset_file['dependencies'];
+	$dependencies[] = 'wp-edit-site';
+	$version      = $asset_file['version'];
+
 	wp_enqueue_script(
 		'sendig-block-styles-script',
 		get_theme_file_uri( '/assets/js/sendig-custom.js' ),
-		array( 'wp-blocks', 'wp-i18n' )
+		array( 'wp-blocks', 'wp-i18n' ),
+		SENDIG_THEME_VERSION,
+		true
 	);
 	wp_set_script_translations( 'sendig-block-styles-script', 'sendig' );
+	wp_enqueue_script(
+		'sendig-block-extensions-script',
+		get_theme_file_uri( '/build/index.js' ),
+		$dependencies,
+		$version,
+		true
+	);
 }
 
 /**

src/index.js

@@ -0,0 +1,53 @@
+import { registerBlockExtension } from '@10up/block-components';
+import { Button } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
+
+/**
+ * BlockEdit
+ *
+ * a react component that will get mounted in the editor when the block
+ * is selected. It is recommended to use Slots like `BlockControls` or
+ * `InspectorControls` in here to put settings into the blocks
+ * toolbar or sidebar.
+ *
+ * @param {object} props block props
+ * @returns {JSX}
+ */
+function BlockEdit(props) {
+	console.log('Hello from Sendig!');
+
+	function handleClick() {
+		console.log('Clicked from Sendig!');
+	}
+
+	return (
+		<BlockControls>
+			<Button
+				variant="primary"
+				onClick={ handleClick }
+			>
+				Click here
+			</Button>
+		</BlockControls>
+	);
+}
+
+
+function generateClassNames(props) {
+
+}
+
+registerBlockExtension(
+	'core/separator',
+	{
+		extensionName: 'sendig-separator',
+		attributes: {
+			hasFlipDirection: {
+				type: 'string',
+				default: 'right',
+			},
+		},
+		classNameGenerator: generateClassNames,
+		Edit: BlockEdit,
+	}
+);