Home Forums Front-end Issues Custom block working in back-end, but not in front-end


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

  • 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": [
            "_gallery": "field_5d6ba3deed10f"
        "align": "",
        "mode": "auto"
    } /


    function be_register_blocks() {
    	if( ! function_exists( 'acf_register_block_type' ) )
    	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):

     * 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>
        <?php if( $gallery ): ?>
            <?php foreach( $gallery as $image ): ?>
                	<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
            <?php endforeach; ?>
    <?php endif; ?>
        <div class="fade"></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;
  • We’re having this exact same problem, did you ever find a solution to this?

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

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

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

    if (have_posts()):
      while (have_posts()) : the_post();
  • 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.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Custom block working in back-end, but not in front-end’ is closed to new replies.