A Quick Trick to Boost ACF Block Admin Clarity

While an effort for clarity is always made when naming blocks and organizing blocks in WordPress, sometimes it can still be more confusing than you’d like for clients to know what any given block option looks like or what block is used in what location on a project. That’s a big reason why a Gutenberg feature that many are looking forward to is Style Book, a location to preview each block available for use on a WordPress site. Style Book should offer a much more comprehensive view of the layouts available in any project’s block collection.

Beyond style, there are little touches that can be done in the admin to making it easier for clients to identify the blocks used on each page. Adding more prominent labels on custom ACF blocks within the editor is one such option. Instead of needing to click into a block to get its name, a client can quickly identify the blocks used on any given page from just scanning the page in the editor. The unintrusive label is simple and quick to execute.

This can be done on custom ACF blocks leveraging the $is_preview variable, which returns true when viewing the block in the backend editor. Within your block layout, you can add something like:

<?php if ($is_preview) : ?>
<div class="block-badge"><?php echo $block['title']; ?></div>
<?php endif; ?>

Then style the block-badge class however you’d like in a CSS file added to the editor. I typically use something like:

.block-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background-color: #000;
  padding: 5px 10px;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  font: 14px Arial, sans-serif;
  font-weight: 700;
}

If you don’t already have a CSS file you’re loading specifically for the editor, you can use the enqueue_block_editor_assets hook to set one up, similar to:

function wpfieldwork_editor_styles() {

   // change location/name of CSS as needed
   wp_enqueue_style(
    'wpfieldwork-block-editor-css',
    get_template_directory_uri() . '/css/editor.css',
    [ 'wp-edit-blocks' ],
    filemtime( get_stylesheet_directory() . '/css/editor.css' )  
  );
    
}

add_action( 'enqueue_block_editor_assets', 'wpfieldwork_editor_styles' );

That’s all there is to it!