Gutenberg

From 2.0.3

Declare blocks

Edit config/packages/wordpress.yaml

  block:
    title-text:
      title: Title with text
      description: Title with text
      render_template: 'templates/block/acf/title-text.html.twig'
      category: 'layout'
      icon: 'editor-alignleft'
      preview_image: true

    title-text-image:
      title: Title with text and image
      description: Title with text and image
      render_template: 'templates/block/acf/title-text-image.html.twig'
      category: 'layout'
      icon: 'align-left'
      align_text: 'left'
      preview_image: true

To use block preview image feature, save block preview images as /uploads/blocks/{block-name}.png

Use blocks

Include blocks in template from loop

Please note that {{ post.content|raw }} will also display blocks html but for performance reasons, use post.blocks object

{# templates/page.html.twig #}

{% for block in post.blocks %}
    {% include 'block/'~block.name~'.html.twig' with { props: block.content } %}
{% endfor %}

Access block data and attributes

{# templates/block/acf/title-text-image.html.twig #}

<section class="o-title-text-image o-title-text-image--{{ block.align_text }}">
    <div class="container">

        <div class="o-title-text-image__content">
            <h2 class="o-title-text-image__title">{{ props.title }}</h2>
	    <div class="o-title-text-image__text">{{ props.text|raw }}</div>
	</div>
	{% if props.image|default %}
	    <div class="o-title-text-image__image">
	        {{ props.image|picture(585,356) }}
	    </div>
	{% endif %}
    </div>
</section>