Allow devs to add 'no-link' class to elements to prevent order view link being triggered on row click

[mikejolley]

Closes #18704

[claudiulodro]

Works great. Just needs merge conflicts resolved.

[rodrigoprimo]

I can confirm that if the class no-link is added to the <tr> element the order view link is not triggered on row click but the cursor is still set to pointer instead of default. It seems to me that this is happening because of the following CSS rule that is applied to the <td> elements:

woocommerce/assets/css/admin.scss

Line 2048 in 1c57075

cursor: pointer;

[rodrigoprimo]

I can confirm that if the class no-link is added to the <tr> element the order view link is not triggered on row click but the cursor is still set to pointer instead of default. It seems to me that this is happening because of the following CSS rule that is applied to the <td> elements:

woocommerce/assets/css/admin.scss

Line 2048 in 1c57075

cursor: pointer;

[mikejolley]

@rodrigoprimo how did you add it to the TR? The intention was for this to be added to new elements within the cells.

[rodrigoprimo]

@mikejolley I used the following code (not production ready as it is missing an if statement to add the class only in the order list page):

add_filter( 'post_class', function( $classes ) {
	$classes[] = 'no-link';
	return $classes;
} );

The intention was for this to be added to new elements within the cells.

I thought the intention was to allow devs to prevent order view link being triggered on the whole row and not just on new elements and that is why I tested adding the class to the <tr>.

[jranavas]

Hello. Can't "no-link" be the default approach? This is the UX default WordPress/WooCommerce tables operation, prevents unwanted clicks and permits text selections, as @webdados described: #18704
If is not possible, how we can add this fix?
Thanks.

[mikejolley]

The preview modal can be copy pasted. That has the important stuff.

[rodrigoprimo]

If is not possible, how we can add this fix?

You can add the no-link class to the <tr> or to specific <td> to prevent order view link being triggered on click.

[webdados]

You can add the no-link class to the or to specific to prevent order view link being triggered on click.

This is great. That way we can target only some TD or the entire TR.
(Although I'm not a fan of the original change of turning a TR element clickable.)

[jranavas]

I found the way to add the "no-link", maybe is useful to others. I hope this is the right way, thanks!

/**
 * Add "no-link" class to tr's from WooCommerce orders screen
 * Link: https://github.com/woocommerce/woocommerce/pull/18708
 * Hook reference: https://developer.wordpress.org/reference/hooks/post_class/
 * Tested with: WooCommerce 3.3.1-rc.1
 */
function add_no_link_to_post_class( $classes ) {
	if ( current_user_can( 'manage_woocommerce' ) ) { //make sure we are shop managers 
        foreach ( $classes as $class ) {
	        if( $class == 'type-shop_order' ) {
	            $classes[] = 'no-link';
	        }
    	}
    }
    return $classes;
}
add_filter( 'post_class', 'add_no_link_to_post_class' );

[webdados]

I don't think you need to check for "manage_woocommerce".

add_filter( 'post_class', function( $classes ) {
	if ( is_admin() ) {
		$current_screen = get_current_screen();
		if ( $current_screen->base == 'edit' && $current_screen->post_type == 'shop_order' ) $classes[] = 'no-link';
	}
	return $classes;
} );

[esaulfarfan]

Thanks @jranavas :)