{"id":466,"date":"2014-10-08T21:29:05","date_gmt":"2014-10-08T15:29:05","guid":{"rendered":"http:\/\/promincproductions.com\/blog\/?p=466"},"modified":"2014-11-04T21:14:46","modified_gmt":"2014-11-04T15:14:46","slug":"wordpress-visual-editor-clear-line-break","status":"publish","type":"post","link":"https:\/\/promincproductions.com\/blog\/wordpress-visual-editor-clear-line-break\/","title":{"rendered":"WordPress Visual Editor &#8211; Clear All Line Break"},"content":{"rendered":"<p>If there is one thing I HATE about WordPress, it&#8217;s their STUPID visual editor and the fact that it likes to think it&#8217;s smarter than I am in how I write content. \u00a0I add several line breaks, it takes them away. \u00a0I put NO HTML into my content, it starts to wrap things in &lt;p&gt; and &lt;div&gt; tags as it likes. \u00a0Maybe for some this is fine, but I personally don&#8217;t know who those people are. \u00a0I&#8217;ve seen colleagues and clients who have a range of knowledge of no HTML to a website developer (like me) that hate this. \u00a0And one of the first things that many people do on a new WordPress install is find a new visual editor plugin to get rid of some of these dumb TinyMCE features that WordPress seems to think we like. \u00a0The WordPress visual editor is NOT a WYSWYG editor, rather a &#8220;What You See Is What WordPress Decided To Give You&#8221; editor.<\/p>\n<p>Ok, rant over.<\/p>\n<h2>The Problem:<\/h2>\n<p>We wanted a rather simple layout:<\/p>\n<ul>\n<li>Bold text heading.<\/li>\n<li>New Line.<\/li>\n<li>Image on the left. \u00a0Text on the right.<\/li>\n<li>New Line<\/li>\n<li>Add a similar block as above<\/li>\n<\/ul>\n<p>This works in WordPress as long as the text on the right is a long enough paragraph to wrap around under the image. \u00a0But if your text on the right is too short, then you get strange floating issues due to how WordPress structures the HTML.<\/p>\n<p>As a web developer, I know I just need to add a simple clear or even a block level element to where I need the new line break to be. \u00a0But given that the settings WordPress gives TinyMCE, this isn&#8217;t possible as most all HTML tags are stripped out, particularity if they are empty.<\/p>\n<figure id=\"attachment_467\" aria-describedby=\"caption-attachment-467\" style=\"width: 500px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example.jpg\" rel=\"attachment wp-att-467\" data-lasso-id=\"238\" data-rel=\"lightbox-gallery-2ktumSZ4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" class=\"size-medium wp-image-467\" src=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example-500x375.jpg\" alt=\"How the WordPress visual editor handles simple text along side of an image layouts.\" width=\"500\" height=\"375\" srcset=\"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example-500x375.jpg 500w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example-768x576.jpg 768w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example-150x113.jpg 150w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example-600x450.jpg 600w, https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example.jpg 800w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/a><figcaption id=\"caption-attachment-467\" class=\"wp-caption-text\">This is an example of my frustration with the WordPress TinyMCE Visual Editor. You want a simple layout, but they don&#8217;t make it easy unless you know a small line of code to add.<\/figcaption><\/figure>\n<h2>The Solution:<\/h2>\n<p>No more complaining &#8211; I did find a solution that does require a small HTML tag, but is rather straightforward.<\/p>\n<ul>\n<li>Click on the\u00a0<strong>Text<\/strong>\u00a0tab in the top right of the editor<\/li>\n<li>Find where you would like the line break, and add the following line of code:\n<pre><code>&lt;br style=\"clear:both;\" \/&gt;<\/code><\/pre>\n<\/li>\n<\/ul>\n<p>That&#8217;s it! \u00a0Often times when you add HTML code to the Text editor, and switch back to the Visual editor your code is removed. \u00a0However WordPress respects this line of code and adds the clear and line break that you desire. \u00a0I know I&#8217;ve wasted too much time trying to figure this one out, so I hope this helps you.<\/p>\n<h2>Update:<\/h2>\n<p>I&#8217;ve recognized one thing: in order for this to work, you need to have the <a href=\"http:\/\/www.laptoptips.ca\/projects\/tinymce-advanced\/\" target=\"_blank\" rel=\"nofollow noopener\" data-lasso-id=\"239\">tinyMCE Advanced<\/a> plugin installed, as well as the option of &#8220;stop removing paragraphs and line breaks&#8221; selected in the tinyMCE Advanced plugin settings. \u00a0But to be honest, even that some times doesn&#8217;t seem to be 100% reliable&#8230;<\/p>\n<p>Despite this overly frustrating issue existing since the begging of WordPress time, and there being countless conversations online and requests to the WP developers for something to be changed here, there still is no out of the box solution to one of the most frustrating issues &#8211; <strong>W<\/strong>hat <strong>Y<\/strong>ou <strong>S<\/strong>ee <strong>I<\/strong>s <strong>W<\/strong>hat <strong>Y<\/strong>ou <strong>G<\/strong>et being extremely far from the truth&#8230;<\/p>","protected":false},"excerpt":{"rendered":"<p>If there is one thing I HATE about WordPress, it&#8217;s their STUPID visual editor and the fact that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":467,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wprm-recipe-roundup-name":"","wprm-recipe-roundup-description":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[5,9],"tags":[],"class_list":["post-466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-development","category-wordpress-development"],"jetpack_featured_media_url":"https:\/\/promincproductions.com\/blog\/wp-content\/uploads\/2014\/10\/Visual-Editor-Example.jpg","jetpack_shortlink":"https:\/\/wp.me\/p4BbcR-7w","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/comments?post=466"}],"version-history":[{"count":5,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions"}],"predecessor-version":[{"id":499,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/posts\/466\/revisions\/499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media\/467"}],"wp:attachment":[{"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/media?parent=466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/categories?post=466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promincproductions.com\/blog\/wp-json\/wp\/v2\/tags?post=466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}