1

I have been building some custom Gutenberg blocks using ACF PRO. I have a block that I have created where I want to show the title of the page in that block, BUT only if it is the first block on the page. If that block also appears lower on the page I don't want it to show the title of the page.

I've tried this:

$post = get_post(); 

if ( has_blocks( $post->post_content ) ) {
    $blocks = parse_blocks( $post->post_content );

    if ( $blocks[0]['blockName'] === 'acf/custom-block' ) {
    }
}

Which is parsing through the blocks on the page and seeing if the first block in that array is my custom ACF block. The above snippet works, but not how I intended it to. Yes it is checking to see if the first block in the content is my ACF custom block, but that is checking the whole page, so even if I have my custom block as the first block on the page, but also have a second instance of my custom block lower on the page, this conditional would still show the page title on the lower block, because technically the first block is still my custom block.

What I need is a conditional statement where it checks if this block itself is the first block on the page and not if the first block on the page is an instance of my custom block.

Is this type of conditional possible with Gutenberg?

1
  • It's easier if you're creating the blocks using JavaScript, as you have more APIs to determine what's on the page. You may want to contact ACF directly to ask what type of logic is possible with their blocks.
    – WebElaine
    Sep 25 '19 at 14:01
1

Here's a solution I've come up with, that works with Wordpress 5.4 and ACF Pro 5.8.9.

First you need this function somewhere in functions.php:

/**
 * Get ID of the first ACF block on the page
 */
function sg_get_first_block_id() {
    $post = get_post(); 

    if(has_blocks($post->post_content)) {
        $blocks = parse_blocks($post->post_content);
        $first_block_attrs = $blocks[0]['attrs'];

        if(array_key_exists('id', $first_block_attrs)) {
            return $first_block_attrs['id'];
        }
    }
}

This function is used to get the block id of the first block on the page, if this block has a block id. (As far as I can see only ACF blocks have a block id attribute. Core blocks do not).

Now in your block template file you can do this:

<?php if($block['id'] === sg_get_first_block_id()): ?>
    <h1><?php the_title(); ?></h1>
<?php endif; ?>

$block['id'] is the unique id of every block instance. We then compare it with the id of the first block on the page. If they're the same, the function will return true, and the title of the post will be displayed.

How i use it

I have created a custom cover block with a full size background image and content inside. I wan't that block to act as a hero element if it's the very first block on a page.

By using the above method in my block template file, I can display the custom cover block title in a h1 tag instead of h2, if it's the first block on the page.

<?php if($block['id'] === sg_get_first_block_id()): ?>
    <h1><?php echo $title; ?></h1>
<?php else: ?>
    <h2><?php echo $title; ?></h2>
<?php endif; ?>

I also wan't to hide the ordinary title and breadcrumb, so that the cover block aligns perfectly to the navigation header. For that I have created this function in my functions.php file:

/**
 * Check first block type
 * @param string block_handle - handle of the block
 */
function sg_first_block_is($block_handle) {
    $post = get_post(); 

    if(has_blocks($post->post_content)) {
        $blocks = parse_blocks($post->post_content);

        if($blocks[0]['blockName'] === $block_handle) {
            return true;
        }else {
            return false;
        }
    }
}

I can use this as a conditional to check what block type the first block is, and then display or hide the breadcrumb and title accordingly:

if(!sg_first_block_is('acf/sg-cover')):
    get_template_part('template-parts/components/component', 'breadcrumbs'); 
    echo '<h1>' . get_the_title() . '</h1>';
endif;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.