In the ever-evolving landscape of web development, the integration of dynamic content within custom Gutenberg blocks has become a cornerstone for creating rich, interactive user experiences.

One of the most powerful tools for achieving this is the Carbon Fields plugin, which offers a robust framework for managing custom fields in WordPress.

This article will guide you through the process of outputting Carbon Fields Media Gallery items inside a custom Gutenberg block, enabling you to harness the full potential of this versatile plugin.

Whether you are a seasoned developer or a novice looking to expand your skill set, this tutorial will provide you with the necessary steps and best practices to seamlessly incorporate media galleries into your custom blocks.

Add Carbon Fields support into WordPress Custom Theme

We need support for Container, Field, Block. Add this code to your function.php :

use Carbon_Fields\Container;
use Carbon_Fields\Block;
use Carbon_Fields\Field;

In my case I will be use Carbon Fields inside theme.

Beforehand, I created an inc folder inside my custom theme folder and pasted the unzipped Carbon Fields files into inc.

You should check that you add PHP file for custom Gutenberg Block support in your function.php :

/**
* Custom gutenberg blocks
**/

//Carbon Fields theme support
include_once get_template_directory_uri() . '/INC/carbon-fields/carbon-fields-plugin.php';
include_once get_template_directory_uri() . '/INC/metaboxes.php';

//Custom Gutenberg Blocks
include_once get_template_directory_uri() . '/INC/BLOCKS/CUSTOM-BLOCK-STACK/custom-block-stack.php';
include_once get_template_directory_uri() . '/INC/BLOCKS/CUSTOM-BLOCK-[other block name]/custom-block-[other block name].php';// add other blocks one per line

Carbon Fields Custom Gutenberg Block creating

We should create file for Carbon Fields backend

We should create inside INC folder for custom Gutenberg Blocks named BLOCKS

Inside BLOCKS we will create folder named CUSTOM-BLOCK-STACK

Inside folder CUSTOM-BLOCK-STACK we should create folowing files:

custom-block-stack.php

custom-block-stack.css

custom-block-stack-editor.css

I have the following structure into INC

CUSTOM-THEME
-INC
--CARBON-FIELDS
--metaboxes.php
--BLOCKS
---CUSTOM-BLOCK-STACK
----custom-block-stack.php
----custom-block-stack.css
----custom-block-stack-editor.css
---CUSTOM-BLOCK-OTHER
----custom-block-other.php
----custom-block-other.css
----custom-block-other-editor.css
---CUSTOM-BLOCK-...
----custom-block-....php
----custom-block-....css
----custom-block-...-editor.css

Create code for custom-block-stack.php

<?php


// Register the block using Carbon Fields
add_action( 'carbon_fields_register_fields', 'frontpage_stack' );

function frontpage_stack() {


    wp_register_style( 'frontpage-stack-style', get_stylesheet_directory_uri() . '/inc/blocks/custom-block-stack/custom-block-stack.css' );
    wp_register_style( 'editor-style', get_stylesheet_directory_uri() . '/inc/blocks/custom-block-stack/custom-block-stack-editor.css' );

    \Carbon_Fields\Block::make( 'frontpage_stack', __('Frontpage:Stack') )
    ->add_fields( array(

        //Add Galery items
        \Carbon_Fields\Field::make( 'media_gallery', 'frontend_stack_item_images', __( 'Stack logos' ) ),

    ) )

    ->set_editor_style( 'custom-block-stack' )
    ->set_style( 'custom-block-stack-editor' )

    ->set_render_callback( 

        function ( $fields, $attributes, $inner_blocks ) {
            
            echo '<section class="home-stack">';
                echo '<div class="home-stack-inner">';

                            $frontend_stack_images = $fields['frontend_stack_item_images'];
                            if ( !empty( $frontend_stack_images ) ) :
                                    echo '<div class="home-stack-tab-content-images">';
                                        foreach ( $frontend_stack_images as $image_id ) :
                                            echo '<div class="home-stack-tab-content-image">'. wp_get_attachment_image( $image_id ) .'</div>';
                                        endforeach;
                                    echo '</div>';
                            endif;

                echo '</div>';
            echo '</section>';

        }
    );



}