Wordpress: Query Loop Block – display custom metadata from Custom Post Types

user_6214273 0
Viewed 828

I created a Custom Post Type and can use the the Query Loop Block from Wordpress to display these posts just fine.

But I have some trouble pulling metadata from these Custom Post Types into the Query Loop Block. Unfortunately the block doesn't have any boxes to check for metadata.

Is this possible? Do you have any hints? Am I missing something?

I tried creating a shortcode to pull metadata from the loop and put that shortcode into the Query Loop Block, but it doesn't work. It creates (too many) divs, but there is no content inside. Here is my shortcode:

add_shortcode( 'shortcode_metabox', 'site_shortcode_metabox' );

function site_shortcode_metabox( $atts ) {
    $output = '';

    ob_start();

    include( plugin_dir_path( __FILE__ ) . 'shortcode_metabox_php.php');

    $output .= ob_get_clean();

    return $output ;
    
}

and the 'shortcode_metabox_php.php'-file:

<?php
$args = array(
    'post_type' => 'team_members',
    'lang' => pll_current_language(),
);
$the_query = new WP_Query( $args );

while ( $the_query->have_posts() ) : $the_query->the_post(); 
?>

    <div class="team-m-metabox">
        <?php
            $custom_metabox_zusatz = get_post_meta($post->ID, 'custom_metabox_zusatz', true);
            echo $custom_metabox_zusatz;
        ?>
    </div>

<?php     
endwhile; // End of the loop.
?>

Metadata for Custom Post Types is created by this code:

// Register Metabox - Zusatz
// Add field:
add_action( 'add_meta_boxes', function() {
    add_meta_box(
        'site_custom_metabox_zusatz',
        'Zusatz',
        function( $post ) {
            wp_nonce_field( __FILE__, 'custom_metabox_zusatz_nonce' );
            ?>
            <p><input type="text" class="large-text" name="custom_metabox_zusatz" value="<?php echo esc_attr( get_post_meta( $post->ID, 'custom_metabox_zusatz', true ) ); ?>"></p>
            <?php
        },
        'team_members',
        'side'
    );
} );
// Save field.
add_action( 'save_post', function( $post_id ) {
    if ( isset( $_POST['custom_metabox_zusatz'], $_POST['custom_metabox_zusatz_nonce'] ) && wp_verify_nonce( $_POST['custom_metabox_zusatz_nonce'], __FILE__ ) ) {
        update_post_meta( $post_id, 'custom_metabox_zusatz', sanitize_text_field( $_POST['custom_metabox_zusatz'] ) );
    }
} );

I use:

'team_members'

as taxonomy for my Custom Post Types.

Please help me out. Thank you.

shortcode gutenberg-blocks wordpress-gutenberg wordpress
1 Answers

I've worked through the same issue for the Query block and ended up creating a new Gutenberg block with server side rendering so I could retrieve the post meta with PHP using get_post_meta(...) for the post. I found the core post author name block a good place to start from. As my custom post types have many different possible meta keys, I also created block variations for my post meta block, so I could easily insert the ones required using the meta_key, eg.

$meta_value = get_post_meta($block->context['postId'], $attributes['metaKey'], true);

In block.json, I defined metaKey as an attribute and added usesContext which provides access to the postType and postId. This can be useful if you need to restrict post meta to certain post types.

{
...
"attributes": {
    "metaKey": {
        "type": "string"
    },
"usesContext": [ "postType", "postId" ],
}

In the Editor view, I added UI controls to adjust the formatting of the meta values (eg. dates, address formats). The format was saved in the block attributes and passed to the server side render callback to format the meta values for display. It is more effort than the traditional PHP way to setup a new block, but there is a script for that if you're new to Gutenberg block building. Once you have your own post meta block created, you can then easily insert it into the Post Template of your Query Loop block..

user_57925190
Related