Custom Meta Box not Saving in Posts with Gutenberg Editor

Question

So, it simply turns out that the method I usually use to save post meta doesn’t work in this context, even though it does in when using the classic editor. I don’t know why this is, but I did find another article (https://www.codeinwp.com/blog/make-plugin-compatible-with-gutenberg-sidebar-api/) and there was a line in there that eventually led me to a solution. Additionally the entire, mycpt_register_post_meta() function doesn’t appear to be necessary at all if you’re saving data in this manner. For the clarification, I didn’t actually show my usual saving method in my question because it wasn’t working and I’d long since abandoned trying to use it in this particular instance – so I didn’t include it. (If anyone wants to see it I can add it.)

function mycpt_add_cpt_selection() {
    $screens = ['page', 'post'];
    foreach( $screens as $screen ) {
        add_meta_box(
            'mycpt_assignment',
            'Assign Quick Links',
            'mycpt_assign_metabox',
            $screen,
            'side',
            'low',
             //not even sure that this array is necessary
             array(
                '__block_editor_compatible_meta_box' => true,
                '__back_compat_meta_box'             => false,
            )
        );
    }
}
add_action( 'add_meta_boxes', 'mycpt_add_cpt_selection' );
function mycpt_assign_metabox( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'mycpt_cpt_nonce' );
    $mycpt_appended_cpts = get_post_meta( $post->ID, 'mycpt_cpts', false ); ?>
    <select id="mycpt_cpts" name="mycpt_cpts[]" multiple="multiple" style="width:90%;">
    <?php
    if( $mycpt_appended_cpts ) {
        foreach( $mycpt_appended_cpts as $cpt_ids ) {
            foreach( $cpt_ids as $cpt_id ) {
                $cpt_title = get_the_title( $cpt_id );
                $cpt_title = ( mb_strlen( $cpt_title ) > 50 ) ? mb_substr( $cpt_title, 0, 49 ) . '...' : $cpt_title;
                echo '<option value="' . $cpt_id . '" selected="selected">' . $cpt_title . '</option>';
            }
        }
    }
    ?>
    </select>
    <small style="display:block;font-size:0.8em;width:95%;">
        Instructions
    </small>
<?php }
function mycpt_assign_save_postdata( $post_id ) {
    if( isset( $_POST['mycpt_cpts'] ) ) {
        update_post_meta( $post_id, 'mycpt_cpts', $_POST['mycpt_cpts'] );
    }
}
add_action( 'save_post', 'mycpt_assign_save_postdata' );

So everything works almost exactly the way I want it. The only oddity that still perplexes me is when retrieving the post_meta it’s actually putting an array into another array. It’s creating a multi-dimensional array, which isn’t what happens when I use the same methods in other areas.

As an example, in the database, when I’ve assigned four of my CPT posts to a WP post – it’s saved as the following:

a:2:{i:0;s:2:"65";i:1;s:2:"66";}

Which would be:

array(
  0 => "65",
  1 => "66"
)

However, when I retrieve using get_post_meta(), what I get back is the following:

array(
  0 => array(
    0 => "65",
    1 => "66" 
  ),
)

You can see from select output that I have 2 foreach loops in there, so I’ve got a workaround, but I’m still going to figure out how to get it to return just a single array.

Hope someone else finds this useful.

Related Posts: