The right way to check for empty content in Twig
Have you ever used {% if content|render|trim is not empty %} in twig to validate content is not empty?
If so, you might end up with some surprises related to the use of the render method.
by
mohit.aghera
/ 2 June 2022
Introduction
Checking that content is not empty before rendering is good practice. Typically we call the “trim” method as well so all the space gets trimmed and we get an accurate indication if the content is empty.
Usually, developers uses snippet like <span>{% if content|render|trim is not empty %}</span> to ensure that content is not empty.
Recently while working on one of our projects, the client informed us that Webform was having issues with Recaptcha and was throwing errors related to invalid tokens. To debug further, we disabled recaptcha handler and saw that Webform submissions were being recorded twice.
While debugging further, we noticed that all the things were working as expected for Webform and simple_recaptcha module’s Webform handler. So both of those causes were out of the picture.
We'd experienced a similar issue before, and in that case the cause was a <span>[node:description]</span> tag from Metatags that was rendering the embedded Webform. At first we thought this might have been the case, but debugging revealed that Metatags was not in the mix this time.
During debugging further around rendering process, we noticed that <span>render()</span> was being called twice. Rendering twice was causing issues with recaptcha tokens. Because the second render was invalidating the original recaptcha token.
Upon debugging further we found the following twig templates code was causing issues.
​​{% if content|render|trim is not empty %} <div attributes> <br><code> <div region_attributes.content> <br><code> {{ content.content }} </code></div> {% endif %}
Here, if you notice the block {% if content|render|trim is not empty %} that we are calling render method of TwigExtension.php. So this was rendering the content the first time and then the second time we are actually rendering the content using {{ content.content }}. So this second render was invalidating the previous token generated by the Webform handler.
Solution
As the use of the <span>render</span> function was causing issues we need to use a different approach to validate the issue.
In such situations twig’s <span>set</span> tag comes to the rescue.
We can use it in conjunction with the spaceless twig filter to only render the content once. The spaceless filter makes sure we don't get a false positive from whitespace, just like the trim function did before.
So we can refactor above twig snippet using the <span>set</span> tag and the <span>spaceless</span> filter like this:
<span>{% set content_render %}{% apply spaceless %}</span><span> {{ content.content }}</span><span>{% endapply %}{% endset %}</span><span>{% if content_render is not empty %}</span><span> <div attributes><br><code><span> <div region_attributes.content><br><code><span> {{ content_render }}</span><span> </span><span> </span><span>{% endif %}</span>
By using this approach, we can achieve the same thing as the original approach, but with only one render.
Conclusion
The <span>set</span> tag in conjunction with the <span>spaceless</span> filter allows us to safely render a variable, remove any whitespace between HTML tags and then use that as a variable to evaluate if the output is empty. If not, we can just output the already-rendered variable and in doing so avoid additional render in our twig templates.
Tagged