Reply To: Display acf block title in Gutenberg editor

• 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’ );
?>

.