Repository navigation
feat: #4388 Responsive options docs - #79
orkunaybek wants to merge 4 commits into
Conversation
|
Just one thing, we have added the "Hide element" toggle can be turned off per element with I feel like we can also mention that https://github.com/wpbakery/js_composer/pull/4334#discussion_r4207619300 it is added recently after Oleg's comment |
|
|
||
| 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). |
There was a problem hiding this comment.
"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.
| @@ -0,0 +1,63 @@ | |||
| --- | |||
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
|
|
||
| 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 |
There was a problem hiding this comment.
Please provide a working code example here you can combine it together with you current mapping snippet
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 {
}
so youser can with one click copy/paste it to his functions.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 |
There was a problem hiding this comment.
always better to have here something more visual code exmple then just a comment
| 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 |
There was a problem hiding this comment.
always better to have here something more visual code exmple then just a comment
| - Tablet horizontal breakpoint (1024px by default); | ||
| - Tablet vertical breakpoint (768px by default); | ||
| - Mobile horizontal breakpoint (640px by default). | ||
|
|
There was a problem hiding this comment.
maybe also todo with screenshot demanding how to see it in seetings
This branch has not been deployed
3 participants
No description provided.