Support

Account

Home Forums General Issues Removing ACF markup from WYSIWYG fields

Solving

Removing ACF markup from WYSIWYG fields

  • So I’m using the flexible repeater field for creating different page layouts. Some fields are WYSIWYG. Some of them, sometimes (can’t seem to spot the pattern yet) get this extraneous markup wrapped around them and this breaks my bottom margins, prevents them from collapsing.

    <div class="page" title="Page 1">
    <div class="section">
    <div class="layoutArea">
    <div class="column">

    Question is: how do I remove this markup and prevent it from appearing in my editor in the first place?

  • I just started seeing this on a site that was still in ACF 4. And it only seemed to be happening to new fields that I added. I updated the site to ACF 5 and it’s still happening.

    Still a mystery as to why and where it’s coming from.

    I’ll report back as I need to get this figured out so I can sleep well at night. 😉

  • Okay, the mystery…er..a workaround for this was found by a co-worker of mine.
    Firs the fix and then some details in case acf folks need some variables for bug fixing.

    Workaround
    Our WYSIWYG fields were set to ‘basic’. When they were set to ‘full’ all of a sudden the div’s mentioned above in the first post showed up in the text editor tab. Which they hadn’t in the text editor tab in the ‘basic’ editor.
    Deleting the opening and closing divs fixed it.

    Debugging Details

    • Our acf field was always ‘basic’ from the get go.
    • Our acf field group which held the wysiwyg was added to pages that already existed, er, meaning it was saved already with other acf fields.
    • The extra div’s never showed up in the db’s post_meta rows/fields. I checked.
    • It seems to happen only the first time the page is saved after a the acf fields are added to it. ? I think?
    • I also did two quick new pages and wasn’t able to reproduce it on new pages that had never been saved before. Hardly thorough, but maybe there’s something there
    • The extra div’s didn’t show up in all repeating fields on a first save, I couldn’t ever figure out why some did and some didn’t.

    Here’s a sample of what the div’s looked like in the editor. Note there’s more than one set in this one. Not the case for all examples.

    <div class="page" title="Page 13">
    <div class="section">
    <div class="layoutArea">
    <div class="column">
    
    <strong>A call to action (with a little humor)</strong>
    
    </div>
    </div>
    <div class="layoutArea">
    <div class="column">
    
    “On paper, Toxoplasma gondii looks as if it ought to be the most famous parasite on earth. This single-celled pathogen infects over half the world’s population, including an estimated 50 million Americans. Each of Toxoplasma’s victims carries thousands of the parasites, many residing in the brain. As if that were not enough
    of an accomplishment, Toxoplasma is equally adept at infecting all other warm-blooded animals, as disparate as chickens and kangaroos.”
    
    Opening paragraph of “A Common Parasite Reveals Its Strongest Asset: Stealth” By Carl Zimmer, The New York Times, June 20, 2006
    
    This is his conclusion:
    
    “Dr. Milton M. McAllister, a parasitologist at the University of Illinois at Chicago, has called for controlling the spread of Toxoplasma by cats. He notes that oocysts from cats can also infect wildlife. Toxoplasma has even been detected in sea otters, suggesting it can reach the ocean.
    
    ‘It’s perfectly safe to keep a cat,’ he said. ‘Just keep it inside.’”
    
    &nbsp;
    
    <strong>How does this change your view of things?</strong>
    
    “On Oct. 16, 2002, at 4 p.m., I walked out of my apartment in Secunderabad, India, leaving the door wide open, the lights on and my laptop humming. I don’t remember doing this. I know I did it because the building’s night watchman saw me leave. I woke up the next day in a train station four miles away, with no idea who I was or why I was in India. A policeman found me, and I ended up strapped down, hallucinating in a mental hospital for three days. ”
    
    Opening paragraph of “Crazy Pills” By David Stuart MacLean, New York Times Op-Ed, August 7, 2013.
    
    His conclusion:
    
    “Lariam is a drug whose side effects impair the user’s ability to report those side effects (being able to accurately identify feelings of confusion means that you probably aren’t that confused). The side effects leave no visible scars, no objective damage. But if Lariam were a car, if psychological or neurological side effects were as visible as broken bones, it would have been pulled from the market years ago.
    
    It’s a prescription I wish I had left unfilled.”
    
    </div>
    </div>
    </div>
    </div>
  • 1 year and 3+ months later….

    Hello – I just had this problem with Flexible Content, too. I can’t really see a pattern with it. It occurs on WYSIWYG editors and I get the same markup as mladen.

    <div class="page" title="Page 1">
    <div class="section">
    <div class="layoutArea">
    <div class="column">

    Does anyone know what’s causing this and how to avoid it?

    Thanks,
    Seth

  • Found this: http://wordpress.stackexchange.com/questions/178514/the-content-returning-unexpected-div-wrappers

    It seems that this can be cause by copy and pasting. I have see this before, for example if you go to this site http://lipsum.com/ and generate some paragraphs of text and then copy an paste all of the text into the visual editor in WP you will end up copying and pasting the surrounding div as well

    
    <div id="lipsum">
      .....
    </div>
    
  • Thanks John!

    I’d been copying and pasting from a pdf in MAC’s Preview program. It never occurred to me that extraneous markup was stowed away. I should’ve checked the Text view of the WYSIWYG as well.

    Glad to know that it was operator error.

    –Seth

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.