Code patterns: Initial experiment.

[cbravobernal]

What

This past week, I’ve been experimenting with different approaches for creating patterns. My requirements were:

• No JavaScript needed.
• No writing block comments in HTML.
• Use block bindings (otherwise it won’t work with post data, since pattern registration happens on the init hook).
• Use just HTML tags and the get_field() function to replicate block rendering templates.
• Ability to use PHP conditionals and loops.

The Experiment

I decided to go with the PHP route—it’s simpler and handles loops and conditionals easily. But there are caveats:

We don’t have post context available when registering a pattern.
ACF creates custom blocks as entire patterns and treats each field as an “editable part.” We want to stick with standard blocks inside standard patterns.
I am avoiding parsing the PHP file content. If I was to do that, I'd need to parse the HTML, process the PHP, and then merge everything. That way I could:

• Convert get_field() calls into bindings.
• Convert HTML tags into block markup.

Instead, I went for a “just use PHP functions” approach. For example:

echo experimental_create_block_with_binding('h4', [
  ['attribute' => 'content', 'field' => 'videogame_title']
]);

This outputs:

<!-- wp:heading {"level":4,"metadata":{"bindings":{"content":{"source":"scf/experimental-field","args":{"field":"videogame_title"}}}}} -->
<h4 class="wp-block-heading"></h4>
<!-- /wp:heading -->

This code:

echo experimental_create_block_with_binding('figure', [
  ['attribute' => 'id', 'field' => 'videogame_image'],
  ['attribute' => 'url', 'field' => 'videogame_image'],
  ['attribute' => 'alt', 'field' => 'videogame_image'],
  ['attribute' => 'title', 'field' => 'videogame_image'],
]);

Outputs:

<!-- wp:image {"width":"282px","height":"auto","sizeSlug":"full","linkDestination":"none","metadata":{"bindings":{"id":{"source":"scf/experimental-field","args":{"field":"videogame_image"}},"url":{"source":"scf/experimental-field","args":{"field":"videogame_image"}},"alt":{"source":"scf/experimental-field","args":{"field":"videogame_image"}},"title":{"source":"scf/experimental-field","args":{"field":"videogame_image"}}}}} -->
<figure class="wp-block-image size-full is-resized"><img src="#" alt="" style="width:282px;height:auto"/></figure>
<!-- /wp:image -->

While this works, the developer experience still isn’t as smooth as classic themes.

We can now use the full power of block bindings with our new source, scf/experimental-field. That means fields can be edited directly in the editor UI.

Better yet, those inputs can live in the post sidebar (instead of being buried in metaboxes).

patterns_demo.mov