Code Block Pro plugin - Sidebar panels

code-block-pro-plugin.js

import { registerPlugin } from '@wordpress/plugins';
import {
	PanelBody,
	BaseControl,
	createSlotFill,
	Button,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

// CodeBlockPro.Sidebar.Start
// CodeBlockPro.Sidebar.Middle
// CodeBlockPro.Sidebar.End
const { Fill } = createSlotFill('CodeBlockPro.Sidebar.Start');
registerPlugin('my-namespace-cbp-plugin', {
	render: () => (
		<Fill>
			{({
				// Get code already processed
				getCode,
				// Set code with formatting taken care of
				setCode,
				// Set any attributes you want (be careful setting the code)
				setAttributes,
				// List of all the available languages
				languages,
				// More or less the state of the block
				attributes,
			}) => (
				<PanelBody
					initialOpen={false}
					title={__('Custom Panel', 'my-namespace')}>
					<div className="code-block-pro-editor">
						<BaseControl id="my-namespace-something-cool">
							<Button
								variant="primary"
								onClick={() => {
									const currentCode = getCode();
									const code = [
										'() => console.log("Hello World")',
										'useEffect(() => {\n\tconsole.log("React is cool")\n}, [])',
										'const [state, setState] = useState(false)',
									]
										.filter((c) => c !== currentCode)
										.sort(() => Math.random() - 0.5);
									console.log(code);
									setCode(code[0]);
									setAttributes({
										language: 'javascript',
									});
								}}>
								{__('Set Random Code', 'my-namespace')}
							</Button>
						</BaseControl>
					</div>
				</PanelBody>
			)}
		</Fill>
	),
});

GitHub: https://github.com/KevinBatdorf/code-block-pro
WordPress: https://wordpress.org/plugins/code-block-pro
Website: https://code-block-pro.com

To load this, you can have a plugin something like:

// cbp-plugin-example.php
<?php
/**
 * Plugin Name:       Cbp Plugin Example
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * 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:       cbp-plugin-example
 *
 */

 defined('ABSPATH') or die;

 add_action('enqueue_block_editor_assets', function () {
	$deps = require plugin_dir_path(__FILE__) . "build/index.asset.php";
	wp_enqueue_script(
		'my-namespace/my-plugin',
		plugins_url('build/index.js', __FILE__),
		$deps['dependencies'],
		$deps['version'],
		true
	);
	// If you have css
	// wp_enqueue_style(
	// 	"my-namespace/my-plugin",
	// 	plugins_url('build/index.css', __FILE__),
	// 	[],
	// 	$deps['version']
	// );
 });

 add_action('init', function () {
	wp_set_script_translations("my-namespace/my-plugin", 'cbp-plugin-example');
 });

and build it with something like this (taken from @wordpress/create-block)

{
	"name": "cbp-plugin-example",
	"version": "0.1.0",
	"description": "Example block scaffolded with Create Block tool.",
	"author": "The WordPress Contributors",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	},
	"devDependencies": {
		"@wordpress/scripts": "^26.15.0"
	}
}

And put the index.js file at the top of the page in /src/index.js