Carbon field gutenberg block with media_gallery

Carbon Fields is a library for creating custom fields in WordPress. It can be used to create custom fields for the Gutenberg editor, including a media gallery field.

Here is an example of how to create a Carbon Field for a media gallery in a Gutenberg block:

1. First, you need to install and activate the Carbon Fields library on your WordPress website.
2. Next, you will need to create a new PHP file for your block and register it with WordPress. In this file, you will use the Carbon Fields library to create the media gallery field.

<?php
add_action( 'carbon_fields_register_fields', 'my_block_register_fields' );
function my_block_register_fields() {
    Container::make( 'block', 'my_block' )
        ->add_fields( array(
            Field::make( 'media_gallery', 'my_block_gallery' ),
        ) );
}

3. In the above code, we use the Carbon_Fields\Container class to create a new container for our block, and the Carbon_Fields\Field class to create the media gallery field. The my_block_gallery is the field’s name and will be used to retrieve the field’s value.
4. You will also need to create a JavaScript file for your block, and use it to render the block in the editor. In this file, you will use the my_block_gallery field to retrieve the images and display them in the block.

<div>
    <img src={attributes.my_block_gallery}/>
</div>

5. Finally, you need to register your block with WordPress, so it will be available in the editor.

registerBlockType( 'my-block-name/my-block', {
    title: 'My Block',
    icon: 'images-alt2',
    category: 'common',
    attributes: {
        my_block_gallery: {
            type: 'string',
        },
    },
    edit: MyBlockEdit,
    save: MyBlockSave,
} );

After all above steps, you should now have a custom Gutenberg block that allows users to select and upload multiple images using Carbon Fields media gallery field. You can then use the values of this field in the frontend of your website.