Conditions for Screen Sizes

[joa]

@parktechno

<?php
/**
 * Plugin Name: Bricks Breakpoint Visibility
 * Description: Adds breakpoint-based visibility condition for Bricks Builder
 * Version: 1.0.6
 * Author: Your Name
 */

if (!defined('ABSPATH')) {
    exit;
}

class BBV_Breakpoint_Visibility {
    
    public function __construct() {
        add_action('init', array($this, 'init'));
        add_action('wp_enqueue_scripts', array($this, 'enqueue_scripts'));
        add_action('wp_ajax_bbv_set_current_breakpoint', array($this, 'set_current_breakpoint'));
        add_action('wp_ajax_nopriv_bbv_set_current_breakpoint', array($this, 'set_current_breakpoint'));
    }

    public function init() {
        add_filter('bricks/conditions/options', array($this, 'add_breakpoint_condition'));
        add_filter('bricks/conditions/result', array($this, 'check_breakpoint_condition'), 10, 3);
    }

    public function enqueue_scripts() {
        wp_enqueue_script('bbv-breakpoint-visibility', plugins_url('js/bricks-breakpoint-visibility.js', __FILE__), array('jquery'), '1.0.0', true);
        wp_localize_script('bbv-breakpoint-visibility', 'bricksBreakpointVisibility', array(
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce'    => wp_create_nonce('bbv_nonce'), // Создаем nonce
        ));
    }

    public function set_current_breakpoint() {
        check_ajax_referer('bbv_nonce', 'nonce'); // Проверяем nonce

        $width = isset($_POST['width']) ? intval($_POST['width']) : 0;
        $breakpoints = $this->get_breakpoints();
        $current_breakpoint = 'desktop';

        usort($breakpoints, function($a, $b) {
            return $b['width'] - $a['width'];
        });

        foreach ($breakpoints as $breakpoint) {
            if ($width >= $breakpoint['width']) {
                $current_breakpoint = $breakpoint['key'];
                break;
            }
        }

        setcookie('bricks_current_breakpoint', $current_breakpoint, time() + 3600, '/');
        wp_send_json_success();
    }

    public function get_breakpoints() {
        return get_option('bricks_breakpoints', []);
    }

    public function add_breakpoint_condition($options) {
        $breakpoints = $this->get_breakpoints();
        $breakpoint_options = array();

        foreach ($breakpoints as $breakpoint) {
            $breakpoint_options[$breakpoint['key']] = esc_html($breakpoint['label']);
        }

        $options[] = [
            'key'     => 'custom_breakpoint',
            'label'   => esc_html__('Custom Breakpoint', 'bricks'),
            'group'   => 'other',
            'compare' => [
                'type'    => 'select',
                'options' => [
                    '='  => esc_html__('Is', 'bricks'),
                    '!=' => esc_html__('Is not', 'bricks'),
                ],
            ],
            'value'   => [
                'type'    => 'select',
                'options' => $breakpoint_options,
            ],
        ];

        return $options;
    }

    public function check_breakpoint_condition($result, $condition_key, $condition) {
        if ($condition_key !== 'custom_breakpoint') {
            return $result;
        }

        $current_breakpoint = $this->get_current_breakpoint();

        $compare = isset($condition['compare']) ? $condition['compare'] : '=';
        $value = isset($condition['value']) ? $condition['value'] : '';

        if ($compare === '=') {
            return $current_breakpoint === $value;
        } elseif ($compare === '!=') {
            return $current_breakpoint !== $value;
        }

        return $result;
    }

    private function get_current_breakpoint() {
        return isset($_COOKIE['bricks_current_breakpoint']) ? $_COOKIE['bricks_current_breakpoint'] : 'desktop';
    }
}

new BBV_Breakpoint_Visibility();

function bricks_breakpoint_visibility_script() {
    ?>
    <script>
    (function($) {
        if (typeof bricks !== 'undefined' && bricks.is_builder) {
            return;
        }

        function setBricksBreakpoint() {
            var width = $(window).width();
            $.ajax({
                url: bricksBreakpointVisibility.ajax_url,
                type: 'POST',
                data: {
                    action: 'bbv_set_current_breakpoint',
                    width: width,
                    nonce: bricksBreakpointVisibility.nonce // Передаем nonce
                },
                success: function(response) {
                    if (response.success) {
                        console.log('Breakpoint updated');
                    }
                }
            });
        }

        $(window).on('load resize', debounce(setBricksBreakpoint, 250));

        function debounce(func, wait) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    func.apply(context, args);
                }, wait);
            };
        }
    })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'bricks_breakpoint_visibility_script');

Thanks a lot for sharing that! Trying to use it but it doesn’t give me anything in the value except default, do you know if I’m missing something here?

[parktechno]

Perhaps you have disabled custom breakpoints and are not configured in the constructor?

In the field where you have the value “Default”, the list should be loaded after all the settings.

[parktechno]

A new option for hiding an element on the frontend using a checkbox.
Thanks Qwen2.5-Max

On the frontend, the width of the user’s screen is first recorded in cookies, then the logic of hiding the element works based on this record. In the builder, this is the checkbox on the Content tab. The display of the element can be turned on or off at any breakpoint.

In this case, the code is written as a snippet and works through the Code Snippets plugin.

prk-020225-073426.json

Use it at your own risk.