diff --git a/devs/developer-tutorials/add-design-options-tab.md b/devs/developer-tutorials/add-design-options-tab.md
index 214204b..1724b4a 100644
--- a/devs/developer-tutorials/add-design-options-tab.md
+++ b/devs/developer-tutorials/add-design-options-tab.md
@@ -60,3 +60,5 @@ $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, vc_shortcode_cus
```
Important part in this snippet is `vc_shortcode_custom_css_class()` function call, it is parsing `css` attribute and outputs its name in the element's html markup.
+
+Since version 9.1 every element with a `css_editor` param also gets the "Hide element" toggle at the top of the Design Options tab. Its value is stored in the `hide_element` attribute, with per device values in `hide_element_wpb_{device}`, and the hide classes are added through the `VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG` filter, so the template above needs no changes. To leave the toggle out, set `'settings' => [ 'hide_toggle' => false ]` on the param. The Design Options values themselves are set per device only when the param carries `'responsive' => true`: add it to the param above, or map the tab with `vc_config()->get_design_options_tab()`, which already carries it. Read more in [Make a param responsive](/devs/developer-tutorials/make-a-param-responsive).
diff --git a/devs/developer-tutorials/editor-events.md b/devs/developer-tutorials/editor-events.md
index ff911a0..19b9b7a 100644
--- a/devs/developer-tutorials/editor-events.md
+++ b/devs/developer-tutorials/editor-events.md
@@ -331,6 +331,21 @@ window.vc.events.on('save:error', function(error) {
```
+## Responsive Device Events
+
+```js
+/**
+ * Fires when the device being edited changes: a device is selected in the
+ * navigation bar or "Apply styles only for selected device type" is switched.
+ * data.device is the device key (xl, lg, md, sm, xs), or null for global editing.
+ * Available since 9.1.
+ */
+
+window.vc.events.on('wpb:targetDeviceChange', function(data) {
+ console.log('Editing device:', data.device);
+});
+```
+
## Custom Parameter Events
### Dropdown/Select Events
@@ -398,6 +413,7 @@ jQuery(document).on('change', '.wpb_vc_param_value.attachment_id', function() {
| `save:error` | Save failed | error |
| `vc_iframe_loaded` | Frontend editor loaded | – |
| `vc_reload` | Editor reloading | – |
+| `wpb:targetDeviceChange` | Edited device changed in the navigation bar | `{ device }` |
## Element-Specific Events
diff --git a/devs/developer-tutorials/make-a-param-responsive.md b/devs/developer-tutorials/make-a-param-responsive.md
new file mode 100644
index 0000000..bb66145
--- /dev/null
+++ b/devs/developer-tutorials/make-a-param-responsive.md
@@ -0,0 +1,63 @@
+---
+id: make-a-param-responsive
+title: Make a param responsive
+sidebar_label: Make a param responsive
+sidebar_position: 28
+hide_table_of_contents: true
+slug: /developer-tutorials/make-a-param-responsive
+---
+
+# Make a param responsive
+
+Starting from version 9.1 a mapped param can hold a different value per device. Add `'responsive' => true` to the param in your [vc_map()](/devs/inner-api/vc_map) call and the element edit window will show one field per device.
+
+Two shared definitions already carry the flag: `vc_config()->get_design_options_tab()` (Design Options) and `vc_config()->get_css_animation()` (CSS animation). A `css_editor` or `css_animation` param written by hand needs it like any other param.
+
+## Param mapping
+
+```php
+ __( 'Bar tag test', 'my-text-domain' ),
+ 'base' => 'bartag',
+ 'params' => [
+ [
+ 'type' => 'textfield',
+ 'heading' => __( 'Height', 'my-text-domain' ),
+ 'param_name' => 'height',
+ 'value' => '300',
+ 'responsive' => true,
+ ],
+ ],
+ ] );
+}
+class WPBakeryShortCode_Bartag extends WPBakeryShortCode {
+}
+```
+
+When a device is selected in the navigation bar with "Apply styles only for selected device type" enabled, the edit window shows the field of that device, marked with a device icon.
+
+## Saved values
+
+The main param keeps its attribute and each device gets one more, named after it and the device key:
+
+| Device | Attribute |
+|-------------------|-------------------|
+| Main param | `height` |
+| Desktop | `height_wpb_xl` |
+| Tablet horizontal | `height_wpb_lg` |
+| Tablet vertical | `height_wpb_md` |
+| Mobile horizontal | `height_wpb_sm` |
+| Mobile vertical | `height_wpb_xs` |
+
+Device left empty uses the value of the main param, and a device value equal to it is not stored. Pages saved before 9.1 simply have no such attributes.
+
+## HTML output
+
+In the element template, `wpb_get_responsive_values( $atts, 'height' )` returns the device values that were set, keyed by device key. Pass them to `wpb_responsive()->params()->add_css()` with the selector the rules are written for: each value is wrapped in the media query of its device and the rules are printed once per page. The class the selector targets comes from `get_element_class( $atts )` and is added to the element class list by `$this->getExtraClass()`.
+
+This is how the plugin outputs CSS animation per device, see `WPBakeryShortCode::getCSSAnimation()`. As the output lives in the template, a theme that [replaced it with its own copy](/devs/developer-tutorials/change-shortcodes-html-output) before you added it shows the main value on every device until the copy is updated.
+
+**Note:** with "Apply styles only for selected device type" disabled, device-specific values are not used. They stay in the content until the main value is changed while the toggle is off, which removes them.
diff --git a/devs/hooks/actions/overview.md b/devs/hooks/actions/overview.md
index 3d9d15e..3dfadf4 100644
--- a/devs/hooks/actions/overview.md
+++ b/devs/hooks/actions/overview.md
@@ -33,6 +33,7 @@ function your_custom_function($param1, $param2) {
| [`vc_after_init_config`](/devs/hooks/actions/vc_after_init_config) | Fires after the configuration library has been initialized. |
| [`vc_after_init_license`](/devs/hooks/actions/vc_after_init_license) | Fires after the license manager has been initialized. |
| [`vc_after_init_modules`](/devs/hooks/actions/vc_after_init_modules) | Fires after the modules manager has been initialized. |
+| [`vc_after_init_responsive`](/devs/hooks/actions/vc_after_init_responsive) | Fires after the responsive component has been initialized. |
| [`vc_after_init_settings`](/devs/hooks/actions/vc_after_init_settings) | Fires after the settings manager has been initialized. |
| [`vc_after_init_updater`](/devs/hooks/actions/vc_after_init_updater) | Fires after the updater component has been initialized. |
| [`vc_after_init_vc`](/devs/hooks/actions/vc_after_init_vc) | Fires after the main WPBakery Page Builder instance has been initialized. |
@@ -54,6 +55,7 @@ function your_custom_function($param1, $param2) {
| [`vc_before_init_frontend_editor`](/devs/hooks/actions/vc_before_init_frontend_editor) | Fires before the frontend editor component is initialized. |
| [`vc_before_init_license`](/devs/hooks/actions/vc_before_init_license) | Fires before the license component is initialized. |
| [`vc_before_init_modules`](/devs/hooks/actions/vc_before_init_modules) | Fires before the modules component is initialized. |
+| [`vc_before_init_responsive`](/devs/hooks/actions/vc_before_init_responsive) | Fires before the responsive component is initialized. |
| [`vc_before_init_settings`](/devs/hooks/actions/vc_before_init_settings) | Fires before the settings component is initialized. |
| [`vc_before_init_updater`](/devs/hooks/actions/vc_before_init_updater) | Fires before the updater component is initialized. |
| [`vc_before_init_vc`](/devs/hooks/actions/vc_before_init_vc) | Fires before the main VC instance is initialized. |
diff --git a/devs/hooks/actions/vc_after_init_responsive.md b/devs/hooks/actions/vc_after_init_responsive.md
new file mode 100644
index 0000000..2f623d2
--- /dev/null
+++ b/devs/hooks/actions/vc_after_init_responsive.md
@@ -0,0 +1,26 @@
+---
+sidebar_class_name: hidden-sidebar-item
+hide_table_of_contents: true
+---
+
+# vc_after_init_responsive
+
+Fires after the responsive component has been initialized. This hook runs inside the `Vc_Manager::responsive()` method, after the `WPB_Responsive` instance has been created and stored in the factory. Available since version 9.1.
+
+## Parameters
+
+This action has no parameters.
+
+## Usage
+
+```php
+add_action( 'vc_after_init_responsive', 'wpb_after_responsive_init' );
+
+function wpb_after_responsive_init() {
+ // Run custom logic once the responsive services (breakpoints, devices, params, hide) are ready
+}
+```
+
+## Source
+
+File: `include/classes/core/class-vc-manager.php`
diff --git a/devs/hooks/actions/vc_before_init_responsive.md b/devs/hooks/actions/vc_before_init_responsive.md
new file mode 100644
index 0000000..eb51366
--- /dev/null
+++ b/devs/hooks/actions/vc_before_init_responsive.md
@@ -0,0 +1,26 @@
+---
+sidebar_class_name: hidden-sidebar-item
+hide_table_of_contents: true
+---
+
+# vc_before_init_responsive
+
+Fires before the responsive component is initialized. This hook runs inside the `Vc_Manager::responsive()` method, the first time the responsive services are requested, before the `WPB_Responsive` instance is created. Available since version 9.1.
+
+## Parameters
+
+This action has no parameters.
+
+## Usage
+
+```php
+add_action( 'vc_before_init_responsive', 'wpb_before_responsive_init' );
+
+function wpb_before_responsive_init() {
+ // Run custom logic before the responsive services (breakpoints, devices, params, hide) are created
+}
+```
+
+## Source
+
+File: `include/classes/core/class-vc-manager.php`
diff --git a/devs/hooks/filters/overview.md b/devs/hooks/filters/overview.md
index 7f15134..19d143d 100644
--- a/devs/hooks/filters/overview.md
+++ b/devs/hooks/filters/overview.md
@@ -60,6 +60,7 @@ function your_custom_function($value, $additional_params) {
| [`vc_edit_form_class`](/devs/hooks/filters/vc_edit_form_class) | Filters the array of CSS classes applied to the edit form fields container element. |
| [`vc_edit_form_css_class`](/devs/hooks/filters/vc_edit_form_css_class) | Filters the CSS class string applied to the shortcode edit form panel container. |
| [`vc_edit_form_enqueue_script`](/devs/hooks/filters/vc_edit_form_enqueue_script) | Filters the array of scripts registered for parameter types in the edit form. |
+| [`vc_edit_form_fields_attributes`](/devs/hooks/filters/vc_edit_form_fields_attributes) | Filters the shortcode attributes of every element before they are used to populate the edit form fields. |
| [`vc_edit_form_fields_attributes_{tag}`](/devs/hooks/filters/vc_edit_form_fields_attributes_tag) | Filters the shortcode attributes before they are used to populate the edit form fields. |
| [`vc_edit_form_fields_optional_params`](/devs/hooks/filters/vc_edit_form_fields_optional_params) | Filters the list of optional parameter types that should not be initialized by default in the edit form. |
| [`vc_edit_form_fields_render_field_{type}_before`](/devs/hooks/filters/vc_edit_form_fields_render_field_type_before) | Filters the HTML output rendered **before** a parameter field of a specific type in the WPBakery element edit form. |
@@ -217,7 +218,7 @@ function your_custom_function($value, $additional_params) {
| [`wpb_module_ai_element_param_types`](/devs/hooks/filters/wpb_module_ai_element_param_types) | Filters the list of element parameter types that display the AI icon in the editor. |
| [`wpb_module_ai_text_field_words`](/devs/hooks/filters/wpb_module_ai_text_field_words) | Filters the list of keywords used to determine whether a `textfield` parameter should display the AI icon. |
| [`wpb_module_ai_type_response_route_lib`](/devs/hooks/filters/wpb_module_ai_type_response_route_lib) | Filters the routing configuration that maps element parameter types to their AI response handler classes and API endpoints. |
-| [`wpb_navbar_getControlScreenSize`](/devs/hooks/filters/wpb_navbar_getControlScreenSize) | Filters the available screen sizes for the responsive preview control in the frontend editor navbar. |
+| [`wpb_navbar_getControlScreenSize`](/devs/hooks/filters/wpb_navbar_getControlScreenSize) | Filters the device list of the responsive preview dropdown in the navigation bar of both editors. |
| [`wpb_set_post_custom_meta`](/devs/hooks/filters/wpb_set_post_custom_meta) | Filters the custom meta values associated with a post in the editor. |
| [`wpb_shortcode_acf_display_when_empty_value`](/devs/hooks/filters/wpb_shortcode_acf_display_when_empty_value) | Filters whether the ACF (Advanced Custom Fields) shortcode element should render output when the field value is empty. |
| [`wpb_toggle_heading`](/devs/hooks/filters/wpb_toggle_heading) | Filters the heading HTML output of the Toggle (FAQ) element. |
diff --git a/devs/hooks/filters/vc_edit_form_fields_attributes.md b/devs/hooks/filters/vc_edit_form_fields_attributes.md
new file mode 100644
index 0000000..9b9a966
--- /dev/null
+++ b/devs/hooks/filters/vc_edit_form_fields_attributes.md
@@ -0,0 +1,37 @@
+---
+sidebar_class_name: hidden-sidebar-item
+hide_table_of_contents: true
+---
+
+# vc_edit_form_fields_attributes
+
+Filters the shortcode attributes of every element before they are used to populate the edit form fields. It runs before the element specific [`vc_edit_form_fields_attributes_{tag}`](/devs/hooks/filters/vc_edit_form_fields_attributes_tag) filter and suits conversions that apply to all elements. WPBakery Page Builder uses it to convert the legacy per device hide attributes to `hide_element`. Available since version 9.1.
+
+Fires when WPBakery opens the element edit form popup, just after the form attributes are assembled and before they are rendered.
+
+## Parameters
+
+| # | Parameter | Type | Description |
+|---|-----------|------|-------------|
+| 1 | `$atts` | array | Attributes being passed through the filter chain. |
+| 2 | `$tag` | string | Shortcode tag of the element being edited (e.g., `vc_column`). |
+| 3 | `$settings` | array | Shortcode settings array from `WPBMap::getShortCode( $tag )`. |
+
+## Usage
+
+```php
+ 'Ultra Wide (2560px)',
- 'width' => '2560px',
- ];
- return $screen_sizes;
+ // Remove the mobile horizontal preview from the dropdown.
+ return array_values( array_filter( $screen_sizes, function ( $screen ) {
+ return 'sm' !== $screen['device'];
+ } ) );
}
```
+**Note:** when adding an entry, `key` must be one of the icon keys listed above, the navigation bar loads the icon template named after it.
+
## Source
-File: `include/classes/editors/navbar/class-vc-navbar-frontend.php`
+File: `include/classes/editors/navbar/class-vc-navbar.php`
diff --git a/docs/building-with-wpbakery/element-design-options.md b/docs/building-with-wpbakery/element-design-options.md
index 183a0cc..f2c35f0 100644
--- a/docs/building-with-wpbakery/element-design-options.md
+++ b/docs/building-with-wpbakery/element-design-options.md
@@ -19,6 +19,14 @@ Within Design Options it is possible to control:
- Background color
- Background image and position style
+## Per device
+
+Since the 9.1 update design options can be set for one device at a time: select a device in the navigation bar and enable "Apply styles only for selected device type". The device starts with a copy of the current values. Read more in [Responsive settings](/docs/building-with-wpbakery/responsive-settings).
+
+## Hide element
+
+"Hide element" toggle at the top of the tab hides the element on your site, or only on the selected device when you edit per device.
+
diff --git a/docs/building-with-wpbakery/responsive-settings.md b/docs/building-with-wpbakery/responsive-settings.md
index 590cdbd..94616c6 100644
--- a/docs/building-with-wpbakery/responsive-settings.md
+++ b/docs/building-with-wpbakery/responsive-settings.md
@@ -6,14 +6,62 @@ sidebar_position: 4
hide_table_of_contents: true
---
-***Since 4.3***
+***Since 9.1***
-Starting from version 4.3 WPBakery Page Builder allows you to control columns across multiple devices. Responsive settings can be found in column param window under the tab 'Width & Responsiveness'.
+Starting from version 9.1 WPBakery Page Builder allows you to set styles for each device separately, hide elements on selected devices and change the screen width where each device view starts.
-Within settings, it is possible to set column width and offset for default column size and also other devices by taking into account default value. In addition, it is possible to 'Hide' columns on specific type of devices in order not to display some specific block for example on mobile devices.
+## Device views
-**Note:** Starting from version 4.7 it is possible to use Responsive Settings for inner column
+| Device | Screen width (default) | Editor preview (default) |
+|-------------------|------------------------|--------------------------|
+| Desktop | From 1200px | Full width |
+| Tablet horizontal | Up to 1200px | 1024px |
+| Tablet vertical | Up to 1024px | 768px |
+| Mobile horizontal | Up to 768px | 640px |
+| Mobile vertical | Up to 640px | 480px |
-
-
-
+Screen widths and preview sizes are set by the [breakpoints](#breakpoints) in Design Options: each device view starts at its breakpoint, ends at the next one and the Frontend editor previews it at its breakpoint width. Mobile vertical covers everything below the mobile horizontal breakpoint and is previewed at 480px, or narrower when that breakpoint is lower.
+
+Device views do not cascade: value set for Tablet vertical is applied to tablet vertical screens only, not to the smaller devices.
+
+## Breakpoints
+
+The screen width where each device view starts can be changed in WP Dashboard -> WPBakery Page Builder -> Design Options tab:
+
+- Desktop breakpoint (1200px by default);
+- Tablet horizontal breakpoint (1024px by default);
+- Tablet vertical breakpoint (768px by default);
+- Mobile horizontal breakpoint (640px by default).
+
+Once saved, the device dropdown in both editors shows the new screen widths and the Frontend editor previews each device at its new width.
+
+**Note:** values must increase from mobile horizontal to desktop. Invalid value is rejected on save and the previous one is kept.
+
+Column widths follow new breakpoints after saving the Design Options tab with "Use custom design options" enabled. Breakpoints changed in earlier versions are kept.
+
+## Editing per device
+
+The device dropdown in the navigation bar of both editors holds "Apply styles only for selected device type" toggle in its last row:
+
+- Enabled - values you change in element edit window are applied to the device selected in the dropdown only;
+- Disabled - values are applied to all devices and device-specific changes are ignored.
+
+
+
+A badge on the device icon in the navigation bar shows that the toggle is enabled.
+
+Device-specific values are available for Design Options and CSS animation. While the toggle is enabled, a device icon appears next to each such option. CSS animation left empty for a device uses the value set for all devices. A device's Design Options start as a copy of the values set for all devices; changing them with the toggle disabled removes the device copies.
+
+**Note:** the toggle state is saved together with the page and device-specific values are applied on your site only while it is enabled. The dropdown is not available when "Disable responsive content elements" is checked in General Settings.
+
+## Hide element
+
+"Hide element" toggle at the top of the Design Options tab hides the element on the selected device. With "Apply styles only for selected device type" disabled it hides the element on all devices. Element hidden on all devices is not displayed on your site at all. In the editors hidden elements remain visible but dimmed.
+
+
+
+**Note:** "Hide row" and "Hide section" toggles and column hide checkboxes are replaced with "Hide element" toggle. Existing pages keep working, old values are displayed as "Hide element" setting when you open the element edit window and converted when you save the page.
+
+## Column width and offset
+
+Column width and offset are still set per device in the column edit window under "Width & Responsiveness" tab. To hide a column use "Hide element" toggle in the column Design Options tab.
diff --git a/docs/building-with-wpbakery/wpbakery-page-builder-settings.md b/docs/building-with-wpbakery/wpbakery-page-builder-settings.md
index 71ca9fa..cdfceae 100644
--- a/docs/building-with-wpbakery/wpbakery-page-builder-settings.md
+++ b/docs/building-with-wpbakery/wpbakery-page-builder-settings.md
@@ -43,7 +43,16 @@ Control user group role access to the features and options of WPBakery Page Buil
## Design Options
-Design Options allows you to apply a custom visual appearance to WPBakery Page Builder content elements and also control responsive width. By default content elements "stack" one on top other when the screen size is smaller than 768px.
+Design Options allows you to apply a custom visual appearance to WPBakery Page Builder content elements and also control responsive width. By default content elements "stack" one on top other when the screen size is smaller than 640px.
+
+Since the 9.1 update this tab also contains the screen width where each device view starts:
+
+- Desktop breakpoint (1200px by default);
+- Tablet horizontal breakpoint (1024px by default);
+- Tablet vertical breakpoint (768px by default);
+- Mobile horizontal breakpoint (640px by default).
+
+**Note:** values must increase from mobile horizontal to desktop. Read more in [Responsive settings](/docs/building-with-wpbakery/responsive-settings).
## Custom CSS
diff --git a/docs/tutorials/control-elements-different-devices.md b/docs/tutorials/control-elements-different-devices.md
index 439b3e1..49d9ee6 100644
--- a/docs/tutorials/control-elements-different-devices.md
+++ b/docs/tutorials/control-elements-different-devices.md
@@ -9,6 +9,8 @@ slug: /tutorials/how-to-control-elements-on-different-devices
Learn how to design responsive layouts and control elements on different devices with WPBakery Page Builder plugin for WordPress.
+Starting from version 9.1 elements are hidden per device with the "Hide element" toggle in the Design Options tab, see [Responsive settings](/docs/building-with-wpbakery/responsive-settings).
+