How to render HTML from variable

Question

I want to render as HTML not string on Twig. I have a variable that hold form HTML but after putting on Twig template it's render as string like given below:

1) Set loginpopup variable in preprocess hook.

function MYTHEMENAME_preprocess_page(&$variables) {
    $variables['loginpopup'] = array(
   '#plain_text' => "<div style='display:none'><div id='login-pop'>".drupal_render($form)."</div></div>"
    );  
   } 

2) Render on Twig template file as :

 {{ loginpopup }}   

But it's visible as string (i.e. double-escaped).. What's the problem and how do I fix it?

Answer 1

You should not render in a preprocess function.

Wrap the additional container around your $form and put this into your variable:

function MYTHEMENAME_preprocess_page(&$variables) {
  $variables['loginpopup'] = array(
    '#type' => 'container',  
    '#prefix' => '<div class="visually-hidden"><div id="login-pop">',
    '#suffix' => '</div></div>',
    'form' => $form,
  )
} 

The style attribute is filtered by the xss filter. You can use the class visually-hidden, this is in drupal predefined.

Answer 2

You should definitely NOT put HTML into render arrays (I'm not saying you cannot (you can with #prefix and #suffix), you just shouldn't - that's D7 thinking). You should define a theme hook/template for that so that you can use your own template. But if you have to use inline template:

$page['noscript'] = [
  '#type' => 'inline_template',
  '#template' => '<noscript><div>{{ message }}</div></noscript>',
  '#context' => [
    'message' => $noscript_message,
  ],
];