Access block data with PHP using parse_blocks() and render_block()

The Gutenberg block editor organizes your content into discrete blocks, and WordPress includes functions for easily accessing the individual blocks within a post.

Here’s a quick summary of how the functions work, and examples of them in use.

Jump to Section:

  1. parse_blocks()
  2. render_block()
  3. Display blockquote from post
  4. Table of contents from headings
  5. ACF block data

parse_blocks()

This function converts the HTML comments and markup stored in post_content into an array of parsed block objects.

Usage: $blocks = parse_blocks( $post->post_content );

The post_content of my Style Guide looks like:

<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Heading 1</h1>
<!-- /wp:heading -->

After running it through parse_blocks(), it looks like:

Array
(
    [0] => Array
        (
            [blockName] => core/paragraph
            [attrs] => Array
                (
                    [fontSize] => large
                )

            [innerBlocks] => Array
                (
                )

            [innerHTML] => 
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

            [innerContent] => Array
                (
                    [0] => 
<p class="has-large-font-size">Lorem <strong>ipsum</strong> dolor <em>sit amet</em>, consectetur <a class="map-link" href="https://maps.google.com/?q=Houston,+TX">adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

                )

        )

    [1] => Array
        (
            [blockName] => 
            [attrs] => Array
                (
                )

            [innerBlocks] => Array
                (
                )

            [innerHTML] => 


            [innerContent] => Array
                (
                    [0] => 


                )

        )

    [2] => Array
        (
            [blockName] => core/heading
            [attrs] => Array
                (
                    [level] => 1
                )

            [innerBlocks] => Array
                (
                )

            [innerHTML] => 
<h1>Heading 1</h1>

            [innerContent] => Array
                (
                    [0] => 
<h1>Heading 1</h1>

                )

render_block()

This function takes a single parsed block object and returns the rendered HTML for that block.

Usage: echo render_block( $block );

Display blockquote from post

On my portfolio archive page, every 4th project includes a blockquote. You could pull this directly from the content of the portfolio item by looping through the blocks and displaying the core/quote block, if one is found.

Add this function to your theme, then call be_display_post_blockquote() to display the quote.

Table of contents from headings

In a previous tutorial I showed how to dynamically build a table of contents by parsing the HTML.

Converting the HTML to blocks makes this much easier. You loop through the blocks and find the core/heading ones.

The example below makes a simple ordered list of all the headings in the page. You could take this a step further and use $block['attrs']['level'] to make a nested list based on the heading level (ex: h3 is subordinate to h2).

<?php
/**
* List post headings
* @see https://www.billerickson.net/access-gutenberg-block-data/
*/
function be_list_post_headings() {
global $post;
$blocks = parse_blocks( $post->post_content );
$headings = array();
foreach( $blocks as $block ) {
if( 'core/heading' === $block['blockName'] )
$headings[] = wp_strip_all_tags( $block['innerHTML'] );
}
if( !empty( $headings ) ) {
echo '<ol class="table-of-contents">';
foreach( $headings as $heading )
echo '<li>' . $heading . '</li>';
echo '</ol>';
}
}
view raw functions.php hosted with ❤ by GitHub

Unfortunately WordPress does not store the heading’s ID as an anchor attribute, so you’ll still need to manipulate the HTML if you want to create anchor links (example).

ACF block data

If you have built a custom block with Advanced Custom Fields, you can easily access all the block data using this method.

ACF generates dynamic blocks. Rather than storing actual HTML, it stores all of the block data in the HTML comments and then dynamically renders it using the PHP file or function you specify.

I’m working on a site that includes a “Service” block. It has fields for title, anchor link, content, and “success story” (a linked post from elsewhere).

The homepage includes links to the top-level pages, as well as anchor links to each individual service block. I’m using parse_blocks() to find all of the acf/service blocks, then building the links using the $block['attrs'] data.

<?php
/**
* Get service sections
* @see https://www.billerickson.net/access-gutenberg-block-data/
*/
function ea_get_service_sections() {
$sections = array();
global $post;
$blocks = parse_blocks( $post->post_content );
foreach( $blocks as $block ) {
if( 'acf/service' !== $block['blockName'] )
continue;
$title = $anchor = '';
if( !empty( $block['attrs']['data']['title'] ) )
$title = $block['attrs']['data']['title'];
if( !empty( $block['attrs']['data']['anchor'] ) )
$anchor = $block['attrs']['data']['anchor'];
if( empty( $anchor ) )
$anchor = $title;
$sections[] = '<a href="' . get_permalink() . '#' . sanitize_title_with_dashes( $anchor ) . '">' . esc_html( $title ) . '</a>';
}
if( empty( $sections ) )
return;
echo '<ul class="service-sections">';
foreach( $sections as $section )
echo '<li>' . $section . '</li>';
echo '</ul>';
}
view raw functions.php hosted with ❤ by GitHub

Advanced Custom Fields Gutenberg Block Editor WordPress Development

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions

Comments

  1. Jo Waltham says

    May 31, 2019 at 5:02 am

    Hi Bill, thanks for this tutorial. What hook are you running these functions on? I’m trying to create an acf block for events and I want to save the event date as post meta so I can use it to sort the events by date on the archive page. I’ve tried using the acf/pre_save_block filter but the post ID isn’t available at that point and therefore I can’t save to post meta. I’m wondering if I could use parse_block instead?

    • Bill Erickson says

      May 31, 2019 at 8:50 am

      I recommend reaching out to Elliot / ACF Support to see if they have a recommended method for saving meta in an ACF block yet.

      But yes, you could probably use this approach to save the meta. Hook onto `save_post`, parse the blocks in post_content, find the event block, then `update_post_meta()`.

  2. RH says

    May 31, 2019 at 6:25 am

    Hi Bill,

    Great post, again! And so timely!! Here’s a poser for you…..?

    ACF is really great at rendering its own data in the admin / Gutenberg UI, so e.g. if you have an ACF image field, and include that in the rendered callback template, the image shows in real time. Nice!

    However, if you want pull in data, e.g. say the featured image, as a background to a custom block that also wants to pull in the page “title”, how would you envisage displaying the “data” from these fields in real-time in the Gutenberg editor?

    At present, these are not being pulled in dynamically and therefore not showing on the “back end” but ARE showing on the FE…. which is a bore!! Any thoughts would be appreciated – code below for reference ;¬)

    function xx__page_title_render_callback( $payload_page_title ) {

    global $post;

    // get ACF data
    $xx__page_title = get_the_title();
    $xx__page_title_bkgd_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘full’ );
    $xx__page_title_text = get_field( ‘xx__page_title_text’ );

    // create id attribute for specific styling
    $id = ‘title-hero-‘ . $payload_page_title[‘id’];

    // create align class (“alignwide”) from block setting (“wide”)
    $align_class = $payload_page_title[‘align’] ? ‘align’ . $payload_page_title[‘align’] : ”;

    ?>

    <section class=”xx_page-title bk_page-title__hero-bkgd container-fluid”
    style=”background-image: url();”>

    <?php

    }

    • Bill Erickson says

      May 31, 2019 at 8:48 am

      I would use JavaScript in the editor load this information.

      You could use the WordPress JS API and the ACF JS API to retrieve the data and update blocks.

Leave A Reply