I have a Custom Post Type defined with custom-fields support. I then registered a meta field.

The first issue is that select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles always returns undefined on first call (before being updated by dispatch( 'core/editor' ).editPost). Also, when I save the Custom post Type the value isn't modified in the database.

The other issue is, when check any of the checkboxes, on first click, isChecked() is properly called, on next clicks it doesn't happen, but updateMeta() is triggered. If I fold/unfold the control or uncheck a checkbox, all the checkboxes do get updated by calling isChecked():

Here is my code:

class Metaboxes extends Base {

    /**
     * Setup user.
     */
    public function setup() {
        add_action('init', [$this, 'init'] );
    }

    public function init () {
        register_post_meta(
            'vaenc_actu',
            '_vaenc_actu_roles_scope_roles',
            [
                'show_in_rest' => true,
                'single'       => true,
                'type'         => 'array',
                'default'       => [],
                'auth_callback' => function() {
                    return current_user_can( 'edit_posts' );
                }
            ]
        );
    }
}

My javascript is like so:

const {registerPlugin}                              = wp.plugins;
const {PluginDocumentSettingPanel}                  = wp.editPost;
const {PanelBody, CheckboxControl}                  = wpponents;
const {useSelect, select, withSelect, withDispatch} = wp.data;
const {Fragment, useState}                          = wp.element;
const {__}                                          = wp.i18n;
const {compose}                                     = wppose;

const RolesControl = ( {isChecked, updateMeta} ) => {
    return (
        <>
            <Fragment intialOpen={true}>
                <CheckboxControl
                    label={__( "PRI", "vae" )}
                    checked={isChecked( 'vae-pri' )}
                    onChange={( value ) => updateMeta( 'vae-pri', value )}
                />
                <CheckboxControl
                    label={__( "PRC", "vae" )}
                    checked={isChecked( 'vae-prc' )}
                    onChange={( value ) => updateMeta( 'vae-prc', value )}
                />
                <CheckboxControl
                    label={__( "Certificateurs", "vae" )}
                    checked={isChecked( 'vae-certif' )}
                    onChange={( value ) => updateMeta( 'vae-certif', value )}
                />
            </Fragment>
        </>
    )
}

const RolesField = compose( [
    withSelect( () => {
        return {
            actu_scope_meta: select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles,
        };
    } ),
    withDispatch( ( dispatch ) => ({
        isChecked ( prop ) {
            let meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles;
            if ( meta ) {
                return meta.includes( prop );
            }
            return false
        },
        updateMeta ( prop, value ) {
            let meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' )._vaenc_actu_roles_scope_roles;
            if ( !meta ) meta = []

            if ( meta.includes( prop ) && !value ) {
                meta = meta.filter( arrayItem => arrayItem !== prop );
            } else if ( !meta.includes( prop ) ) {
                meta.push( prop );
            }

            dispatch( 'core/editor' ).editPost( {meta: {_vaenc_actu_roles_scope_roles: meta}} );
        },
    }) ),
] )( RolesControl );

const Render = () => {
    const postType = useSelect( select => select( 'core/editor' ).getCurrentPostType() );
    if ( 'vaenc_actu' !== postType ) {
        return null;
    }

    return (
        <>
            <PluginDocumentSettingPanel
                name="vae-role-scope-sidebar"
                title={__( 'Restrictions', 'vae' )}
            >
                <RolesField/>
            </PluginDocumentSettingPanel>
        </>
    )
}

registerPlugin( 'vae-role-scope-sidebar', {
    render: Render
} )