Custom block working in back-end, but not in front-end

• nielshak

• September 2, 2019 at 3:56 am

I created and registered a custom ACF block for use in the Gutenberg editor. Everything works like it should in the back-end/wp-admin, but as soon as I publish the page with the custom block, the page refuses to display the block and the code for the block is hidden in de code in between <!– / –>, in a weird an raw unprocessed way.
I’ve tried every tutorial and they all result in the same problem.
What am I missing here?

I’m on WP 5.2.2 and ACF Pro 5.8.3.

How the block outputs in the front-end (this is in between <!– and –>:

 wp:acf/gallery-item {
    "id": "block_5d6bad4db1949",
    "name": "acf\/gallery-item",
    "data": {
        "title": "Anna's performance",
        "_title": "field_5d6ba3a1ed10c",
        "description": "A gallery of Anna's latest performance, where she performed a prominent roll in a very artsy performance of that one opera.",
        "_description": "field_5d6ba3aded10d",
        "cover": 34,
        "_cover": "field_5d6ba3bced10e",
        "gallery": [
            "85",
            "81",
            "80"
        ],
        "_gallery": "field_5d6ba3deed10f"
    },
    "align": "",
    "mode": "auto"
} /

functions.php:

function be_register_blocks() {
	
	if( ! function_exists( 'acf_register_block_type' ) )
		return;
	acf_register_block_type( array(
		'name'			=> 'gallery-item',
		'title'			=> __( 'Gallery Item' ),
		'render_template'	=> 'blocks/gallery.php',
		'category'		=> 'formatting',
		'icon'			=> 'format-image',
		'mode'			=> 'auto',
		'keywords'		=> array( 'profile', 'user', 'author' )
	));
}
add_action('acf/init', 'be_register_blocks' );

gallery.php (the custom block):

<?php
/**
 * Block Name: Gallery Item
 *
 * 
 */

// get image field (array)
$title = get_field('title');
$description = get_field('description');
$cover = get_field('cover');
$gallery = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full or custom size)

// create id attribute for specific styling
$id = 'gallery-' . $block['id'];

// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';

?>

<div id="<?php echo $id; ?>" class="gallery <?php echo $align_class; ?>">
    <div class="gallerycontent">
        <h2><?php echo $title; ?></h2>
        <p><?php echo $description; ?><br><a href="">Open gallery</a></p>
    </div>
    <?php if( $gallery ): ?>
    <!--<ul>
        <?php foreach( $gallery as $image ): ?>
            <li>
            	<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            </li>
        <?php endforeach; ?>
    </ul>-->
<?php endif; ?>
    <div class="fade"></div>
        </div>

<style type="text/css">
	#<?php echo $id; ?> {
		background-image: url('<?php echo $cover; ?>');
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 300px;
        background-color: #020024;
	}
    
    .fade {
        height: 100%;
        width: 100%;
        z-index: 1;
        background: rgb(2,0,36);
        background: linear-gradient(337deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0) 100%); 
    }
    
    .gallerycontent {
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 33%;
        min-width: 450px;
        padding: 15px;
    }
    
    h2, p {
        color: #fff0ff;
        text-align: right;
        margin-bottom: 0;
        font-family: 'Raleway', sans-serif;
    }
    
    ul {
        list-style: none;
    }

</style>

• rootid

• February 15, 2020 at 6:39 am

We’re having this exact same problem, did you ever find a solution to this?

• rootid

• February 15, 2020 at 7:18 am

Turns out we were directly outputting post_content, which avoided processing the blocks properly.

• nsbrown

• May 21, 2020 at 5:52 pm

It would be helpful if you shared what you were referring to “directly outputting post_content”

• Andrew Cepukas

• June 11, 2020 at 4:53 am

You need to use the_content() to process custom blocks added through ACF. Make sure it’s inside of the loop. Example:

<?php
if (have_posts()):
  while (have_posts()) : the_post();
    the_content();
  endwhile;
else:
endif;
?>

• Nugerama

• April 14, 2021 at 5:05 am

Thanks, @rootid – this turned out to totally be my problem too. I was echoing the content straight from the $post object like $post->post_content. What fixed it was switching to echo apply_filters( 'the_content', $post->post_content );.

The slightly misleading thing I found was that other blocks were appearing in post_content, just not my ACF custom blocks – I guess because of the order in which they are added – this hindered my diagnosis of the issue though, which I had assumed was a problem with my render_template path as the blocks were appearing correctly in the block editor.