In the end, I’ve managed to do in this way
(function( plugins, editPost, element, components, data, compose ) {
const el = element.createElement;
const { Fragment } = element;
const { registerPlugin } = plugins;
const { PluginSidebar, PluginSidebarMoreMenuItem } = editPost;
const { PanelBody, ColorPicker } = components;
const { withSelect, withDispatch } = data;
const MetaThemeControl = compose.compose(
withDispatch( function( dispatch, props ) {
return {
setMetaValue: function( metaValue ) {
dispatch( 'core/editor' ).editPost(
{ meta: { [ props.metaKey ]: metaValue } }
);
}
}
} ),
withSelect( function( select, props ) {
return {
metaValue: select( 'core/editor' ).getEditedPostAttribute( 'meta' )[ props.metaKey ],
}
} ) )( function( props ) {
return el( ColorPicker, {
label: props.title,
value: props.metaValue,
onChangeComplete: function( content ) {
props.setMetaValue( content.hex );
},
});
}
);
registerPlugin( 'b-theme-sidebar', {
render: function() {
return el( Fragment, {},
el( PluginSidebarMoreMenuItem,
{
target: 'b-theme-sidebar',
icon: 'admin-appearance',
},
'B Theme'
),
el( PluginSidebar,
{
name: "b-theme-sidebar",
title: "B Theme",
icon: 'admin-appearance',
},
el( PanelBody, {},
// primary color
el( MetaThemeControl,
{
metaKey: 'primary_theme',
title : 'Primary Theme',
}
),
// secondary color
el( MetaThemeControl,
{
metaKey: 'secondary_theme',
title : 'Secondary Theme',
}
),
)
)
);
}
} );
} )(
window.wp.plugins,
window.wp.editPost,
window.wp.element,
window.wp.components,
window.wp.data,
window.wp.compose
);
But I would like to find a solution for my first attempt, cause is much more readable.
EDIT: a tutorial that would resolve the first case:
https://css-tricks.com/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/