get_post_gallery with Gutenberg

I have a site where I created a page that takes the gallery images from a post and puts them into a slider.

I used the following code:

// gets the gallery info
$gallery = get_post_gallery( $post->ID, false );
// makes an array of image ids
$ids = explode ( ",", $gallery['ids'] );

Then I inserted the images using wp_get_attachment_image().

Unfortunately, with WP 5.0 and Gutenberg, get_post_gallery no longer works with newly added content. It seems that get_post_gallery used a shortcode that no longer works with Gutenberg.

I am still getting up to speed on Gutenberg and the block system. Until I understand that all better, I was wondering if anyone has any advice on how to get the image ids from a gallery in Gutenberg?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Using birgire’s suggestions, I came up with the following solution that is working well with both the old pre-WP 4.x data and the newer posts that have been added under 5.0.

// if there is a gallery block do this
if (has_block('gallery', $post->post_content)) {
    $post_blocks = parse_blocks($post->post_content);
    $ids = $post_blocks[0][attrs][ids];
} 
// if there is not a gallery block do this
else {
    // gets the gallery info
    $gallery = get_post_gallery( $post->ID, false );
    // makes an array of image ids
    $ids = explode ( ",", $gallery['ids'] );
}

Method 2

The get_post_gallery() is a wrapper for get_post_galleries() that has an open ticket
#43826 for gallery blocks support. This is currently set to the 5.1 milestone, but it might change.

You can even look at the proposed patches, that uses e.g. parse_blocks( $post->post_content ) and has_block( 'gallery', $post->post_content ) , to get an idea what’s needed to fully support this.

In the meanwhile you could look into the render_block filter to modify the rendered output of gallery blocks to your needs.

Here’s an example that targets the core/gallery block and uses the block attribute containing the gallery image IDs:

/**
 * Modify the output of the rendered core/gallery block.
 */
add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'core/gallery' !== $block['blockName'] || ! isset( $block['attrs']['ids'] ) ) {
           return $block_content;
    }
    $li = '';
    foreach( (array) $block['attrs']['ids'] as $id ) {
        $li .= sprintf( '<li>%s</li>', wp_get_attachment_image( $id, 'large' ) );
    }
    return sprintf( '<ul>%s</ul>', $li ); 
}, 10, 2 );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0