changes to blocks and styles

includes/blocks/lcp-visualizer/lcp-visualizer.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Plugin Name:       Todo List
+ * Description:       Example block scaffolded with Create Block tool.
+ * Requires at least: 6.6
+ * Requires PHP:      7.2
+ * Version:           0.1.0
+ * Author:            The WordPress Contributors
+ * License:           GPL-2.0-or-later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:       todo-list
+ *
+ * @package CreateBlock
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+
+
+
+function render_lcp_visualizer_block() {
+	$json_data =  json_encode([
+		['x' => 0, 'y' => 10],
+		['x' => 1, 'y' => 20],
+		['x' => 2, 'y' => 15],
+		['x' => 3, 'y' => 25],
+		['x' => 4, 'y' => 30],
+		['x' => 5, 'y' => 40],
+		['x' => 6, 'y' => 45],
+	]);
+
+    return '<svg class="lcp-visualizer" data-visualizer-data="' . esc_attr($json_data) . '"></svg>';
+
+}
+
+
+function lcp_visualizer_block_init() {
+	register_block_type( __DIR__ . '/build', array(
+    'render_callback' => 'render_lcp_visualizer_block',
+    ));
+
+}
+add_action( 'init', 'lcp_visualizer_block_init' );
+
+
+function enqueue_d3_js() {
+    // Define the path to the D3.js file
+    $d3_js_path = get_template_directory_uri() . '/includes/blocks/lcp-visualizer/assets/js/d3.v7.min.js';
+
+    // Enqueue the D3.js file
+    wp_enqueue_script('d3-js', $d3_js_path, array(), null, false);
+}
+add_action('wp_enqueue_scripts', 'enqueue_d3_js');