Environment

Last modified: April 17 2024.

Sometimes it is necessary to show content in your blocks exclusively when it is being rendered inside the Gutenberg editor and not on the frontend. This technique is very useful to provide users with helpful information and placeholders if the necessary data hasn't been input yet.

Editor

index.php

index.twig

              <div x-bind="content" data-index="1">
      <!--blockstudio/blockstudio-element/code--><pre
class="blockstudio-element-code language-php"
data-language="php"><code>
      &lt;?php if ($isEditor) : ?>
This content is only going to be rendered inside the editor.

<?php else : ?> This content is only going to be rendered on the frontend. <?php endif; ?><div role="button" class="blockstudio-element-codecopy"><span class="blockstudio-element-codecopy-text">Copy

  </div>
      <div x-bind="content" data-index="2">
      <!--blockstudio/blockstudio-element/code--><pre
class="blockstudio-element-code language-twig"
data-language="twig"><code>
      {&#37; if isEditor &#37;}
This content is only going to be rendered inside the editor.

{% else %} This content is only going to be rendered on the frontend. {% endif %}

  </code><div
    role="button"
    class="blockstudio-element-code__copy"><span class="blockstudio-element-code__copy-text">Copy</span><span class="blockstudio-element-code__copy-check"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span></div></pre>

  </div>
  </div>

Preview

Blockstudio adds another environment variable that will come in handy for block developers. $isPreview allows you to conditionally render content inside the block preview window when hovering over a block inside the block inserter.

index.php

index.twig

              <div x-bind="content" data-index="1">
      <!--blockstudio/blockstudio-element/code--><pre
class="blockstudio-element-code language-php"
data-language="php"><code>
      &lt;?php if ($isPreview) : ?>
This content is only going to be rendered inside the block preview.

<?php else : ?> This content is only going to be rendered on the frontend and editor. <?php endif; ?><div role="button" class="blockstudio-element-codecopy"><span class="blockstudio-element-codecopy-text">Copy

  </div>
      <div x-bind="content" data-index="2">
      <!--blockstudio/blockstudio-element/code--><pre
class="blockstudio-element-code language-twig"
data-language="twig"><code>
      {&#37; if isPreview &#37;}
This content is only going to be rendered inside the block preview.

{% else %} This content is only going to be rendered on the frontend and editor. {% endif %}

  </code><div
    role="button"
    class="blockstudio-element-code__copy"><span class="blockstudio-element-code__copy-text">Copy</span><span class="blockstudio-element-code__copy-check"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg></span></div></pre>

  </div>
  </div>