Replace BlockUI dependency with CSS pointer events

[amustill]

Is your feature request related to a problem? Please describe. The current implementation of the BlockUI jQuery plugin makes it difficult to customise the overlay on the frontend without overwriting the jQuery.fn.block and jQuery.fn.unblock methods directly.

The hardcoded values of opacity: 0.6, background: '#fff' scattered throughout the frontend JavaScript files is particularly jarring on dark themes.

Describe the solution you'd like Replace the BlockUI plugin with CSS pointer events for all frontend JS. Browser usage is 98% globally and it is supported on all browsers on the WooCommerce/WordPress support spectrum.

Ideally this would be controlled a CSS class exposed by WooCommerce for easy customisation. For example:

function blockUi(element) {
    element.classList.add('woo-block-ui')
}

function unblockUi(element) {
    element.classList.remove('woo-block-ui')
}

.woo-block-ui {
    pointer-events: none;
    opacity: 0.6;
}

Themes could then easily customise the .woo-block-ui class for complete control.

In theory this solution should be non-breaking as any customisation to the current implementation will have required replacing/editing WooCommerce JS files or BlockUI methods.

Describe alternatives you've considered To combat this currently, I have overwritten the methods exposed by the BlockUI plugin.

jQuery.fn.block = function {
    this[0].classList.add('block-ui')
}

jQuery.fn.unblock = function {
    this[0].classList.remove('block-ui')
}

Additional context I noticed an open issue that starts the discussion for potentially removing the jQuery dependency on the frontend JS.

The BlockUI plugin has not been updated in 6 years and appears to be dead. I think it's safe to say it's time to move on - at least for the frontend JavaScript.

[Camilo517]

+1

[Konamiman]

Hi @amustill, I'm going to keep this open as a good enhancement suggestion, but at this point we can't provide details about when we'll get to work on it.