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

[cbravobernal]

This should check permissions.

[gziolo]

This is a very interesting experiment. I'm not entirely sure how I feel about the idea of coding the block pattern using HTML and helper functions. I'm more inclined to explore how to build patterns in the editor interface. However, all the necessary pieces are in place for that use case, so this is an excellent start.