0

Until recently, I was using the following PHP and jQuery code for adding bulk editing support for a meta field (price) in a custom post type (Book):

PHP:

function show_bulk_edit_book_metabox( $column_name, $post_type ) {
    static $print_nonce = true;
    if ( $print_nonce ) {
        $print_nonce = false;
        wp_nonce_field( plugin_basename( __FILE__ ), 'book_edit_nonce' );
    }

    switch ( $column_name ) {
        case 'price':
            ?>
        <fieldset class="inline-edit-col-right inline-edit-book">
            <div class="inline-edit-col column-<?php echo esc_attr( $column_name ); ?>">
                <label class="inline-edit-group">
                    <span class="title"><?php _e( 'Price', 'my-domain' ); ?></span><input type="text" name="price" />
                </label>
            </div>
        </fieldset>
            <?php
        break;
    }
}
add_action( 'bulk_edit_custom_box', 'show_bulk_edit_book_metabox', 10, 2 );

JQUERY:

( function( $ ) {
    $( '#bulk_edit' ).on( 'click', function() {
        // Define the bulk edit row.
        var $bulk_row = $( '#bulk-edit' );

        // Get the selected post ids that are being edited.
        var $post_ids = new Array();
        $bulk_row.find( '#bulk-titles' ).children().each( function() {
            $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
        });

        // Get the data.
        var $nonce = $bulk_row.find( 'input[name="book_edit_nonce"]' ).val();
        var $price = $bulk_row.find( 'input[name="price"]' ).val();

        // Save the data.
        $.ajax({
            url: ajaxurl, // This is a variable that WordPress has already defined for us.
            type: 'POST',
            async: false,
            cache: false,
            data: {
                action: 'save_bulk_edit_book', // This is the name of our WP AJAX function that we'll set up next.
                post_ids: $post_ids, // And these are the parameters we're passing to our function.
                price: $price,
                book_edit_nonce: $nonce
            }
        });
    });

})( jQuery );

Apparently, WP 6.0 has made some accessibility markup changes to the bulk edit screen and the following part of the code no longer works:

$bulk_row.find( '#bulk-titles' ).children().each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
});

This is the new HTML markup of the selected bulk post IDs list (an example):

<div class="inline-edit-col">
    <div id="bulk-title-div">
        <div id="bulk-titles">
            <ul id="bulk-titles-list" role="list">
                <li class="ntdelitem"><button type="button" id="_2590" class="button-link ntdelbutton"><span class="screen-reader-text">Remove "167" from Bulk Edit</span></button><span class="ntdeltitle" aria-hidden="true">167</span></li>
                <li class="ntdelitem"><button type="button" id="_2589" class="button-link ntdelbutton"><span class="screen-reader-text">Remove "166" from Bulk Edit</span></button><span class="ntdeltitle" aria-hidden="true">166</span></li>
            </ul>
        </div>
    </div>
</div>

Instead of getting the selected post IDs, I'm getting an empty value. Any idea of which changes I should make to this code to make it work in WP 6.0?

Thanks in advance

4
  • Without knowing what the markup for your meta field, or how the meta field is added, it's extremely difficult if not impossible to tell you what selectors/code you need to change. There are literally thousands of possible ways you could have added those fields to your custom post type. Edit your question to include more information about these fields and where they come from, how they're implemented, or even the PHP code you used to add them, and if you're using a plugin, name it.
    – Tom J Nowell
    Jun 28, 2022 at 15:12
  • 1
    @TomJNowell I updated the question with more info
    – leemon
    Jun 28, 2022 at 15:48
  • This appears to be a question about jQuery selectors/DOM traversal rather than a question about WordPress.
    – bosco
    Jun 30, 2022 at 18:55
  • 1
    For anyone who finds their way here, there is now a hook for bulk edit so you no longer have to grovel around in the DOM with JavaScript. developer.wordpress.org/reference/hooks/bulk_edit_posts Mar 7 at 18:11

1 Answer 1

0

I managed to find a solution by myself. Just replace:

$bulk_row.find( '#bulk-titles' ).children().each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /^(ttle)/i, '' ) );
});

with:

$bulk_row.find( '#bulk-titles-list .button-link.ntdelbutton' ).each( function() {
    $post_ids.push( $( this ).attr( 'id' ).replace( /_/g, '' ) );
});

Not the answer you're looking for? Browse other questions tagged or ask your own question.