Repository navigation
feat: #4388 Responsive options docs #79
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
|
Contributor
There was a problem hiding this comment. Maybe better to add this page to a page list here devs/developer-tutorials/overview/ cos right now it only in left menu |
||
| 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 | ||
| <?php | ||
| add_action( 'vc_before_init', 'your_name_integrateWithVC' ); | ||
| function your_name_integrateWithVC() { | ||
| vc_map( [ | ||
| 'name' => __( '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 | ||
|
Contributor
There was a problem hiding this comment. Please provide a working code example here you can combine it together with you current mapping snippet so youser can with one click copy/paste it to his functions.php |
||
|
|
||
| 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. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
Contributor
There was a problem hiding this comment. always better to have here something more visual code exmple then just a comment |
||
| } | ||
| ``` | ||
|
|
||
| ## Source | ||
|
|
||
| File: `include/classes/core/class-vc-manager.php` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
Contributor
There was a problem hiding this comment. always better to have here something more visual code exmple then just a comment |
||
| } | ||
| ``` | ||
|
|
||
| ## Source | ||
|
|
||
| File: `include/classes/core/class-vc-manager.php` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <?php | ||
| add_filter( 'vc_edit_form_fields_attributes', 'my_convert_legacy_atts', 10, 3 ); | ||
|
|
||
| function my_convert_legacy_atts( $atts, $tag, $settings ) { | ||
| // Rename an attribute that was dropped from all elements. | ||
| if ( isset( $atts['old_name'] ) && ! isset( $atts['new_name'] ) ) { | ||
| $atts['new_name'] = $atts['old_name']; | ||
| } | ||
| return $atts; | ||
| } | ||
| ``` | ||
|
|
||
| ## Source | ||
|
|
||
| File: `include/classes/editors/class-vc-edit-form-fields.php` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
"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. "
Looks like redundant and complicated data for users here; even I find it hard to understand looks better without it.