Adding a sidebar section to Gutenberg

awp-custom-postmeta-register.js

import { registerPlugin } from '@wordpress/plugins';

import AWP_Custom_Plugin from './awp-custom-postmeta-fields';

registerPlugin('my-custom-postmeta-plugin', {
	render() {
		return <AWP_Custom_Plugin />;
	},
});

aws-custom-postmeta-fields.js

import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';

import { PluginDocumentSettingPanel } from '@wordpress/edit-post';
import { IconButton, ColorPalette, PanelRow } from '@wordpress/components';

const AWP_Custom_Plugin = ({ postType, postMeta, setPostMeta }) => {
	if ('product' !== postType) return null; // Will only render component for post type 'post'

	// const [color, setColor] = useState();

	return (
		<PluginDocumentSettingPanel
			title={__('Colours', 'pulsar')}
			icon="false"
			initialOpen="true"
		>
			<PanelRow>
				<ColorPalette
					colors={[
						{ name: 'red', color: '#f00' },
						{ name: 'white', color: '#fff' },
						{ name: 'blue', color: '#00f' },
					]}
					disableCustomColors={false}
					// value={'#f00'}
				/>
			</PanelRow>
			<PanelRow>
				<IconButton
					isPrimary
					icon={
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="24"
							height="24"
							viewBox="0 0 24 24"
						>
							<path d="M12.537 2.592l-5.445 3.779c-1.504 1.043-1.877 3.108-.833 4.611l5.668 8.168c1.287 1.855 3.352 2.85 5.451 2.85 3.605 0 6.622-2.919 6.622-6.634 0-1.304-.384-2.621-1.182-3.773l-5.668-8.168c-.644-.927-1.676-1.425-2.726-1.425-.652 0-1.311.192-1.887.592zm.945 1.361c.751-.521 1.784-.334 2.307.416l1.415 2.042-3.912 2.693-2.36-3.403 2.55-1.748zm6.725 15.503c-2.252 1.563-5.356 1.002-6.919-1.25l-3.306-4.764 8.167-5.668 3.308 4.764c1.562 2.252 1.001 5.355-1.25 6.918zm-16.031-11.567l-2.499-1.74.62-.891 2.271 1.582c-.169.332-.3.681-.392 1.049zm.702 4.006l-2.299 1.615-.624-.888 2.414-1.699c.135.338.299.665.509.972zm-.778-1.906h-3.1v-1.085h3.029c-.013.366.005.729.071 1.085z" />
						</svg>
					}
				>
					IconButton
				</IconButton>
			</PanelRow>
		</PluginDocumentSettingPanel>
	);
};

export default compose([
	withSelect((select) => {
		return {
			postMeta: select('core/editor').getEditedPostAttribute('meta'),
			postType: select('core/editor').getCurrentPostType(),
		};
	}),
	withDispatch((dispatch) => {
		return {
			setPostMeta(newMeta) {
				dispatch('core/editor').editPost({ meta: newMeta });
			},
		};
	}),
])(AWP_Custom_Plugin);

Product.php

<?php
/**
 * Product post type
 *
 * @package Pulsar
 */

namespace Pulsar\PostTypes;

use Pulsar\Contracts\Bootable;

/**
 * Product post type.
 */
class Product implements Bootable {

	/**
	 * @var string The post type name
	 */
	protected $name = 'product';

	/**
	 * Bootstraps the class' actions/filters.
	 *
	 * @access public
	 * @return void
	 */
	public function boot() {
		add_action( 'init', [ $this, 'register' ] );
		add_action( 'init', [ $this, 'register_post_meta' ] );
	}

	/**
	 * Register product post type.
	 *
	 * @return void
	 */
	public function register() {
		register_extended_post_type(
			$this->name,
			[
				'show_in_rest' => true,
				'menu_icon'    => 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDEyLjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgNTE0NDgpICAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNDgzLjIyMjY1NjMiIGhlaWdodD0iNTUxLjQzMDY2NDEiIHZpZXdCb3g9IjAgMCA0ODMuMjIyNjU2MyA1NTEuNDMwNjY0MSIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4My4yMjI2NTYzIDU1MS40MzA2NjQxIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNjEuOTg4MjgxMyw5OC4xMjQwMjM0ICBjMjQuOTYyODkwNi0yLjMwNDY4NzUsNDQuMzU3NDIxOS0yMy44MTEwMzUyLDQ0LjM1NzQyMTktNDguOTY1ODIwM0MyMDYuMzQ1NzAzMSwyMi4wODMwMDc4LDE4NC4yNjI2OTUzLDAsMTU3LjE4NzUsMCAgcy00OS4xNTcyMjY2LDIyLjA4MzAwNzgtNDkuMTU3MjI2Niw0OS4xNTgyMDMxYzAsOC4yNTY4MzU5LDIuMzAzNzEwOSwxNi43MDU1NjY0LDYuMTQ0NTMxMywyMy44MTA1NDY5bDE3LjUxNTYyNSwyNDYuNDY2Nzk2OSAgbDE4MC4zOTY0ODQ0LDAuMDQ4ODI4MWw3My45OTEyMTA5LDE3My4zNjUyMzQ0bDk3LjE0NDUzMTMtMzguMDk3NjU2M2wtMTUuMDQyOTY4OC0zNS44MjAzMTI1bC01NC4zNjYyMTA5LDE5LjYyNSAgbC03MS41OTA4MjAzLTE2NS4yODAyNzM0bC0xNjcuNzI5NDkyMiwxLjEyNjk1MzFsLTIuMzAyNzM0NC0zMS4yMTI4OTA2bDEyMS40MjI4NTE2LDAuMDQ4MzM5OHYtNDYuMTgzMTA1NWwtMTI2LjA1NDY4NzUtMC4wNDkzMTY0ICBMMTYxLjk4ODI4MTMsOTguMTI0MDIzNHoiLz4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwMDAwMDAiIGQ9Ik0zNDMuNDE5OTIxOSw0NTEuNTkwODIwMyAgYy0zMC40NDcyNjU2LDYwLjE4NzUtOTQuMTc0ODA0Nyw5OS44Mzk4NDM4LTE2Mi4xNTAzOTA2LDk5LjgzOTg0MzhDODEuNDI5Njg3NSw1NTEuNDMwNjY0MSwwLDQ3MC4wMDA5NzY2LDAsMzcwLjE2MTEzMjggIGMwLTcwLjEwMDU4NTksNDIuNDg1MzUxNi0xMzUuMjQzNjUyMywxMDUuODgxODM1OS0xNjQuMTIxMDkzOGw0LjEwMjUzOTEsNTMuNTM3NTk3NyAgYy0zNy40OTcwNzAzLDIzLjYyODQxOC02MC42MTIzMDQ3LDY2LjI2MjIwNy02MC42MTIzMDQ3LDExMC45NTA2ODM2YzAsNzIuNDI2NzU3OCw1OS4wNzEyODkxLDEzMS40OTcwNzAzLDEzMS40OTcwNzAzLDEzMS40OTcwNzAzICBjNjYuMjYxNzE4OCwwLDEyMi43NjQ2NDg0LTUwLjg1MTU2MjUsMTMwLjQ2OTcyNjYtMTE2LjA4NjkxNDFMMzQzLjQxOTkyMTksNDUxLjU5MDgyMDN6Ii8+Cjwvc3ZnPg==',
				'menu_position' => 20,
				'has_archive' => false,
				'supports' => [
					'title',
					'editor',
					'thumbnail',
					'excerpt',
					'custom-fields',
				],
				'admin_cols' => [
					'category' => [
						'taxonomy' => "{$this->name}_category",
					],
				],
				'admin_filters' => [
					'category' => [
						'taxonomy' => "{$this->name}_category",
					],
				],
			],
			[
				'singular' => 'Product',
				'plural'   => 'Products',
				'slug'     => 'products',
			]
		);
	}

	public function register_post_meta() {
		register_post_meta(
			'product',
			'colours',
			[
				'show_in_rest' => [
					'schema' => [
						'type'  => 'array',
						'items' => [
							'type' => 'string',
						],
					],
				],
				'single' => true,
				'type' => 'array',
				'auth_callback' => function () {
					return current_user_can( 'edit_posts' );
				},
			]
		);
	}
}