Add a dynamic render template to the block scaffold

[johnbillion]

Gutenberg blocks can optionally have a corresponding dynamic template that gets rendered server side. An example of this is the rendering of the Latest Posts block that's included in Gutenberg: https://github.com/WordPress/gutenberg/blob/5b85f851c3b132d6122979aa121bd24f74e73131/blocks/library/latest-posts/index.php

The wp scaffold block command should include a template for dynamic block rendering and can be appended to the bottom of block-php.mustache.

Example:

/**
 * Renders the `foo/bar` block server side.
 *
 * @param array  $attributes The saved block attributes.
 * @param string $content    The saved block content.
 * @return string Returns the post content with foo/bar block output added.
 */
function render_block_foo_bar( array $attributes, $content ) {
	$output = sprintf(
		'<hr>%s',
		$content
	);

	return $output;
}

register_block_type( 'foo/bar', array(
	'render_callback' => 'render_block_foo_bar',
) );

[schlessera]

We will probably end up with several variations of blocks to be scaffolded, as it doesn't make sense to cover everything at the same time in one block.

Do you think this is something that is always useful, or should we hide this behind an argument/addition command, like --with-server-side-rendering or similar?

[johnbillion]

If I had to guess I'd say it's something that most people developing a custom block would find useful, but that's only a guess.

[gziolo]

We have an official repository with Gutenblock examples. There are also a few repositories with other good examples how to build blocks:

• [Repo for Zac Gordon's Gutenberg Development Course](https://github.com/zgordon/gutenberg-course by @zgordon
• WordPress Gutenberg Boilerplate by @ahmadawais

So we can add much more JS templates hidden under the flag. In other places we discussed having --template flag which would load a different Mustache template for block.js file. I'm not sure what would be the best way to handle registering server-side function, but it might make sense to follow @schlessera advice and put it in a separate Mustache template and conditionally include in the existing PHP template as variable or sth like that.

I need to mention also here, that there is an official page Creating dynamic blocks in the Gutenberg handbook.

[gziolo]

I worked on the initial implementation of wp scaffold block, but as I'm busy with other tasks at the moment I would like to leave some pointers to other people that would like to contribute.

This is how you set up repository. It includes also Behat configuration which is used to verify if block scaffolding works as expected.

PHP part responsible for the block command's logic:

• https://github.com/wp-cli/scaffold-command/blob/master/src/Scaffold_Command.php#L264

Mustache templates:

• https://github.com/wp-cli/scaffold-command/blob/master/templates/block-php.mustache
• https://github.com/wp-cli/scaffold-command/blob/master/templates/block-block-js.mustache
• https://github.com/wp-cli/scaffold-command/blob/master/templates/block-editor-css.mustache
• https://github.com/wp-cli/scaffold-command/blob/master/templates/block-style-css.mustache

Test file:

• https://github.com/wp-cli/scaffold-command/blob/master/features/scaffold-block.feature

To refresh the README file:

Install the wp-cli/scaffold-package-command package:

wp package install wp-cli/scaffold-package-command

Run the wp scaffold package-readme command in the command's root folder:

wp scaffold package-readme . --force

I'm also leaving links to other PRs related to wp scaffold block: #96, #107, #111.

[corsonr]

Just adding my 2 cents here to say that adding --with-server-side-rendering would be a nice addition since in many cases it will be needed. @schlessera

[danielbachhuber]

wp scaffold block is deprecated, so we won't be adding more to it.