Create a placeholder to use as an empty state for your Gutenberg ACF Blocks.

The placeholder looks stunning, is easy to customize and gives your ACF Gutenberg blocks a professional feel

The placeholder shows in the content area if there are no field values to display, and it looks absolutely gorgeous! So gorgeous in fact, that a page full of empty states is a sight to behold.

The placeholder adds a real polish to the editing experience and it fits right in with Gutenberg.

Here’s how you can get a placeholder set up:

// vars
$text = get_field('acfc_test_txt');

/**
 * if previewing on the post edit screen and $text is false (no text)
 * then display the placeholder.
 */
if ( $is_preview && ! $text ) :

    echo '<div class="acfc-settings-intro-wrap">';

        echo '<div class="acfc-settings-intro">';

            echo '<header>';

                echo '<h2><span>' . esc_html__('ACF Companion', 'acf-c') . '<span class="screen-reader-text">: </span></span>' . esc_html__('Test', 'acf-c') . '</h2>';

            echo '</header>';

            /**
             * Blurb about the block, the second sentence (starting "%s Click %s")
             * is used for all the blocks as it briefly explains to the user
             * how to edit the block.
             */
            echo sprintf( __( '%s Showcasing the slicker and more user-friendly experience offered by ACF Companion. %s Click %s the pencil button %s or %s the settings button %s to edit.</span></p>', 'campaign-pro' ), '<p>', '<span class="acfc-settings-intro__instructions">', '<span class="dashicons dashicons-edit"><span class="screen-reader-text">', '</span></span>', '<span class="dashicons dashicons-admin-generic"><span class="screen-reader-text">', '</span></span>' );

        echo '</div>';

    echo '</div>';

// Otherwise display the block
else :

// Your block html/php goes here

endif;

This goes in the template for your ACF Gutenberg block. The if ( $is_preview && ! $text ) : statement is used to determine if we’re previewing the block and if the variable $text is false. In your code the $text variable will be whatever ACF field/s you want to check for content.

Need a Hand?
If you’ve purchased ACF Companion you get free support – get in touch if you need a hand implementing the placeholder.