Support

Account

Home Forums General Issues How to get rid of extra lines from ACF WYSIWYG content!

Solving

How to get rid of extra lines from ACF WYSIWYG content!

  • Hi! I want to remove the extra lines that get created when I load WYSIWYG editor type text content from an ACF field. As far as my research goes it has something to do with the wordpress function: wpautop. But I am not sure because all the solutions that surround this approach do not show any effect or break the site.

    I am loading the content with either a shortcode tag or a dynamic token tag using the addons from dynamicooo or e-addons.

    The content are two lines of text:

    Test-First-Line
    Test-Second-Line

    When I load this Text into a Title-, Button or Text editor-widgets text field in the elementor editor and add text “test-before” with the before and “test-after” with after advanced options of the dynamic tag dialog I get this result:

    test-before
    Test-First-Line
    Test-Second-Line
    test-after

    But what I should (or want to) get is:

    test-beforeTest-First-Line
    Test-Second-Linetest-after

    Meaning I want to keep my <br> linebreaks from the ACF WYSIWYG Editor content but no additional lines before and after.

    These have been the solutions I have allready tried within the dynamic tag dialog:

    [acf:acf_field|strip_tags()]
    <- nothing changes, extra and normal linebreaks are still there

    [acf:acf_field|wpstrip_all_tags()]
    <- nothing changes, extra and normal linebreaks are still there

    [acf:acf_field|576|wp_strip_all_tags()]
    <- nothing changes, extra and normal linebreaks are still there

    These have been the solutions I have allready tried to add by using the Code Snippets Plugin (Run snippet everywhere active):

    $field = get_field(‘text_content’);
    $formatted_field = strip_tags($field, ‘<br>’);
    echo $formatted_field; ?>
    <- Fatal Error Complete wordpress site breaks and can not be accessed anymore

    remove_filter (‘acf_the_content’, ‘wpautop’);

    These have been the solutions I have allready tried to add by using custom CSS in the widget I tried to load the text content into:

    p:empty {
    display:none
    }
    <- nothing changes, extra and normal linebreaks are still there

    Please keep in mind when you want to help with this, that I am not a developer, when you have a code snippet that might work please also describe where and how I need to place it 😉

    Thanks!

  • None of the shortcodes that you have in your question are valid ACF sortcodes, unless you are using some other plugin or something that makes them valid. Are these from one of the other plugins you mentioned?

    But that is neither here nor there, as you stated, the extra breaks and lines are being added by wpautop(). This filter works on the entire content of the WYSIWYG field and altering the individual parts of the content will have no effect.

    The wpautop filter is run when ACF formats the value.

    What you need to do is to remove that filter for the specific field. Since you are using elementor I’m assuming that you cannot modify the code that actually outputs the value of the field. Unfortunately, without modifying the code where the value is output there really isn’t any way to do this without affecting every field.

    Using PHP I would remove this filter before I got the field and then add the filter back so that it did not affect other fields.

    
    remove_filter('acf_the_content', 'wpautop');
    $value = get_field('field_name');
    add_filter('acf_the_content', 'wpautop');
    

    This cannot be done in elementor.

    Using elementor I would likely try using a textarea field and add a filter to ACF that would cause ACF to do shortcodes on this particular field. There is an example of doing exactly this in the documentation for acf/format_value.

  • Thank you for your response! I can add php code while using elementor either by using dynamicooo´s raw PHP widget or by just adding a PHP Code snippet with the code snippet plugin.

    But the code:

    remove_filter(‘acf_the_content’, ‘wpautop’);

    Does not remove the p tags (line breaks) that are added to any WYSIWYG content that gets loaded into a page by the elementor dynamic tag.

    Currently my workaround is that I remove the space those p tags create (which is caused by the theme settings at least thats what someone else told me):

    p {
    margin-bottom:unset;
    }

    This won´t help if I would want a WYSIWYG text content included manuelly set linebreaks to flow into an existing text.

    Meaning something like this won´t work:

    This is the text that is in the page and now I want <THIS SNIPPET INCLUDING THIS
    INTENTIONAL LINE BREAK> to be sticked into the original text.

    Because it would look like this:

    This is the text that is in the page and now I want
    <THIS SNIPPET INCLUDING THIS
    INTENTIONAL LINE BREAK>
    to be sticked into the original text.

    If you have a working approach for that, then it would be fine to know it just in case 🙂

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

You must be logged in to reply to this topic.