Gutenberg: criando blocos com o Carbon Fields

E tem mais um vídeo no canal! \o/ Nesse eu explico como criar blocos complexos para o Gutenberg em menos de 10 minutos usando o Carbon Fields como framework.

Veja o código completo do plugin:

<?php
/**
 * Plugin Name: Filmes
 * Text Domain: filmes
 */

use Carbon_Fields\Block;
use Carbon_Fields\Field;

defined( 'ABSPATH' ) || exit;

function filmes_load() {
	require_once( 'vendor/autoload.php' );
	\Carbon_Fields\Carbon_Fields::boot();
}
add_action( 'after_setup_theme', 'filmes_load' );

function filmes_attach_theme_options() {
	Block::make( 'Filme' )
		->add_fields( array(
			Field::make( 'text', 'nome_filme', 'Nome do filme' ),
			Field::make( 'text', 'diretor', 'Diretor' ),
			Field::make( 'image', 'poster', 'Poster' ),
			Field::make( 'complex', 'elenco', 'Elenco' )
				->add_fields( array(
					Field::make( 'text', 'ator', 'Ator' ),
				) ),
		) )
		->set_render_callback( function ( $block ) {

			ob_start();
			?>

			<div class="block">
				<div class="block__heading">
					<h1><?php echo esc_html( $block['nome_filme'] ); ?></h1>
				</div><!-- /.block__heading -->

				<div class="block__image">
					<?php echo wp_get_attachment_image( $block['poster'], 'full' ); ?>
				</div><!-- /.block__image -->

				<div class="block__director">
					<h2><?php echo esc_html( $block['diretor'] ); ?></h2>
				</div><!-- /.block__heading -->

				<div class="block__cast">
					<ul>
						<?php
						foreach( $block['elenco'] as $ator ) {
							?>
							<li>
							<?php echo esc_html( $ator['ator'] ); ?>
							</li>
							<?php
						}
						?>
					</ul>
					<?php  ?>
				</div><!-- /.block__content -->
			</div><!-- /.block -->

			<?php

			return ob_get_flush();
		} );
}
add_action( 'carbon_fields_register_fields', 'filmes_attach_theme_options' );

Importante: não se esqueça de rodar o comando do composer para trazer os arquivos do Carbon Fields para o seu plugin:

composer require htmlburger/carbon-fields

Como expliquei no último post, a recomendação oficial para usar plugins assim é usá-los dentro do seu código e não como outro plugin. Por isso, a primeira coisa que fazemos é iniciar o Carbon Fields na action after_setup_theme. Depois usamos a action carbon_fields_register_fields para criar o bloco, com seus campos e sua função de renderização.

O Carbon Fields oferece mais métodos para configurar o seu bloco. É possível, por exemplo, configurar a descrição e o ícone. Veja mais nesta seção da documentação oficial do framework.

Não se esqueça de se inscrever no canal, curtir, compartilhar e comentar!