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;
    • 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.

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

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

You must be logged in to reply to this topic.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.