Hello!
I developed my own widget and integrate it to SiteOrigin Pagebuilder. I added style options (attributes, layout, design) but it is not applied for my widget. How can I fix this?
Widget styles issue
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Boris,
Without seeing your widget code, I cannot assure you that you are facing the same issue, whihc we faced. But I will detail it for you below, anyway.
We had created some logical widgets to affect cell behaviour, instead of creating HTML output themselves.
# [size=140][b]Summary[/b][/size]
We quickly realized that the style attributes for the widgets would not save, unless the widget’s form method output at least one HTML element with a name attribute that is created using the get_field_name method of WP_Widget.
# [size=140][b]Cause[/b][/size]
This is due to code in js/siteorigin-panels.js file, for the panels.dialog.widget.saveWidget method, which does not even parse the values in the widget style sidebar (i.e. .so-sidebar .so-visual-styles), if the widget content section (i.e. .so-content) returns no parsed values.
The widget content section will return no values, unless the following code in the value parser method (i.e. panels.view.dialog.getFormValues) returns at least one element with the name attribute starting with “widgets”
$f.find('[name]').each( function(){# [size=140][b]Solution[/b][/size]
If you do not have any form elements in your widget’s form method, you can use any number of expedient elements as a stop-gap measure, but the following two make the most sense, and the second one may be more future-proof.
public function form( $instance ) { echo '<div name="'.$this->get_field_name('expedient').'">'.__('Textual content describing your widget\'s functionality.', 'your-text-domain').'</div>'; }public function form( $instance ) { echo '<input type="hidden" name="'.$this->get_field_name('expedient').'">'; }Note: More on __ and your-text-domain at the URL below:
https://codex.wordpress.org/I18n_for_WordPress_Developers#Text_Domains
If you DO have form elements in your widget’s form method, then simply make sure that:
1 – the fields have name attributes,
2 – and the name attributes are generated using the following code:
$this->get_field_name('your_field_name')I hope this helps.
The # [size=140][b]Heading[/b][/size] notations are there, since I did not know if Markdown, Full BBCode or Partial BBCode are supported in these forums.
Hello!
Thank you for your reply. Unfortunately this doesn’t helps. My widget already have input fields with properly generated name attributes. There is part of my code:
public function form($instance) { // outputs the options form on admin $img = !empty($instance['img']) ? $instance['img'] : ''; ?> <label for="<?php echo $this->get_field_id('img'); ?>"><?php _e('Image:'); ?></label> <input class="hpso-image" id="<?php echo $this->get_field_id('img'); ?>" name="<?php echo $this->get_field_name('img'); ?>" type="text" value="<?php echo esc_attr($img); ?>"> <input type="button" value="Upload/Select" class="button widget-upload"> <?php $link = !empty($instance['link']) ? $instance['link'] : ''; ?> <label for="<?php echo $this->get_field_id('link'); ?>"><?php _e('Image Link:'); ?></label> <input class="hpso-image-link widefat" id="<?php echo $this->get_field_id('link'); ?>" name="<?php echo $this->get_field_name('link'); ?>" type="text" value="<?php echo esc_attr($link); ?>"> }But widget styling still not working. Also panels.view.dialog.getFormValues returns undefined.
What wrong and how we can fix this?