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.
2
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 themeta_key
, eg.In block.json, I defined
metaKey
as an attribute and addedusesContext
which provides access to the postType and postId. This can be useful if you need to restrict post meta to certain post types.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..
In case anybody is wondering, S.Walsh’s solution is currently not working due to a bug.