Block - Block styles

Open the live code editor

Edit this code to see the generated Gutenberg block files.

block.html

<section
  data-styles="default dark"
  class="[.is-style-dark]:bg-black [.is-style-dark]:text-white"
></section>

<section
  data-styles="default dark"
  class="[.is-style-dark]:bg-black [.is-style-dark]:text-white"
></section>

<section
  data-styles="default dark"
  class="[.is-style-dark]:bg-black [.is-style-dark]:text-white"
></section>

edit.js

render.php

block.json

index.js

Define block styles

block.html

block.html

<section data-styles="default dark"></section>

edit.js

render.php

block.json

index.js

Use TailwindCSS with block styles

block.html

block.html

<section
  data-styles="default dark"
  class="[.is-style-dark]:bg-black [.is-style-dark]:text-white"
></section>

edit.js

render.php

block.json

index.js