Optimize the Screen Size functionality in the Block Editor

Hi Nick,

I apologize for the delayed reply. This is currently not possible. There is a filter blockVisibility.contextualIndicatorClasses that allows you to modify the classes applied by the plugin, but it does not include the proper variables to determine what screen size is hidden.

That said, I have already pushed a patch to add this functionality and it will be included in the next version. I am aiming to have a minor release out in a few days to fix a few items that popped up.

And no, unfortunately, I won’t be in Athens. But plan on attending WCEU next year. Timing just didn’t work this year.

Let me know if I can be of further assistance, and I will follow up once the release is out with an example of how to use the filter.

Best,
Nick

Hey Nick,

This functionality is now possible in version 3.0.3.

I did not add it directly to the plugin, but I updated the indicator class JavaScript filter. So now you can do something like the following.

/**
 * Modifies the indicator classes based on active controls. In this
 * case, add a class if the block has been hidden on medium screens.
 *
 * @param {string} classes - The original classes of the indicator.
 * @param {Array} activeControls - The active controls.
 * @param {object} controls - The controls object.
 * 
 * @returns {string} - The modified classes of the indicator.
 */
function modifyIndicatorClasses( classes, activeControls, controls ) {
    if ( activeControls.includes( 'screen-size' ) ) {
        const screenSize = controls?.screenSize;
        const hiddenOnMedium = screenSize?.hideOnScreenSize?.medium ?? false;

        if ( hiddenOnMedium ) {
            return classes + ' hidden-on-medium';
        }
    }

    return classes;
}

wp.hooks.addFilter(
    'blockVisibility.contextualIndicatorClasses',
    'example-plugin/modify-indicator-classes',
    modifyIndicatorClasses
);

If you place this in a js file and then enqueue it using enqueue_block_editor_assets hook, you should be good to go, coupled with your custom CSS of course.

Have fun at WCEU, definitely jealous that I am missing it this year.

Best,
Nick