REQUEST - Open Custom Sections to Gutenberg

[gbruzzo]

Hello there @MapSteps

Now that ACF have truly opened up to Gutenberg blocks (PRO version 5.8 allows for the creation of blocks (a procedure similar to creating custom posts) and render them into php templates (essentially as widgets), it would be very interesting for us if you could open custom sections to blocks to Gutenberg blocks (by enabling the Gutenberg editor). The logic already embedded in your custom sections would then make it possible to have dynamic blocks. appear on individual custom posts.

Our site is achieving the same goals nowadays, but we are currently using a plugin called acfwidgets for this purpose, as well as plugins carrying quite sophisticated widget logic (by Phpbits). We want to simplify and streamline going forward to make the site faster without having to embrace the bloat of Elementor or similar expensive frameworks.

The aim is to only use your template with custom sections + Custom Blocks created to render custom fields associated with different custom posts + either Widgetkit by Yootheme (whose widgets can be inserted via shortcodes, and which we developed custom templates to accept data from custom fields) or any block - based future widgetkit like framework for image and content display.

Please let us know your thoughts about this.

Cheers

Giacomo Bruzzo

[mapsteps]

Hi @gbruzzo,

I agree with you. We'll have to test this. If everything goes well, we will use the new editor in Custom Sections.

If you like, you can test this by adding 'show_in_rest' => true, after line 577 in custom-sections.php in the Premium Add-On.

[gbruzzo]

Hello @MapSteps

As suggested, I set show_in_rest to true to enable Gutenberg, created a dynamic custom block via ACF (a jquery music player that takes links to files and soundcloud via ACF custom fields), with php template. The template is a very crude port of a template I was using with another framework (ACF Widgets). It has explicit script and css in it.

a. created two custom sections (main_content_open, main_content_close that only exist on a test page https://www.newrarenoise2.rarenoise.com/test-page-with-blocks

a. The template is rendering in the admin, whether I put the block in the custom sections or in the main test page. So far so good

b. the template renders on the frontend of the main page, but not of the associated custom sections.

c. I am not able to get the values from the custom fields (meh!)

d. Custom sections register text but not titles. Have not tried other blocks yet, went straight for my jugular, may have overdone it a bit.

Giacomo

[gbruzzo]

Hello @MapSteps

Update

• the dynamic music player works on pages https://www.newrarenoise2.rarenoise.com/test-page-no-blocks

• it works on artists (custom post) (not setup at the moment, but tested)

• it does not render on the page on custom sections. (pity, this is the crux - no error apparent, maybe a cpt setup issue?)

Big step forward.

Any ideas about custom sections? This is the documentation by ACF https://www.advancedcustomfields.com/resources/acf_register_block_type/

Cheers

Giacomo

Giacomo

[gbruzzo]

@MapSteps

I think I know where the problem arises: in order to be able to feed custom field content to the block (and render it via php) one must query such post_id - example

 <?php

// Create id attribute allowing for custom "anchor" value.
$id = 'testimage-' . $block['id'];
if( !empty($block['anchor']) ) {
    $id = $block['anchor'];
}

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

//find post id

global $wp_query;
$post_obj = $wp_query->get_queried_object();
$page_ID = $post_obj->ID; 

//read values from appropriate custom fields (in this case a gallery custom field called 'images')

$images = get_field('images', $page_ID);
$size = 'medium'; // (thumbnail, medium, large, full or custom size)

?>

<div id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?>">

<?php if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

</div>

we query post id and pass it to the appropriate get_images function as

$images = get_field('images', $page_ID);

(ignore the second ID, images is an array containing potentially several images, each one having an ID)

The setup again works without issues if the block is inserted on the main page, but fails to render if added to any custom section hooked to appear on that page.

I think the problem is

global $wp_query;
$post_obj = $wp_query->get_queried_object();
$page_ID = $post_obj->ID; 

as the post object it refers to is the local one (e.g. the custom section) but not the page in which the custom section appears. We need to get the id of the main page / post instead.

EDIT: I cannot get that query to pull the post id from the custom section, so I cannot establish whether it would pull the post id of the whole page or only the custom section. At the moment the custom ACF blocks render in the admin of the custom section, but not on the page. Other standard blocks all work (that includes Woocommerce blocks etc), both in admin and on page.

Not quite sure therefore, what the issue is. Is there anything peculiar in the registration of custom sections? Am I using the wrong query? I thought maybe Php was blocked from executing, but then other blocks all work?

UPDATE 2:

The ACF blocks are not rendering at all in the custom sections, only in the main pages - i hardcoded the page_ID (identifying the specific page in whose admin which where the link to a soundcloud playlist is available)number in the php template (this worked : the player and the playlist started rendering in the custom section admin, which it would not otherwise obviously, since this is usually dynamic).

Giacomo

[gbruzzo]

A few more details

1. I have installed PHP everywhere on our test site.Pphp is added in a metabox either on the custom post or page OR in the custom section hooked into that post or page.

It is executed wherever a shortcode (and thus a shortcode block) is placed. We try adding the shortcodes either in the underlying post of page OR in the custom section hooked into that underlying post or page.

2. have run the php

<?php 
global $wp_query;
$post_obj = $wp_query->get_queried_object();
$page_ID = $post_obj->ID; 
echo $page_ID;
?>

This prints the id of the underlying page (see https://www.newrarenoise2.rarenoise.com/test-page-with-blocks) So far so good.

EDIT (23 JUN 2019)

WORKS WHEN:

• php is placed in metabox of underlying page / custom post + shortcode in underlying page / custom post
• php is placed in metabox of underlying page / custom post + shortcode in the custom section hooked into that underlying page / custom post DOES NOT WORK WHEN:
• php is placed in metabox of custom section hooked into that underlying page

=> Shortcode + php in the metabox of the custom section only does not work , only works if the php is in the metabox of the underlying page or custom post.

Still, this seems to point to an issue of rendering. Either there is some setting you used in creating the cpt 'section' that stops the block template from rendering or there is something in how ACF blocks are setup that makes them different / more limited. ACF help does not go into sufficient details.

Is there anything that comes to mind?

Cheers

Giacomo

[mapsteps]

Hey @gbruzzo,

thanks so much for testing and sharing all the details.

This is a tricky scenario. I haven't had the chance to play with the new ACF block features yet.

Have you had any issues with Custom Gutenberg Sections apart from the ACF part of it?

Best, David

[gbruzzo]

Hello @MapSteps

go to https://www.newrarenoise2.rarenoise.com/test-page-with-blocks

I run some block tests in a custom section associated with hook wpbf_main_content_open. The ones which do not work in the custom section work in the main content

Blocks that don't work in custom section preceding main content, but work on main content area

• all embeds blocks
• the ACF block (our music player in this case)
• calendar block (another plugin)
• search block

Do you see any patterns?

Giacomo

[gbruzzo]

Hello @MapSteps

did more digging, in essence the ACF php callback render functions of the for ACF blocks are not firing at all.

In this file blocks.php the render_callback function (lines 269 onwards) acf_render_block( $block, $content = '', $is_preview = false, $post_id = 0 ) is not firing at all.

Not quite sure why, maybe you need to add the rendering some way to do_published_hooks() e.g. adding a further _addaction to the custom_sections.php file (lines 120-129 maybe?).

Please let me know your thoughts

Giacomo

[mapsteps]

Gutenberg support for custom sections is coming with the next release. Thanks for testing and troubleshooting @gbruzzo :)