Try Building a Template Block

[nb]

A super common use-case I‘ve found for blocks has been to build interactive templates users can insert into their post.

Few interesting learnings:

• It was shorter and more powerful than I though. Generating parts of the text based on others was trivial, see the tagify function.
• In order to not duplicate markup, we needed a higher-order function – something we need to make sure developers are familiar with as a pattern.
• It would’ve been a lot easier if I had a “connected” input, which syncs its value with an attribute.
• Building the transformation to a text block was harder than I thought – it required some level of understanding of how React renders components (and wild be harder if we weren't using functional components).

All in all if we provide some connected inputs and a shortcut to the text transform this could be an incredibly useful way of building a whole class of blocks and maybe a good introduction of both users and developers to Gutenberg.

[lkraav]

@nb could you elaborate on what an "interactive template" is in this context?

EDIT thanks for adding the screencast. Very interesting. I hadn't thought of these workflows yet.

[nb]

@lkraav I added a short screencast to show how it works – see how there is a #-tag automatically derived from the name I am adding.

[mtias]

Very neat. With the combination of placeholder blocks and blocks with "fillable" content, it opens a lot of possibilities for content creation. I agree if we can make this simple—the code is very little, if we don't count transformations ;)—it'd be a great benefit.

[nb]

Added few more commits extracting common template functionality:

• <AttributeInput type="text" value={ attributes.baba } attribute="baba" setAttributes={ setAttributes } />
• Easier transforms: transforms: { to: [ transformComponentToText( template( 'save' ) ) ], },. This will make so that transform to core/text uses our save component.

[aduth]

This should be in a separate "WordPress dependencies block":

https://github.com/WordPress/gutenberg/blob/master/docs/coding-guidelines.md#imports

Note with #2172, these need to be updated to prefix the dependencies with @wordpress/. You will need to perform a rebase against the latest version of master and apply your changes:

git fetch origin
git rebase origin/master

[youknowriad]

Not certain about the status of this PR. Also, the intent seems unclear to me. What can we do to unblock this?

[nb]

The intent was to experiment with building some templates and see what abstractions/tools might be useful to include in Gutenberg to help developers create more templates.

In the specific case, I think both AttributeInput and the transform function could be useful and the the template pattern could go in the documentation.

[aduth]

I believe #7352 is related as a since-closed effort to attempt syncing of attributes to input values.

It doesn't appear likely that work here will be resumed, so I'm closing the pull request as stale.