Blocks

Creating Blocks

Blocks are reusable Gutenberg blocks written as TemplateX view files.

Create A Block#

Blocks live in resources/views/blocks:

phpresources/views/blocks/notice.php
<section>  <h2>Hello block</h2></section>

This creates a block named Notice in the editor.

Add Fields#

Use front matter when the block needs editor controls:

phpresources/views/blocks/hero.php
title: Herocategory: Sectionsfields:  heading: text  intro: textarea---<section>  <h2>{{ heading }}</h2>  <p>{{ intro }}</p></section>

The part above --- describes the block. The part below --- is the rendered markup.

Front Matter Fields#

Use these fields above the --- separator:

FieldPurpose
titleThe block label shown in the editor.
nameAlternative label source when title is not set.
descriptionShort description for the block inserter.
iconDashicon name for the block.
categoryInserter category. TemplateX saves it as kebab-case.
fieldsEditor fields for editable values. See Block Fields.
variantsEditor options that can change markup or classes. See Block Variants.
showLimits where the block appears in the editor. See Block Show Rules.
auto_editableLets TemplateX infer editable content from simple HTML. See Auto Editable Blocks.

Read Field Values#

Block fields work like other TemplateX values:

php
<h2>{{ heading }}</h2><p>{{ intro }}</p>

TemplateX escapes field values for where they appear, then compiles the block to native WordPress PHP.

Keep Blocks Small#

A good block owns one editable piece of the page. Use partials when a block shares markup with templates or other blocks:

phpresources/views/blocks/featured-post.php
title: Featured Postcategory: Sectionsfields:  eyebrow: text---<section>  <p>{{ eyebrow }}</p>  <PostCard /></section>