Restricted-InnerBlocks example: content doesn\'t display

• cupcakelike

• August 1, 2020 at 8:17 am

Hey guys.
I wanted to understand the new beta features, the innerblocks. So I copied the Code from here:

https://www.advancedcustomfields.com/blog/acf-5-9-exciting-new-features/

but nothing is working.

function.php
require get_template_directory() . ‘/enqueue/enqueue_blocks.php’;

enqueue_blocks.php

<?php

/*Test*/
add_action('acf/init', 'my_acf_blocks_init');
function my_acf_blocks_init() {

    // Check function exists.
    if( function_exists('acf_register_block_type') ) {

        // Register a restricted block.
        acf_register_block_type(array(
            'name'				=> 'restricted',
            'title'				=> 'Restricted',
            'description'		=> 'A restricted content block.',
            'category'			=> 'formatting',
            'mode'				=> 'preview',
            'supports'			=> array(
                '__experimental_jsx' => true
            ),
            'render_template' => get_template_directory_uri() . '/template-parts/blocks/restricted/restricted.php',
            'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/restricted/restricted.css'
        ));
    }
}

restricted.php

<?php
/**
 * Restricted Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create class attribute allowing for custom "className" and "align" values.
$classes = '';
if( !empty($block['className']) ) {
    $classes .= sprintf( ' %s', $block['className'] );
}
if( !empty($block['align']) ) {
    $classes .= sprintf( ' align%s', $block['align'] );
}

// Load custom field values.
$start_date = get_field('start_date');
$end_date = get_field('end_date');

// Restrict block output (front-end only).
if( !$is_preview ) {
    $now = time();
    if( $start_date && strtotime($start_date) > $now ) {
        echo sprintf( 'Content restricted until %s. Please check back later.
', $start_date );
        return;
    }
    if( $end_date && strtotime($end_date) < $now ) {
        echo sprintf( 'Content expired on %s.
', $end_date );
        return;
    }
}

// Define notification message shown when editing.
if( $start_date && $end_date ) {
    $notification = sprintf( 'Content visible from %s until %s.', $start_date, $end_date );
} elseif( $start_date ) {
    $notification = sprintf( 'Content visible from %s.', $start_date );
} elseif( $end_date ) {
    $notification = sprintf( 'Content visible until %s.', $end_date );
} else {
    $notification = 'Content unrestricted.';
}
?>
<?php echo var_dump($start_date);?>

<div class="restricted-block <?php echo esc_attr($classes); ?>">
    Test

    <span class="restricted-block-notification"><?php echo esc_html( $notification ); ?></span>
    <InnerBlocks  />
</div>

restricted.css

.restricted-block{
    padding: 15px;
    background-color: #0c5460;
    border: 12px solid #20c997;
}

.restricted-block-notification
{
    background-color: #43494e;
    padding: 5px;
    float: left;
    color: white;
}

I checked the Path – as I saw, the restricted.css file is loading. (network analysis, 304) Also the Data-Blocks is showing up on the right side.

But the var-dump doesnt show anything and even when I messed up the .php, there doesn’t come a fatal error. But the Path is the Same as the CSS.

I also made sure, that I downloaded the beta-version.

so… what i am doing wrong?

• NickDA

• August 2, 2020 at 1:27 pm

Did you create a Field Group with the start_date and end_date fields?

• Essk

• August 9, 2020 at 12:03 am

I’m having this problem too, both with the copied example code (I have created the associated fields and supplied them with values) and also with a simplified block that should only show an <InnerBlocks /> component.

The block insertion area isn’t showing up in the editor and when I inspect where it should be, I see
<innerblocks></innerblocks>
Custom blocks created from scratch substitute a bunch of markup in there so it’s almost as if the '__experimental_jsx' => true setting isn’t doing anything. Not sure what I’ve missed. Help?

• NickDA

• August 9, 2020 at 2:39 am

This is from experience… If you did everything that you were supposed to and you get some results you can’t explain, especially right after updating WP, themes, or plugins, clear the cache, to get rid of the locally stored CSS and especially any js files, and get the new ones. In chrome you can do so very easily with Ctrl + F5… It happens to me almost every time I update ACF, or Gutenberg.

• Makkabi

• August 20, 2020 at 10:27 am

I can only confirm this issue – I registeres the Restricted block from the docs as well as a minimal block with just an <InnerBlocks /> element, but when I insert them in the editor, I see no editable content area. No errors, no cache issue.

When I inspect the DOM, this is the HTML that is displayed for this block:

<div aria-label="Block: Restricted" role="group" id="block-e7e75935-f1de-4cca-82f7-53a85e043e73" class="block-editor-block-list__block wp-block is-selected wp-block" data-block="e7e75935-f1de-4cca-82f7-53a85e043e73" data-type="acf/restricted" data-title="Restricted" tabindex="0"><div class="acf-block-component acf-block-body"><div><div class="acf-block-preview"></div></div></div></div>