From 3a248988e1910df2666bdc95a5bd1859f013f643 Mon Sep 17 00:00:00 2001 From: Ryan Welcher Date: Thu, 4 Apr 2024 15:06:00 -0400 Subject: [PATCH] [Create Block] Adding documentation for the transformer property (#60445) * Adding documentation for the transformer property * Remove unneeded line of code in example. Co-authored-by: ryanwelcher Co-authored-by: justintadlock Co-authored-by: gziolo --- .../create-block/docs/external-template.md | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/create-block/docs/external-template.md b/packages/create-block/docs/external-template.md index a964d825645080..724f8b7f4e6175 100644 --- a/packages/create-block/docs/external-template.md +++ b/packages/create-block/docs/external-template.md @@ -104,6 +104,32 @@ The following configurable variables are used with the template files. Template - `style` (default: `'file:./style-index.css'`) – a frontend and editor style definition. - `render` (no default) – a path to the PHP file used when rendering the block type on the server before presenting on the front end. - `customBlockJSON` (no default) - allows definition of additional properties for the generated block.json file. +- `transformer` (default: `( view ) => view` ) - a function that receives all variables generated by the create-block tool and returns an object of values. This function provides the ability to modify existing values and add new variables. + +#### `transformer` examples + +This examples adds a generated value to the slug variable. + +```js +transformer: ( view ) => { + const hex = getRandomHexCode(); + return { + ...view, + slug: `${ view.slug }-${ hex }`, + }; +}, +``` + +This example creates a new custom variable that can be used in the associated mustache templates as `{{customVariable}}` + +```js +transformer: ( view ) => { + return { + ...view, + customVariable: `Custom Value`, + }; +}, +``` ### `variants`