Home>Support>Removed div from widget

Removed div from widget

By mrtn, 8 years ago. Last reply by roya, 8 years ago.

Hi guys,

here is the code from widget:

<div class="step">
    <span class="step-number">12</span>
    <h6 class="step-title">Title</h6>
    <p class="step-text">Text goes here


</div>

The problem is when I use page builder all of that html is visible on the front end. When I switch from page builder with “Revert to editor” option

div class="step"
is removed.

I tested with couple themes (default ones too) and only page builder plugin active, but the result was always the same.

I also thought that might be issue with WP editor, but when I pasted my html in “Text” view all of the code was visible.

I also tried this with your own widgets from SiteOrigin Widgets Bundle and the same thing happens.

Any ideas?

Cheers
Marcin

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Marcin

    Thanks for reaching out. Sorry we weren’t able to reply sooner. I ran a quick test now and I’m able to insert your HTML into the Text tab of a SiteOrigin Editor widget in Page Builder and have it display as expected, just the text, no HTML with the HTML still there when I edit the widget. Are you still working on this challenge?

  2. 8 years, 5 months ago mrtn

    Hi Andrew,

    yes, issue is still there.

    Here are the steps to recreate it:

    1. Create new widget (e.g. Step) with something like this as an output:
      <div class="step">
    <span class="step-number">12</span>
    <h6 class="step-title">Title</h6>
    <p class="step-text">Text goes here


</div>
    2. Go to page, switch to page builder and add new widget. When you go to front page you can see whole markup in the page source and this is just right. It comes with
      <div class="step">

      and everything else

    3. Now when you go to admin and click on “Revert to editor” it goes back to “Text” view and you can see that code looks like this
      <span class="step-number">12</span>
<h6 class="step-title">Title</h6>
<p class="step-text">Text goes here

      There is no

      <div class="step">

      there. It looks like when you hit “Revert to editor” it strips all divs from the widget

    I tried this with other widgets from SiteOrigin Widgets Bundle and couple others. I tried to switch to another theme. Basically output is the same each time: it strips all divs inside the widget. Of course when I put whole markup in “Text” view it works just fine, but what I want is to make sure that when user switch to default editor it won’t break the whole site and the markup will be there.

    I also tried to:

    • Set div on the outside too see if only outer div is removed, like so:
      <div>
<div class="step">
    <span class="step-number">12</span>
    <h6 class="step-title">Title</h6>
    <p class="step-text">Text goes here


</div>
</div>

      . Both divs were removed.

    • I tried to use something else instead of div e.g. figure and section. Both works, but there are elements where you have couple inner divs and you just can’t always use other markup as replacement

    So, if you have an idea of how to solve this I would really appreciate any help :)

    Best
    Marcin

  3. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for all the effort involved in explaining this.

    Revert to Editor is a one-way process that can’t be reversed without using page revisions. When you click the button you’re warned about losing your Page Builder layout. On any given page you can either work in the Visual/Text tabs OR work in Page Builder. You can’t switch between the two modes; if you go from Page Builder to the Visual/Text tabs and then try go back to Page Builder, all of your content will be dumped into a single SiteOrigin Editor widget. The button or process rather isn’t intended for users to move back and forth between the two modes of editing while maintaining Page Builder formatting.

    I can log this as a bug for the team to assess. I’m not really following this use case though. If you insert say another row and another widget, revert to editor and then go back to Page Builder, your layout will be lost, everything will be in a single SiteOrigin Editor widget. It’s not something you’d want to do.

    Thanks again for all the effort involved in reporting this issue. We’ll do our best to assist once we know more about the end use case. Cheers :)

  4. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Ideally, we’d have an easy to use filter for the Revert to Editor button to allow developers to remove it for client sites as required. That has been requested in the past but hasn’t been implemented yet. It is possible to hide that button using CSS if you’re interested.

  5. 8 years, 5 months ago mrtn

    Hi Andrew,

    thanks for explanation :) CSS won’t be necessary.

    I understand that switching between the two is not the way to go and why does it dump everything to single text widget when you switch back to page builder. It’s understandable. But the only thing that bothers me is that it removes all divs and I’m not sure if it is intended or not. If it is can you tell me why?

    Really appreciate your time on this one :)

    Best
    Marcin

  6. 8 years, 5 months ago mrtn

    Sorry, I can’t edit my previous answer.

    I guess I found js code that strips all divs

    js/siteorigin-panels-24.js lines 3734-3737

    When I comment those all divs are there when I Revert to Editor. I guess this code should strip all SiteOrigin related divs like panel-grid and panel-grid-cell, but it strips all, even those that are not related to SO.

    Is there anything you can do about it?

    Best
    Marcin

  7. 8 years, 5 months ago mrtn

    Hi again :)

    looks like those are the lines to blame
    siteorigin-panels.js

    Maybe just add check for page builder specific classes like .panel-grid .panel-grid-cell .so-panel.widget or something like that and remove divs with those classes. That would solve the issue I guess.

    Best
    Marcin

  8. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Hi Marcin

    Thanks, this is really useful and positive feedback. Greg let me know that originally, the divs were being stripped because the content in the Visual/Text tabs was/is being used by Yoast SEO and WordPress search and was therefore unnecessary. We have a project on the go at the moment. As soon as that wraps we’ll relook at this problem at improve it. Thanks again for your feedback and input. Sorry we don’t have a fix to offer right now.

  9. 8 years, 5 months ago mrtn

    Hi Andrew,

    I’ll wait. Hopefully fix will be quick and easy one, good luck :)

    Cheers

  10. 8 years, 5 months ago Andrew Misplon
    Hi, I Work Here

    Thanks for your feedback and understanding :)

  11. 8 years, 2 days ago roya

    seems to be the same problem here. ist there any further information?

  12. 8 years, 2 days ago roya

    Sorry as an addition:
    If I use something like

    <?php $item_output .= get_the_content(); ?>

    It outputs all the widgets-code but strips every div (like

    ) which is custom.

    If I use it like

    <?php $item_output .= the_content(); ?>

    It outputs everything correctly but it’s not inside the content anymore. So it goes from

    <li><a>lorem ipsum</a><div class="dropdown-pane is-open" id="865">
<h1>Headline Widget 1</h1>
<h1>Headline Widget 2</h1>
</div></li>

    TO

    <div id="pl-865">
<div class="panel-grid" id="pg-865-0">
<div class="panel-grid-cell" id="pgc-865-0-0">
<div class="so-panel widget widget_lp-test panel-first-child panel-last-child" id="panel-865-0-0-0" data-index="0">
<div class="so-widget-lp-widget-test so-widget-lp-widget-test-default-d75171398898">

<div class="lp_fund_container" data-interchange="images" style="background-image: url(" IMAGEURL ");"></div>
<div class="row">
<div class="small-11 medium-10 large-8 column small-centered greybackground overlapper no-padding">
<div class="column small-centered">


<h1>Headline Widget 1</h1>


<div class="row">
<div class="small-12 column small-centered">
<div class="progress">
<div class="progress-bar" data-barwidth="60%">
<div class="percentage"><span class="some""></span>%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="panel-grid-cell" id="pgc-865-0-1">
<div class="so-panel widget widget_lp-widget-test2 panel-first-child panel-last-child" id="panel-865-0-1-0" data-index="1">
<div class="so-widget-lp-widget-test2 so-widget-lp-widget-test2-default-d75171398898">
<div class="row clearfix">
<div class="small-12 column" style="background:#000">


<h1>Headline Widget 2</h1>



</div>
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
  13. 8 years, 2 days ago roya

    And AFTER the “goes to part” comes

    <li><a>lorem ipsum</a></li>
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More