pagebuilder 2.5x update breaks inserted Pages

Unmfortunately, after the 2.5 update I’ve found that most sites using the very handy ‘insert pages’ plugin are broken. Everything was perfect before, and i think others have found the same issue:

https://wordpress.org/support/topic/page-builder-by-siteorigin-2-5-x-layout-not-working/#post-9337985

Not sure what the cause is exactly. I’ve updated this site to the latest pagebuilder which uses the insert pages widget in the footer so you can see the problem on this site:

http://audiochristian.com/

It’s a big problem for me really, as insert pages is such a useful tool for large sites. Creating sections as pages to simply call into others is very useful. Here’s the main differences between the two versions regarding generated css, etc…

SiteOrigin 2.4.25 (works fine) :

the stylesheet as follows:

.panel-grid {
zoom: 1;
}
.panel-grid:before {
content: ”;
display: block;
}
.panel-grid:after {
content: ”;
display: table;
clear: both;
}
.panel-grid-cell {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
min-height: 1em;
}
.panel-grid-cell .so-panel {
zoom: 1;
}
.panel-grid-cell .so-panel:before {
content: ”;
display: block;
}
.panel-grid-cell .so-panel:after {
content: ”;
display: table;
clear: both;
}
.panel-grid-cell .panel-last-child {
margin-bottom: 0;
}
.panel-grid-cell .widget-title {
margin-top: 0;
}
.panel-row-style {
zoom: 1;
}
.panel-row-style:before {
content: ”;
display: block;
}
.panel-row-style:after {
content: ”;
display: table;
clear: both;
}

this is also different:

/* Layout 8 */ #pgc-8-0-0 , #pgc-8-1-0 , #pgc-8-2-0 , #pgc-8-3-0 { width:100%;width:calc(100% – ( 0 * 10px ) ) } #pg-8-0 , #pg-8-1 , #pg-8-2 , #pl-8 .so-panel , #pl-8 .so-panel:last-child { margin-bottom:0px } #pg-8-1> .panel-row-style { background-color:#ededed } #panel-8-1-0-0> .panel-widget-style { background-color:#ededed;color:#db1c4f } #panel-8-1-0-0 a { color:#db1c4f } #panel-8-3-0-0> .panel-widget-style { padding:10px 10px 10px 10px } @media (max-width:780px){ #pg-8-0.panel-no-style, #pg-8-0.panel-has-style > .panel-row-style , #pg-8-1.panel-no-style, #pg-8-1.panel-has-style > .panel-row-style , #pg-8-2.panel-no-style, #pg-8-2.panel-has-style > .panel-row-style , #pg-8-3.panel-no-style, #pg-8-3.panel-has-style > .panel-row-style { -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } #pg-8-0 .panel-grid-cell , #pg-8-1 .panel-grid-cell , #pg-8-2 .panel-grid-cell , #pg-8-3 .panel-grid-cell { margin-right:0 } #pg-8-0 .panel-grid-cell , #pg-8-1 .panel-grid-cell , #pg-8-2 .panel-grid-cell , #pg-8-3 .panel-grid-cell { width:100% } #pl-8 .panel-grid-cell { padding:0 } #pl-8 .panel-grid .panel-grid-cell-empty { display:none } #pl-8 .panel-grid .panel-grid-cell-mobile-last { margin-bottom:0px } }

and SiteOrigin 2.5.8 (broken, like my heart) :

the stylesheet as follows:

.panel-grid.panel-no-style,
.panel-grid.panel-has-style > .panel-row-style {
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: nowrap;
-ms-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.panel-layout.panel-is-rtl .panel-grid.panel-no-style,
.panel-layout.panel-is-rtl .panel-grid.panel-has-style > .panel-row-style {
-ms-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.panel-grid-cell {
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.panel-grid-cell .panel-cell-style {
height: 100%;
}
.panel-grid-cell .so-panel {
zoom: 1;
}
.panel-grid-cell .so-panel:before {
content: ”;
display: block;
}
.panel-grid-cell .so-panel:after {
content: ”;
display: table;
clear: both;
}
.panel-grid-cell .panel-last-child {
margin-bottom: 0;
}
.panel-grid-cell .widget-title {
margin-top: 0;
}
body.siteorigin-panels-before-js {
overflow-x: hidden;
}
body.siteorigin-panels-before-js .siteorigin-panels-stretch {
margin-right: -1000px !important;
margin-left: -1000px !important;
padding-right: 1000px !important;
padding-left: 1000px !important;
}

Again, this difference:

<style type="text/css" media="all" id="siteorigin-panels-grids-wp_head">/* Layout 8 */ #pg-8-0 , #pg-8-1 , #pg-8-2 , #pl-8 .panel-grid-cell .so-panel , #pl-8 .panel-grid-cell .so-panel:last-child { margin-bottom:0px } #pg-8-0 .panel-grid-cell , #pg-8-1 .panel-grid-cell , #pg-8-2 .panel-grid-cell , #pg-8-3 .panel-grid-cell { float:none } #pg-8-0 , #pg-8-1 , #pg-8-2 , #pg-8-3 { margin-left:-5px;margin-right:-5px } #pg-8-0 .panel-grid-cell , #pg-8-1 .panel-grid-cell , #pg-8-2 .panel-grid-cell , #pg-8-3 .panel-grid-cell { padding-left:5px;padding-right:5px } #panel-8-1-0-0 a { color:#db1c4f } #panel-8-3-0-0 > .panel-widget-style { padding:10px 10px 10px 10px } @media (max-width:780px){ #pg-8-0 .panel-grid-cell , #pg-8-1 .panel-grid-cell , #pg-8-2 .panel-grid-cell , #pg-8-3 .panel-grid-cell { float:none;width:auto } #pl-8 .panel-grid , #pl-8 .panel-grid-cell { } #pl-8 .panel-grid .panel-grid-cell-empty { display:none } #pl-8 .panel-grid .panel-grid-cell-mobile-last { margin-bottom:0px } }

Is there a solution to help with this issue? Would be greatly appreciated, thanks :)