Support

Account

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

Unread

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": [
                "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>
Viewing 1 post (of 1 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.