Display acf block title in Gutenberg editor

• [email protected]

• October 4, 2024 at 11:36 am

Hi,

I wonder is there a way to display the ACF block name and icon in the Gutenberg editor?

We are using ACF blocks, but each block only shows its name on the right WP sidebar which is very easy to miss for end users.

Can we do something like this in the image? Right now I’m just using another message field to add a title and icon to its block manually.

Thank you!

Screenshot-2....png

• Justinas ACF

• July 16, 2026 at 4:01 am

If anyone still needs such solution, here it is. Assuming you register your custom ACF blocks like this ‘your/section-hero’ then this code in functions.php would add small label with block title for each block in Gutenberg editor:

<?php
/**
* Show block names while editing in Gutenberg
*/
function your_editor_block_labels_assets() {
if ( ! is_admin() ) {
return;
}

$css = ‘
.editor-styles-wrapper .block-editor-block-list__block[data-type^=”your/”] {
position: relative;
padding-top: 24px;
}

.editor-styles-wrapper .block-editor-block-list__block[data-type^=”your/”]::before {
content: attr(data-type);
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: inline-block;
padding: 4px 8px;
border: 1px solid #d8dde3;
border-radius: 4px;
background: #f0f2f5;
color: #1d2327;
font: 600 11px/1.2 sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
pointer-events: none;
}
‘;

$registered_blocks = WP_Block_Type_Registry::get_instance()->get_all_registered();

foreach ( $registered_blocks as $block_name => $block_type ) {
if ( strpos( $block_name, ‘your/’ ) !== 0 ) {
continue;
}

$title = ! empty( $block_type->title ) ? $block_type->title : $block_name;

$safe_block_name = str_replace( array( ‘\\’, ‘”‘ ), array( ‘\\\\’, ‘\\”‘ ), (string) $block_name );
$safe_title = wp_strip_all_tags( (string) $title );
$safe_title = str_replace( array( ‘\\’, ‘”‘, “\n”, “\r” ), array( ‘\\\\’, ‘\\”‘, ‘ ‘, ” ), $safe_title );

$css .= sprintf(
‘.editor-styles-wrapper .block-editor-block-list__block[data-type=”%1$s”]::before { content: “%2$s”; }’,
$safe_block_name,
$safe_title
);
}

wp_register_style( ‘your-editor-block-labels’, false, array(), null );
wp_enqueue_style( ‘your-editor-block-labels’ );
wp_add_inline_style( ‘your-editor-block-labels’, $css );
}
add_action( ‘enqueue_block_assets’, ‘your_editor_block_labels_assets’ );
?>

.