Skip to main content

Raw javascript expressions

danger

Experimental features are subject to change, or their may be dropped entirely, depending on feedback and stability. Use with caution.

Using the special $$...$$ escape sequence, it is possible to use raw javascript expressions inside the editor for every elements attributes.

To use a raw JSX expression anywhere else, you can use the $$$...$$$ escape sequence as a last resort. Please keep in mind that this is still an experimental API and is subject to changes.

block.html
<section>
  <block-attribute name="title" type="string"></block-attribute>
  <block-attribute name="postType" default="pages"></block-attribute>

  <div data-display="editor">
    <!-- This will update the title attribute -->
    <input
      type="text"
      value="$${attributes.title}$$"
      onChange="$${(e) => setAttributes({ title: e.target.value })}$$"
    />

    <!-- This will update the postType attribute -->
    <select
      value="$${attributes.postType}$$"
      onChange="$${(e) => setAttributes({ postType: e.target.value })}$$"
    >
      <option value="posts">Posts</option>
      <option value="pages">Pages</option>
    </select>

    <p>The selected post type is $$${attributes.postType}$$$.</p>
  </div>

</section>