UI Breaks inline shortcodes. Adds line breaks.

[brentjett]

The UI treats all registered shortcodes as block level elements and adds line breaks when they are inserted into a sentence. Some shortcodes are meant to be inline and are broken by the visual editor. Example:

Call us at [main_phone] to get started.

This shortcode would be broken into multiple lines by the UI plugin and then saved as:

Call us at

[main_phone]

to get started.

[danielbachhuber]

Some shortcodes are meant to be inline and are broken by the visual editor

I'm filing this as an enhancement, because we've always treated previews as blocks, but inline seems like a reasonable enhancement.

[brentjett]

Ok thanks! For the moment it seems the best way to keep these inline shortcodes from breaking is to not register them with shortcake. Would be great to be able to insert them from the UI like the others. Thanks! Great project. I might be interested in helping.

[bobbingwide]

+1

[bobbingwide]

This additional comment may actually turn out to be the opposite. I have a shortcode which expects to see line breaks in the content. e.g. [bw_csv] Use to display the contents of the shortcode in a tabular form.

[bw_csv]uo= parameter,Format as
default,Table
uo=u,Unordered list
uo=o,Ordered list
uo=d,Definition list
[/bw_csv]

• The heading row immediately follows the shortcode
• Every other row of the table is on a separate line.
• Blank lines are ignored.

When using Insert Post Element > Preview the table displays correctly After Insert Element the new lines are lost.

More often than not Preview in the Visual editor doesn't expand the shortcode. It appears that do_shortcode is not happy with the <br /> in the content. Note: This could be a local environment issue.

In other cases the original content from the Text editor is ruined when switching to Visual and then back again. Obviously I have some more problem determination to perform here!

Suffice it to say shortcake doesn't handle this at all well:

[bw_csv]Shortcode,Inner content
[bw_code bw_csv],[bw_dash yes]
[bw_code bw_geshi],[bw_dash yes]
[bw_code caption],[bw_dash yes]
[bw_code wp_caption],[bw_dash yes]
[/bw_csv]

See what it's supposed to come out as here http://www.oik-plugins.com/shortcode_example/bw_csv-to-create-a-table-with-nested-shortcodes/

[bobbingwide]

Further notes. When the Preview is performed from Insert Post Element then the new line characters are passed in the AJAX call. When the editor requests it the new line characters have been converted into <br />'s. The server end responds as best it can, it's the client end that appears to be broken.

BTW: I also noted some strange behaviour from Jetpack adding unexpected content to the output. I'll investigate this as well.

[nikolov-tmw]

I'm guessing that the code that turns shortcodes into TinyMCE views is at fault here as it fails to accept new lines as possible content for the shortcode's inner_content.

If you can give me a clue where to find that code(I couldn't find it at a quick glance), I can play with it and see if I can make it accept new lines.

[jakejackson1]

+1. Shortcodes can be inline or block level in the editor and shortcake breaks the editor layout for inline elements when active.

[GaryJones]

We've just been bitten by this too. When you're trying to do this:

<h2 class="icon thumbs-up">Hello [dt_show_name display="full_name"],</h2>

...you'll end up with this:

<h2 class="icon thumbs-up">Hello</h2>
[dt_show_name display="full_name"]
<h2 class="icon thumbs-up">,</h2>

[taylorscollon]

Anyone come up with a solution to this? I'd be fine turning off the preview in tinyMCE if that solved it.

[szepeviktor]

I think you could develop a shortcake outputting the whole heading:

<h2 class="icon thumbs-up">Hello %s,</h2>

as [dt_show_greeting display="full_name"]

[brandomeniconi]

I've the same problem, I solved it by manually turning off preview for some shortcodes, by unregistering it's view from wp.mce.views.

I simply add an admin JS script:

function _svbk_admin_scripts(){
    wp_enqueue_script( 'shortcode-ui-patch', get_template_directory_uri() . '/js/shortcode-ui.patch.js', array('shortcode-ui'), true );
}
add_action('admin_enqueue_scripts', '_svbk_admin_scripts' );

with this code inside:

(function($){
    $(document).ready(function(){
        wp.mce.views.unregister('shortcode_tag_foo');
        wp.mce.views.unregister('shortcode_tag_bar'); 
    });
})(jQuery);

this will disable the preview and (also the edit and remove button), but you can still use the UI to create the shortcode.

[lvl99]

I think the fault of this lies in the WordPress MCE View logic.

I have silly <p> tags cropping up inside places where it doesn't need them. I think when the view gets converted to the shortcode version that it just places it on a newline or two and then that gets registered as being a paragraph (and then the removep function in the WordPress JS editor script removes the <p> tags and leaves all the newlines).

One thing I found as well is that the WordPress editor keeps a <p> tag if it is the first child within a <div>. It's here in the wp-admin editor.js file:

// Preserve the first <p> inside a <div>.
html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );

In my use-case I'm using <div>s and finding that extra lines are being added. So I think this is something by WP design, not necessarily at fault with Shortcake.

In my exploration of this issue, I think the main issue is that the WordPress MCE View doesn't distinguish from being inline or block. At this line here you can see that the view marker is inserted within a <p> tag, effectively displaying it as a block element (I managed to use editor styles to overwrite this to make my shortcode's view display as an inline-block, alas, programmatically it's still considered a block element so has all the newlines around it when converting from text/html to visual).

Maybe as a proposed fix for the WordPress MCE View we can create an RFC or a pull-request to enable views to be block or inline (or maybe to even only avoid using the <p> tag?).

[lvl99]

I managed to fix my issue of extra newlines around shortcodes by removing the <p> tags from this line:

function callback( match, $1 ) {
  return '<p>' + window.decodeURIComponent( $1 ) + '</p>';
}

[adaptifyDesigns]

Is there any progress on this enhancement? This would really help me out a lot.

ETA?

[carasmo]

+1

[89gsc]

+1