From d101f3a39baa309ce3c84f214c3bc0606ca8f4fc Mon Sep 17 00:00:00 2001 From: tharsheblows Date: Thu, 2 Jun 2022 12:04:21 +0100 Subject: [PATCH] add step for build and asset file There was a missing step in the plain javascript documentation which missed out adding the asset file. Issue https://github.com/WordPress/gutenberg/issues/40447 --- .../writing-your-first-block-type.md | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md index 48f67269641209..cec9ab857dc7fe 100644 --- a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md +++ b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md @@ -133,9 +133,36 @@ Add the following to `block.js` {% end %} -NOTE: If using the JSX version, you need to run `npm run build` and it will create the JavaScript file that is loaded in the editor at `build/index.js` +### Step 4: Build or add dependency -### Step 4: Confirm +In order to register the block, an asset php file is required in the same directory as the directory used in `register_block_type()` and must begin with the script's filename. + +{% codetabs %} +{% JSX %} + +Build the scripts and asset file which is used to keep track of dependencies and the build version. +```bash +npm run build +``` + +{% Plain %} + +Create the asset file to load the dependencies for the scripts. The name of this file should be the name of the js file then .asset.php. For this example, create `block.asset.php` with the following: + +```php + + array( + 'wp-blocks', + 'wp-element', + 'wp-polyfill' + ), + 'version' => '0.1' + ); +``` + + +### Step 5: Confirm Open your editor and try adding your new block. It will show in the inserter using the `title`. When inserted you will see the `Hello World (from the editor)` message.