Added basics of LCPLegend and more controls for blocks. Added boilerplate for lcp/line-graph

This commit is contained in:
Jeremy Rangel
2025-01-22 02:34:10 -08:00
parent dd4bd0caf5
commit 23944b0052
29 changed files with 24323 additions and 126 deletions

View File

@ -15,8 +15,7 @@ function lcp_visualize_register_blocks() {
return;
}
$asset_file = include(plugin_dir_path(__FILE__) . 'blocks/bar-graph/build/index.asset.php');
// Register AG Grid styles
wp_register_style(
'ag-grid',
'https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css',
@ -31,32 +30,29 @@ function lcp_visualize_register_blocks() {
'27.1.0'
);
wp_register_style(
'lcp-bar-graph-editor',
plugins_url('blocks/bar-graph/build/index.css', __FILE__),
[],
$asset_file['version']
// Register Bar Graph block
register_block_type_from_metadata(
__DIR__ . '/blocks/bar-graph/build',
array(
'editor_style' => ['ag-grid', 'ag-grid-theme'],
'render_callback' => 'render_block_lcp_bar_graph'
)
);
wp_register_script(
'lcp-bar-graph',
plugins_url('blocks/bar-graph/build/index.js', __FILE__),
$asset_file['dependencies'],
$asset_file['version']
// Register Line Graph block
register_block_type_from_metadata(
__DIR__ . '/blocks/line-graph/build',
array(
'editor_style' => ['ag-grid', 'ag-grid-theme'],
'render_callback' => 'render_block_lcp_line_graph'
)
);
register_block_type('lcp/bar-graph', array(
'editor_script' => 'lcp-bar-graph',
'editor_style' => ['ag-grid', 'ag-grid-theme', 'lcp-bar-graph-editor'],
'render_callback' => 'render_block_lcp_bar_graph'
));
}
add_action('init', 'lcp_visualize_register_blocks');
function render_block_lcp_bar_graph($attributes) {
wp_enqueue_style('ag-grid');
wp_enqueue_style('ag-grid-theme');
wp_enqueue_style('lcp-bar-graph-editor');
$wrapper_attributes = get_block_wrapper_attributes([
'class' => 'wp-block-lcp-bar-graph'
@ -73,3 +69,23 @@ function render_block_lcp_bar_graph($attributes) {
<?php
return ob_get_clean();
}
function render_block_lcp_line_graph($attributes) {
wp_enqueue_style('ag-grid');
wp_enqueue_style('ag-grid-theme');
$wrapper_attributes = get_block_wrapper_attributes([
'class' => 'wp-block-lcp-line-graph'
]);
$chart_data = $attributes['chartData'] ?? [];
$chart_data_json = wp_json_encode($chart_data);
ob_start();
?>
<div <?php echo $wrapper_attributes; ?>>
<div class="lcp-line-graph-container" data-chart='<?php echo esc_attr($chart_data_json); ?>'></div>
</div>
<?php
return ob_get_clean();
}