CSS flexbox conflicting with Wysiwyg editor

  • There seems to be a problem creating blocks of text in the Wysiwyg editor when the block is within a div that uses display: flex

    Here is an example of a textfield I am using for the theme and how it is set up in HTML/CSS
    Image: https://pasteboard.co/Jv8LvHu.png

    html:

    <div class="textbox1">
  <p><span style="font-size: 2em;">?legilde</span> <br>
    <br>
    Fredag den 25. September 2020 <br>
    Fra klokken 17:30 <br>
    <br>
    <span style="font-weight:600">Menu</span> <br>
    <br>
    <span style="font-style: italic">To slags hjemmelavede sild</span> <br>
    <br>
    <span style="font-weight:600">Hovedret</span> <br>
    <br>
    <span style="font-style: italic">Sm?rstegte vild-?l <br>
    Stuvede dildkartofler <br>
    Stegesky, r?syltede tytteb?r, agurkesalat og citron</span> <br>
    <br>
    <span style="font-weight:600">Dessert</span> <br>
    <br>
    <span style="font-style: italic;">Dessertkage med mango mousse</span> <br>
    <br>
    <span style="font-weight: 600; font-size: 2em;">Pris 365 kr.</span> <br>
    <br>
    Bestilling til arrangementet skal foretages p? telefon <span style="font-weight: bold;">24 46 01 24</span></p>
</div>

    css:

    .textbox1 {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #f0f0f0;
}

    Now, in my php file for wordpress, I changed the HTML to:

    <?php $text = get_field('text_fields');?>
<div class="textbox">
  <p><?php echo $text['textbox1'];?></p>
</div>

    Then I just entered the text with all the inline styling into the Wysiwyg editor, and the result came out looking like this:
    https://pasteboard.co/Jv8PaJs.png

    I discovered that if I remove display: flex it will show up normally, but with missing break points.
    https://pasteboard.co/Jv8R4jy.png

    While inspecting the element, I noticed that not only does the Wysiwyg editor remove <br> tags, but it also ADDS <p> tags to every single line of text, and I think this is what causes the flexbox layout to get messed up.

    Is there any function or plugin that can solve my problem?
    I know that you can stop the removal of <br> tags with the following code:

    function uncoverwp_tiny_mce_fix( $init )
{
    // don't remove line breaks
    $init['remove_linebreaks'] = false;

    // convert newline characters to BR
    $init['convert_newlines_to_brs'] = true;

    // don't remove redundant BR
    $init['remove_redundant_brs'] = false;

    // pass back to wordpress
    return $init;
}
add_filter( 'tiny_mce_before_init', 'uncoverwp_tiny_mce_fix' );

    But sadly it has NOT worked.

    So I need three things:

    1: Being able to show CSS flexbox elements correctly.
    2: Removing the extra <p> tags that are added in the editor.
    3: Stopping the editor from removing <br> tags.

    Any suggestions?

    • This topic was modified 4 years, 5 months ago by liljeqvist.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Which editor are you using?
    The code you mentioned is for the Classic editor (or Classic block). WP also has a function that automatically adds paragraph tags, and it is handled differently in the Classic editor and the block editor (trying to fix old problems).
    Additionally, the block editor or the theme might have some flex styling of its own, which could conflict with your flex CSS.
    You should probably separate the content more from the presentation of it, so it will work in more cases.

    Thread Starter liljeqvist

    (@liljeqvist)

    I am using the Classic Editor.

    OK, the editor has certain settings that WP loads. These can be filtered, like in your code, but the content is actually processed by WP before it is saved in the database. See https://developer.www.ads-software.com/?s=wpautop
    In addition, your scenario is to get some content from a plugin (looks like ACF) which could be processing it before saving it.
    You didn’t say whether your theme (or a plugin) is loading styles with flex CSS in it.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS flexbox conflicting with Wysiwyg editor’ is closed to new replies.