In WordPress, a block is a self-contained unit of content that can be used to build pages and posts. It can contain a variety of content types, such as text, images, videos, and more. Blocks were introduced in WordPress 5.0 as a part of the new Gutenberg editor, which replaced the classic editor.
Each block is designed to provide a specific functionality and has its own settings and options. Blocks can be easily added, removed, and rearranged to create custom layouts for your content. This allows users to create more dynamic and visually engaging content without having to know HTML or CSS.
Then we have a custom block which is a block created by the developer using the WordPress Block Editor API or a plugin.
A custom block can be used to add unique functionality or content to a WordPress page or post beyond what is available in the default set of blocks.
There is many ways to create custom block include the native WordPressy way, but today we will focus on ACF way.
Here the steps of creating a custom block in WordPress using advanced custom fields plugin:
Step 1: Create a new custom field group in ACF and add the fields that you want to use for your custom block.
Step 2:
- Create a new PHP file in your theme or plugin and register your custom block using the
acf_register_block()function.
<?php
function myplugin_register_blocks() {
// Register the custom block
acf_register_block(array(
'name' => 'myplugin-custom-block',
'title' => __('MyPlugin Custom Block'),
'description' => __('A custom block using Advanced Custom Fields.'),
'render_template' => 'myplugin-custom-block.php',
'category' => 'common',
'icon' => 'admin-customizer',
'keywords' => array( 'custom', 'block', 'acf' ),
'supports' => array(
'align' => array( 'wide', 'full' ),
),
'mode' => 'edit',
'enqueue_assets' => function() {
// Enqueue any additional scripts or stylesheets that your block needs
wp_enqueue_style( 'myplugin-custom-block-style', get_stylesheet_directory_uri() . '/myplugin-custom-block.css' );
},
'fields' => array(
array(
'name' => 'title',
'label' => __('Title'),
'type' => 'text',
),
array(
'name' => 'content',
'label' => __('Content'),
'type' => 'wysiwyg',
),
array(
'name' => 'image',
'label' => __('Image'),
'type' => 'image',
),
),
));
}
add_action('acf/init', 'myplugin_register_blocks');
Step 3: Create a new PHP file in your theme or plugin and register your custom block using the acf_register_block() function.
<?php
/**
* MyPlugin Custom Block
*
* This is the template for the output of the MyPlugin Custom Block.
*/
$title = get_field('title');
$content = get_field('content');
$image = get_field('image');
?>
<div class="myplugin-custom-block">
<?php if ( $title ) : ?>
<h2 class="myplugin-custom-block__title"><?php echo esc_html( $title ); ?></h2>
<?php endif; ?>
<?php if ( $image ) : ?>
<img class="myplugin-custom-block__image" src="<?php echo esc_url( $image['url'] ); ?>" alt="<?php echo esc_attr( $image['alt'] ); ?>" />
<?php endif; ?>
<?php if ( $content ) : ?>
<div class="myplugin-custom-block__content"><?php echo wp_kses_post( $content ); ?></div>
<?php endif; ?>
</div>
Step 4: You can now use the custom block in the WordPress editor by adding a new block and selecting the “MyPlugin Custom Block” option from the “Custom” category. The fields that you defined in ACF will be available to edit in the block settings panel. When you publish or update the post, the values of the ACF fields will be saved and used to output the content of the block.