• Hi there. I was very excited about this plugin (beautiful clean interface!) but have encountered some very annoying issues.

    When I add certain html tags in the Tailor text editor (e.g. an iframe to embed a YouTube video, or a radio button for a form), they do not display after clicking ‘Apply’. They do appear in the TinyMce visual editor in Tailor, but not in the main window, or on the live site after saving.

    I tried adding them back in the native WP visual editor. They displayed. However, if I edit the content in Tailor again, they disappear!

    Tailor is great for structuring a page, but these issues with basic html tags not displaying renders it unusable for me. Is there a fix for these issues? Are these tags really not supported? (I cant imagine that).

    I am really excited about the potential for this plugin and I hope this is solvable. Any ideas?

    Many thanks for your hard work in creating this plugin!

    • This topic was modified 7 years, 7 months ago by asailaway.
    • This topic was modified 7 years, 7 months ago by asailaway.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Andrew Worsfold

    (@andrewworsfold)

    Hi,

    The reason this is happening is that Tailor uses the wp_kses_post function to restrict which tags are allowable within content for security reasons. input and iframe tags do not appear to be in the list by default, which I agree is odd given that the default WordPress editor seems to accept them, however this could be due to it being an AJAX request and adding them is not difficult.

    Because wp_kses_post essentially acts like a whitelist, one approach would be to add a function like this to your theme or plugin:

    function tailor_kses_allowed_html( $tags, $context ) {
    	if ( ! array_key_exists( 'input', $tags ) ) {
    		$tags['input'] = array(
    			'autocomplete'      =>  1,
    			'autofocus'         =>  1,
    			'checked'           =>  1,
    			'disabled'          =>  1,
    			'name'              =>  1,
    			'placeholder'       =>  1,
    			'readonly'          =>  1,
    			'required'          =>  1,
    			'size'              =>  1,
    			'src'               =>  1,
    			'step'              =>  1,
    			'type'              =>  1,
    			'value'             =>  1,
    			'width'             =>  1,
    		);
    	}
    	return $tags;
    }
    
    add_filter( 'wp_kses_allowed_html', 'tailor_kses_allowed_html', 10, 2 );

    As I agree that inputs should be allowable, I can include something like this in the next release of Tailor. Are there any other HTML tags that you have experienced issues with?

    As an aside: Tailor fully supports oEmbeds, so I would recommend using that functionality over iFrames for embedding content from YouTube, Vimeo etc. where possible.

    Cheers,
    Andrew.

    Thread Starter asailaway

    (@asailaway)

    Hi Andrew,

    Thanks for the function! The form tags are now displaying nicely! 🙂

    Videos do display with oEmbed, however the ability to customise the appearance of videos using url parameters doesn’t work with this method. Whenever I add a parameter, the site displays a text link to the video, as opposed to embedding it. Using shortcodes along these lines:
    https://www.elegantthemes.com/blog/tips-tricks/how-to-embed-youtube-videos-in-wordpress
    also results in the video not displaying.

    I haven’t come across other HTML tags that present an issue (will keep you posted!). However, shortcodes I’ve tried don’t seem to work in the Tailor editor. Do you have any ideas on this?

    I look forward to when the Tailor editor supports all the functionality of the WP TinyMce editor. If that is possible, it will be a truly amazing extension to WP.

    Cheers,
    Anthony

    Thread Starter asailaway

    (@asailaway)

    Appendix to my last post:

    Weirdly, videos added in Tailor using oEmbed don’t display unless I go back to the WP editor and press ‘Update’ there.

    Also, (same as before) if i edit that content box at all in Tailor (for example add a paragraph of text under the video), the video no longer displays.

    Plugin Author Andrew Worsfold

    (@andrewworsfold)

    To take your last point first: Tailor saves the layouts you create as content/HTML which can then be edited in the WordPress editor in the backend. You can alter the content however you like, but the next time you use Tailor the last saved layout will be used (this is because there’s a lot of meta information regarding the layout itself which cannot/should not be stored in the actual content of a post). Some other builders “solve” this problem by restricting access to the editor, but this is something I didn’t want to do.

    oEmbeds should be as simple as copying and pasting links from valid sources (YouTube, Vimeo etc.), however customising those in the ways that you’ve suggested is – admittedly – something I haven’t explored in much detail. Would you mind providing a little more detail about the types of changes you’re making?

    Shortcodes within the editor instances in Tailor are tricky, as they can have unforeseen consequences. I will also look into this though. Do you have examples of the types of shortcodes that you’ve tried (I know, for example, the default gallery shortcode works)?

    Thread Starter asailaway

    (@asailaway)

    Thanks for taking the time to reply so thoroughly. A few questions:

    Tailor saves the layouts you create as content/HTML which can then be edited in the WordPress editor in the backend. You can alter the content however you like, but the next time you use Tailor the last saved layout will be used

    Suppose I use Tailor to create some content and then save. Then I add some more content and layout elements in the native WP editor. Does this mean that content that is altered/added in the WP editor will evaporate as soon as I edit again in Tailor?

    The YouTube parameters I wanted to use (in this case) were &autoplay=1 and &rel=0
    Full ist here: https://developers.google.com/youtube/player_parameters#Embedding_a_Player

    As far as shortcodes go, so many plugins use shortcode as a means of adding fuctionality to a page (such as this popular plugin: https://wordpress.org/plugins/shortcodes-ultimate/) that it is very restrictive to loose access to this possiblity.

    Tailor provides very impressive functionality – great job – I’ve rarely been so impressed. It is frustrating that it limits access to other non-Tailor functionality, however, be that shortcodes, html tags such as iframes or access to other plugins.

    If I have understood correctly, Tailor overwrites changes made in the native WP editor on save. I like the idea of the user still having access to the native WP editor, where the user can perhaps add functionality not compatible with Tailor. It strikes me as a fairly high risk that a page will revert to a previous Tailor-saved version if the user inadvertently makes a change and saves in Tailor, however.

    Best,
    Anthony

    Plugin Author Andrew Worsfold

    (@andrewworsfold)

    Hi Anthony,

    Sorry for the delayed response.

    Manual changes made to a page with a “Tailored” layout in the editor will not be reflected in Tailor for the reason I mentioned, however as Tailor fully supports post revisions those changes certainly do not “evaporate”. The alternative of hiding the editor for Tailored posts is something I’m exploring as an option for some people to opt-in to on the Settings page and is something other builders use to get around the problem of content not containing all of the necessary layout meta information.

    Shortcodes should work okay, but I will take a look at the Shortcodes Ultimate plugin to confirm. Any conflicts I find I will seek to address in an upcoming release of Tailor.

    Cheers,
    Andrew.

    Plugin Author Andrew Worsfold

    (@andrewworsfold)

    Hi Anthony,

    Shortcodes Ultimate seems to work fine with Tailor. I was able to add shortcodes into the Content element and have them appear correctly. Were you encountering any specific issues with the plugin?

    Cheers,
    Andrew.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘HTML added in Tailor not displaying (e.g. iframe)’ is closed to new replies.