Timber: 'wp_kses_post' escaping and shortcodes in post-content

Created on 2 Sep 2019  路  3Comments  路  Source: timber/timber

Hello,
i am using Timber in a wordpress theme and ran into a problem:
I am using Timber::$autoescape = 'wp_kses_post' for global escaping. When i use shortcodes in the post-/page-content 'wp_kses_post' escapes inputs & selects. which is problematic when you are trying to add e.g. a contact-form via shortcode.

Describe the solution you鈥檇 like

It would be great to somehow pass "allowed_html" to $autoescape like in the original wordpress "wp_kses" function. Another solution might be a pipe filter like "shortcodes_raw" to allow shortcodes to render without escaping

Additional context

A good example is trying to get "Contact Form 7" (which is widely used) shortcodes up and running in a twig template with $autoescape = 'wp_kses_post' set

Any ideas or possible solutions are very welcome,
thanks in advance!

help wanted

All 3 comments

Thanks @jtschulik. Good point, I can see how that would be quite useful. In 2.x we've deprecated Timber::$autoescape to rely more on filters (which should make this easier to extend in new ways). The code for that new logic lives in ...

https://github.com/timber/timber/blob/2.x/lib/Twig.php

... I'm hoping there's a way to set things up to either use wp_kses or its function contents in some way. This definitely isn't my area of expertise though, are you interested in giving a PR a shot?

Thanks @jarednova !
For anyone running into this problem too:
I solved the issue by adding a custom escaper like this:

```php
add_filter( 'timber/twig', function( \Twig_Environment $twig ) {
$twig->getExtension('Twig_Extension_Core')->setEscaper('wp_kses_custom', function($twig, $string, $charset) {
/** get allowed html array */
$allowed_tags = wp_kses_allowed_html( 'post' );

    /** add custom html tags to array */
    $allowed_tags['input'] = array(
        'type' => true,
        'name' => true,
        'value' => true,
        'placeholder' => true,
        'id' => true,
        'class' => true,
        'required' => true,
    );
    $allowed_tags['select'] = array(
        'name' => true,
        'value' => true,
        'id' => true,
        'class' => true,
        'required' => true,
    );
    $allowed_tags['option'] = array(
        'value' => true,
    );
    return wp_kses($string, $allowed_tags);
});
return $twig;

} );

Thanks for posting your solution @jtschulik. There could still be the possibility of extending Timber in the future to make this simpler (PRs welcome!). For now, I think your solution is a great guide for future Googlers

Was this page helpful?
0 / 5 - 0 ratings

Related issues

flip111 picture flip111  路  4Comments

chrisvanmook picture chrisvanmook  路  5Comments

petenorris picture petenorris  路  4Comments

chaimaech picture chaimaech  路  4Comments

JakeHenshall picture JakeHenshall  路  4Comments