siteorigin / siteorigin-panels

SiteOrigin Page Builder is a powerful content creation interface, instantly recognizable, astonishingly different. SiteOrigin Page Builder makes it easy to create responsive column-based content using the widgets you know and love. Your content will accurately adapt to all mobile devices, ensuring your site is mobile-ready.

Page Builder by SiteOrigin

This is the official development for SiteOrigin's Page Builder plugin. You can browse the source and take a look at what we're working on. We welcome issue reports and pull requests.

Changes here are pushed to our plugin page on WordPress.org. This is where you should download stable releases.

Support

If you have a support question, please, post on the SiteOrigin support forums.

Documentation

• User Documentation.
• Developer Documentation.

siteorigin-panels's Issues

Call in widget to the_excerpt() with no explicit excerpt causes PHP to timeout in live editor

I have a widget that calls get_posts and uses global $post. It loops through the posts calling setup_postdata($post). It is at the_excerpt() that the live editor fails to render properly. PHP times out and the content displayed is repeated and styled incorrectly. I traced the issue through to the call to siteorigin_panels_render(). I notice that it is a recursive function so that may have something to do with it. The content works fine on the actual rendered page, the issue is just with the live editor.

Plugin conflict with Leaflet Maps Marker / Maps Marker Pro

Hi,

I am the developer of the mapping plugin Leaflet Maps Marker (https://wordpress.org/extend/plugins/leaflet-maps-marker/) respectively Maps Marker Pro (https://www.mapsmarker.com).
A user has now reported an incompatibility with your plugin "Page Builder by SiteOrigin" v2.0.3, which results in maps not being displayed when a corresponding shortcode is used within a visual editor widget for example.

I could reproduce this issue on my server and guess found the reason for this issue: maps from my plugins are created via shortcodes, for example [mapsmarker marker="1"]. When that shortcode is parsed on a standard wordpress installation, also javascript gets added to the footer of the page (you can change that to inline javascript too).

What I now found is that for me it seems that once you enter a shortcode within a visual editor widget for example, your plugin pre-processes that shortcode and saves the output too (which can be seen by clicking on "switch to editor" / "text tab" after the content has been saved once. Anyway due to my plugin architecture, the parsing of shortcodes must not proceed in advance but on runtime, otherwise the map will be broken (as you can see on https://www.mapsmarker.com/dev/pro/2014/12/28/page-builder-test/)

I first thought I could prevent the "pre-parsing" of shortcodes through your plugin via your option "Copy Content" which is disabled. Unfortunately this did not have any effect.

Can you please help me find a solution as I would really like to get my plugin working in combination with yours. The best solution in my view would be that you add an option which "disabled pre-processing of shortcodes". I would then check within my plugin if your plugin is active and the option is disabled and if not, display a warning message.

Looking forward to hearing from you!

Robert

Use with custom field

Can I use the page builder with a custom field of type text editor?

Can i fork it?

Hello,

First of all congratulations on such amazing plugin. Not sure wether i should have left this message on the wordpress.org forum or here on github. I was wondering if it would be possible for me to fork your plugin in order to create my personalized version of it. I'm not looking to create a competitor plugin nor publicly making it available on wordpress.org, i'd like to change/remove/add a few things around to make it fit my niche. Obviously i'll leave copyright and licensing in place unmodified.

Regards,
Alessandro.

Add custom styles group

I want to add a custom group to the right sidebar along with "design", "layout" and "attributes".
I have a feeling i need to use this filter hook but im not sure how to go about it.

$groups = apply_filters('siteorigin_panels_' . $section . '_style_groups', $groups, $post_id, $args );

Also, If i want to move or remove some default fields (like the border color field) how would i go about that?

In an affort to try and remove all default fields and add them back through my plugin I've tried:

remove_filter('siteorigin_panels_widget_style_fields', array('SiteOrigin_Panels_Default_Styling', 'widget_style_fields' ) );

But this doesn't do anything.

What i want to achieve is:

• Remove the border-color field.
• Move the background-color and background-image fields to a separate group called background.
• Add transparency and border-radius field tobackground group.

add fields to widget edit not working

i try to append options to widget options but not affecting
My code as follows

function custom_Fields()
{
$grid_aary = $b = array_combine(range(1, 12, 1), range(1, 12, 1));
$fields['r-mobile'] = array(
'name' => __('Mobile grid width out of 12', 'siteorigin-panels'),
'type' => 'select',
'group' => 'responsive',
'options' => $grid_aary,
'description' => __('Coulm Width', 'siteorigin-panels'),
'priority' => 16,
);
// echo 1;
return $fields;
}
if (has_filter('siteorigin_panels_widget_style_fields')) {
apply_filters('siteorigin_panels_widget_style_fields', array('SiteOrigin_Panels_Default_Styling', 'widget_style_fields'), 'custom_Fields', 100);
}

Last row margin

Hi.
Last row margin is missing, no matter what's written in the settings.

Problem with sidebar_admin_setup

I figured out that the call of "do_action( 'sidebar_admin_setup' );" in siteorigin-panels.php#337 causes an error which breaks the WP theme customizer.
After commenting the line out of the plugin code, the customizer works again.

Another thing I figured out is that the problem can be solved when I delete the templates widgets from the footer.
I'm not sure what the problem is with the sidebar and/or the widgets, but here a code example that you know what I#m talking about.

if ( ! function_exists( 'foobar_widgets_init' ) ):
    function foobar_widgets_init() {
        register_sidebar( array(
            'name'          => __( 'Footer (center)', 'foobar' ),
            'id'            => 'footer-center',
            'description'   => __( 'Add widgets here to appear in the middle of the footer.', 'foobar' ),
            'before_widget' => '<div id="%1$s" class="%2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h4>',
            'after_title'   => '</h4>',
        ) );
        register_sidebar( array(
            'name'          => __( 'Footer (right)', 'foobar' ),
            'id'            => 'footer-right',
            'description'   => __( 'Add widgets here to appear on the right of the footer.', 'foobar' ),
            'before_widget' => '<div id="%1$s" class="%2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h4>',
            'after_title'   => '</h4>',
        ) );
    }
    add_action( 'widgets_init', 'foobar_widgets_init' );
endif;

I tested some free templates from the WordPress community. You can reproduce it for example with the theme "i-excel".
If you add a widget to the "Main Widget Area" sidebar, the theme customizer at http://yourdomain.com/wp-admin/customize.php?theme=i-excel will not work anymore.

Feature request - row background image opacity

Hi Greg,

An awesome feature would be to have an extra field in the Row & panel style design tab for image opacity. This way we can use both the background colour and background image, then add opacity to the image. What this will do is allow for a filter type darkened background for text to overlay.

In this scenario I would set the background colour as black, overlay an image, then set the opacity of the image as 0.8, which gives me a perfect dark background for nice type panels.

Remove default Layout/Design options

Is it possible to remove some default options like Bottom Margin, Gutter, Background Color, etc?

Customise responsive behavior

When defining rows/columns it would be useful to be able to influence the way which they respond to mobile / desktop.

e.g. in a 12 column grid responsive framework you could tag up as follows :

class="columns small-12 medium-6 large-3"

as well as show / hide behaviour.

It would be great to have a drop down in the columns to enable the user to configure this behaviour.

Panel gutter

Hi Greg,

When editing the row layout and setting the gutter, the padding is added to both sides of the first and last panel. My thoughts are that the first and last should only add a gutter between panels and not on the outer sides.

Something like this:

.panel-grid-cell:first-child {
    padding-left: 0 !important;
}

.panel-grid-cell:last-child {
    padding-right: 0 !important;
}

Ciaran

CSS styles not applied correctly ??

I applied the following styles

background-position:100% 50%;
background-repeat:no-repeat;
background-size:50% 100%;
background-position:100% 50%
background-repeat:no-repeat
background-size:50% 100%

Your preg_match_all '/(.+?):(.+?);?$/' is only capturing the last value

array (size=3)
  0 => 
    array (size=1)
      0 => string 'background-size:50% 100%' (length=24)
  1 => 
    array (size=1)
      0 => string 'background-size' (length=15)
  2 => 
    array (size=1)
      0 => string '50% 100%' (length=8)

Where as this matches the first three lines. '/(.+):(.+);/'

Is this really an issue or am I missing something here?

Also the above CSS is treated as a single string, so the $ sign has to be removed from regex

Compatibility issues with Admin Page Framework

Hello guys ✋

I created some widgets using Admin Page Framework
Some of those widgets are using the WYSIWYG Editor, but if I open it using the page builder, the editor won't load.

I opened a case in APF, and I was referred to you guys.
michaeluno/admin-page-framework#184

Many thanks!
Vlad.

Styling in CSS instead of attribute

I think it will be better if styling of the element is in the generated CSS instead of the style attribute.

Is there any reason of being in the elements?

Text editor widget forcing automatically add paragraph tags

WordPress 4.0.1

Here is a video explaining the issue further: http://vimeo.com/114331220

Cheers.

Feature Request - Tablet width option

Hey guys,
Great product! What would be the possibility of getting a tablet width option that defaulted to a 2 column layout as opposed to needing to go straight to the mobile option which defaults to a 1 column layout?

Conflict with Symple Shortcodes plugin

Symple Shortcodes plugin inserts a new TinyMCE button, with a dropdown for shortcodes. Once Page Builder is activated for a specific post type (post, page), Symple Shortcode's button disappears from TinyMCE.
https://github.com/wpexplorer/symple-shortcodes

Live editor collision

Looking at https://github.com/siteorigin/siteorigin-panels/blob/develop/inc/live-editor.php and as see how live editor is working I think there could be a problem if in given page are loaded more than one page with panels.
May be the logic should be refined with passing the post_id of what we editing.
I will try to make a test case which could trigger the problem.

Feature request - ROW Copy & Paste

Hi Greg,

I love Page Builder, what it does and what it can do!

This enhancement can save people a lot of time and make it easier to use & re-use developed work.

ROW Copy & Paste

• Function: COPY entire row as is (including all formatting & widgets)
• Function: PASTE entire row copied to another Page/Site
• Ideal would be able to Copy & Paste from one site to another
• But within a site would be helpful also

Benefits

• This will allow developers to have a Page with Model Rows configured to there developed liking
• Then they can just Copy & Paste rows into the Site/Pages they are developing!
• Big time saver & easily allows re-use.

Note ... It is up to the developer to ensure (relatively minor stuff for us) that

• Widgets are available on site they are copying to
• URLs are updated as needed
• etc.

The Way it is now ... It is All or Nothing!

• To add a row into a new page either you Create the row & widget configs from scratch

  -or-

• Clone a whole page in (from current site).

If you can do it, Please consider this. I believe it will be a big boost & will make Page Builder even easier to use and more productive!

People will be able to Develop a Row once, cherry pick Rows as needed, then tweak Rows as necessary.
And because developing sites will be even easier, Page Builder will more likely be chosen!

Thanks Greg ... Great job!
Justin

Margin between widgets in same row (2.1 beta)

Hi,

I start to testing new version of Page Builder (I really like the new settings pages :) ) and i found interesting conflict between version 2.0 and 2.1 beta.

In the version 2.0 we have 4 same widgets on under the another in the same row like that - http://awesomescreenshot.com/0e34qknfc2 Between all 4 widgets there is automatically added margin-bottom: 30px; in the class .pg(or pl)-(some-number) .panel-grid-cell .panel {margin-bottom: 30px;}

In the version 2.1 beta this is no longer the case and there is no more space between widgets: http://awesomescreenshot.com/0364qkph3b Is this now on purpose like that? Or it is just a bug which will be fixed until release? If it is not the bug and is meant to be like that, what would be the best way to fix it? (Since it is going for WordPress theme i don't like the idea for adding custom CSS with margin for each widget or something like that).

Thanks in advance for the answer.

.. CPU / Ram Usage

Trying to trace where this 'mero page builder' plugin is coming from with the theme Elano, points me to http://siteorigin.com/page-builder/ then at the bottom this github. So i'm guessing this is the same just renamed for that theme?

Anyways if it is; there's a huge ram/processor load when running the page builder and wondering if you guys have seen it before and might know what I can do. I am thinking I can strip out their mero page builder (why it's renamed no idea) and use the one from siteorigin instead?

Layout options in Layout Builder Widget doesn't work

The subject says it all :)

This is a major bug, please fix asap.

Small cell hiding widget options

In some cases there could be cells that are small and could hide the widget options. Also depends on language some option titles could take different spaces. As it shown on the screenshot.

Possible and quick solutions may be could be using icons instead of labels or popups (just like the row operations).

Live-Editor not working when admin-panel is accessed via https

Firefox pops a security warning:
Although this page is encrypted, the information you have entered is to be sent over an unencrypted connection and could easily be read by a third party. Are you sure you want to continue sending this information?

There is also a warning about this in the developer console: Blocked loading mixed active content "http://mysite.org/?siteorigin_panels_live_editor=true"

The left sidebar is visible but the content is left blank.

Unreadable widget titles

In some cases where widget have long titles, the text could became unreadable.

I think (also have tested), the problem could be fixed if we set these list items to be inline-block instead of list-item which is default for

elements

So possible fix here is

tpl/js-templates.php

<li class="widget-type" style="display:inline-block;">

and css/admin.css in rule

.so-panels-dialog.so-panels-dialog-add-widget .widget-type-list .widget-type

we could add vertical-align: top; to ensure they will be nicely arranged

TinyMCE

This widget "Black Studio TinyMCE Widget" is not giving the tinymce options anymore. Do you know about this? Or do I need to send an issue to Black Studio?

Maybe it is a good idea to put the tinymce into the default text widget from pagebuilder?

Add new options to Row style panels

Hi, congratulations for your great work. This is a great plugin. I was wondering if it is possible to add my own custom options to row style panels, let's say like a custom css classes dropdown where user can select some previously declared classes of a theme.

Data loss due to quotes in tag

Add this to a (Black Studio) Visual Editor widget "Text"/source view-

<h1 style="text-align:center">TEST</h1>

Click "Done" and then "Update" to save the page.

Try to edit that same widget, the code above should be gone.

Feature request - DETAILS Toggle

Hi Greg,

Thanks for all your hard & quality work!

This enhancement can make life easier for those that use Class(s) for marking up Rows & Widgets. And for those with many Rows that get moved around or reused.

DETAILS Toggle

• Function: Show or Hide Details (as needed)
• Function: Possibly be able to Edit Class Names & Description while in “Show Details Mode” but not necessary.

Benefits

• Classes: While working on Class Selectors & Class Properties, can easily refer to Rows & Widgets without having to go into edit for each Row & Widget to see Class Names that are being used.
• Row Descriptions: Makes it easier to Reference rows for movement & also re-use with "ROW Copy & Paste" feature.

The way it is now is real clean, but at times I believe it will be more productive to be able to see this detail. Especially while doing markup editing that is taking place in external CSS, with no need to go into Edit mode.

Examples are attached

• Hiding Details
  
• Showing Details
  

Thanks you very much Greg for considering!
Justin

Overwrite jQuery css in Row to get parallax effect

Hi i am trying to get a parallax effect in row, with its background image.

What i am doing is to insert some jQuery to make this happen on Document ready but i cannot overwrite the 'background-image' attr for the row, just declare it transparent.

I use this image to get the parallax effect with no problem, but need to make the row background transparent after loading, is this possible?

Have tried

window.load
document.ready

with no luck

I am using this plugin

https://github.com/pixelcog/parallax.js/

Thank you very much

It's Good

It's not problem. it can do anything.

Multi-select doesn't work

The multi-select field doesn't save correctly when we select multiple values.

PHP class autoloading

Please consider implementing class autoloading instead of hard-coded require calls.

German translation

Hi,

I've thought about translating this plugin to german as I'm using it for a few german clients. What's the best way to do this? Would it be ok if I'll send you a pull request with the translation files?

Cheers, Fabian

Measurement field doesn't support negative values

Ahoy,
Thanks for this great plugin.
Measurement style field doesn't support negative values, Okay I can see that its not required for padding but I wanna add some more customization features so this seems to be a bottleneck to me.
I think adding a hook to siteorigin_panels_render_style_field() function, Something like this could serve the purpose really well.

        default :
            $args = array(
                $field,
                $current,
                $field_name,
            );
            do_action( 'siteorigin_panels_custom_style_fields_render', $args );

Thanks again,
You're awesome 😉

Visual editor embedded youtube links not rendering on page

Pasting youtube links in the visual editor shows them as being embedded like normal:

But unlike the normal visual editor, when using the page builder visual editor it doesn't actually render the video on the front-end, it only renders the link (whereas switching to the non-page-builder visual editor renders the embedded video):

Live Editor

Hi,

Live editor is a great new feature but I think there is a bug. It is not waiting for "full" page load. For example; jQuery(window).load is not working properly. I mean if there is a slider or carousel etc. on the page and if it is triggered in a jQuery(window).load function, it simply doesn't work or it doesn't display correctly. Is there any solution for that?

$panels_data['widgets'] array key messed up

Hi,

I am developing a plugin that uses the "siteorigin_panels_row_cell_attributes" filter to add some custom attributes.

After a few runs trying to find out why my function was not working, i realized that the array in $panels_data['widgets'] was being overwritten after each call.

to summarize better :

1st call :

$panels_data['widgets'] =
[0] => widget 1
[1] => widget 2
[2] => widget 3

2nd call ( no widget 3 ) :

$panels_data['widgets'] =
[0] => widget 1
[1] => widget 2
[2] => widget 1

3rd call ( no widget 3 ) :

$panels_data['widgets'] =
[0] => widget 1
[1] => widget 2
[2] => widget 2

I looked at your code and may have found a way to fix it ( it works for me but i don't know if i'm breaking something else ).

in siteorigin-panels/siteorigin-panels.php :

line 919 to 926 i replaced every variable name : "$widget_info" to "$widget_infos".

It seems that you already have a reference named $widget_info on line 804. I haven't looked further into your code so i don't know what it's for. I'll let you look into it ;)

Thanks for the plugin it's a great one and sorry for my poor english, i am not a native ;)

Widget Title Classes

Hi Greg,

Is there any chance of adding a filter to enable changing the default widget title class just in PageBuilder? It seems as if it's currently hard-coded to "widget-title"

Widget Styles > Layout: more options

In this area, we have only padding option for the whole 4 directions. In many cases, we will need different padding for each directions (top, right, bottom, left) and it would be much helpful to have 4 options for particular padding-directions.

Timeout issue with apply_filters('the_content', $content);

If I throw a shortcode in the Visual Editor, i.e.

[callout]MY CONTENT[/callout]

And if I'm doing this with that shortcode's content:

<?php echo apply_filters('the_content', $content); ?>

The page time's out.

No negative margin on single column row causing issue when background color set

HI Greg

I hope all is well!

Unless I am mistaken there appears to be a slight alignment issue regarding single columns rows compared to multiple column rows. As single column rows have no negative left and right margins, although the content remains in line with multiple columns rows, its containing div does not. I understand that this is for the purpose of the grid and normally wouldn't be a problem however an issue becomes apparent if a background color is set for each row as the background color is applied to the same containing div.

Attached is a screenshot which will hopefully explain. The green been a single column row and the gold been a multiple column row.

Hope I make even a little bit of sense :)

Ciarán

Multiple CSS styles per widget

Hi,

I've just started using the latest version of PageBuilder (looks great - has really moved on!) and noticed you can now add your own CSS to a widget.

When adding the following styles on separate lines, only the bottom one actually applied:

border-top: 1px solid #000;
border-bottom: 4px solid #000;
padding-bottom: 20px;

Perhaps I'm using this text box incorrectly, but I assumed I could add a style on each row as the description for that field says "CSS Styles, given as one per row."

Changing inc/default-styles.php on line 291 to preg_match_all('/(.+?):(.+?)(;|\n|$)/', $args['widget_css'], $matches); seems to do the trick.

This RegEx should separate CSS styles by ;, and/or a new line (with or without ;).

I've done a bit of testing, but you may want to double check this yourselves!

Thanks
James

Native WP import/export and Page Builder v2.0

Hi Greg,

I was playing around today with new PB v2.0 and it seems like the content import/export is not working anymore as it used to in v1.x?

This feature was killer before, so it would be great that is works in v2.0 as well. When I import basically just the bare content is imported, no data about the rows and grids.

Can you confirm? Or I am doing something wrong?

Thanks!
Primoz

ps: I will be creating pull request in next days for new approach to handling BackboneJS events, now everything is in closure and nothing is triggered on global scope.

Bootstrap 3 Intergation

Hi Greg,

I'm a theme developer who engaged with Twitter Bootstrap 3 (BS3) due to business issues.
Your SO PB is awesome, it would be more awesome if we find a way to integrate it with BS3.

I understand that we can use both SO & BS3 separately at the same time, but that will make some unnecessary CSS/JS resources. Please think about it and if you need some helps, I can give effort to sort it out.

Cheers,
Thong

Feature Request: Padding and margin in Rows, Columns and widgets

Hi, just only if you have time this would be great i think.

Just add the top, left, bottom and right margin/padding separately as options for the three of the elements. Now columns don't have this feature and Rows/Widgets have it but you need to give it a whole padding to all the row.

Thank you very much
Best Regards

Tags in widgets titles and SEO

I think from SEO view of point widget titles shouldn't be h3 tags but div. Heading tags should be used only on article texts or kinda.

What do you think?

Live editor focusing wrong elements

It seems to be focusing the element after the one currently hovered over, I'd be interested to know if this issue can be replicated on other people's installs or whether it's something about my page causing the problem

Change filters attributes to be more loop specific

Hi guys,

First I want to say that the Page Builder is awesome! Really knocks out all your competitors!
For my project I had to modify the classes the Page Builder generates, and for that I used your filters.

in this particular issue, I am trying to add a class that says how much columns I have using:

siteorigin_panels_row_cell_classes

the problem is that I the whole panels data object instead the on in the loop.

$panels_data

siteorigin-panels/siteorigin-panels.php Line: 850

Please change this to:

$panels_data['grids'][$gi]

Thanks,
Vlad.