Namespace for block with hyphen produces: Syntax error, unexpected '-', expecting '{' - line 14

bobbingwide commented 4 years ago

I ran

npm init @webdevstudios/block wds/children-block

to create a new plugin for a block called children-block

The namepace that was generated in the PHP was

namespace wds\children-block;

When I tried to activate the plugin I got the Syntax error

C:\apache\htdocs\wp54\wp-content\plugins>wp plugin activate wds-children-block
Parse error: syntax error, unexpected '-', expecting '{' in C:\apache\htdocs\wordpress\wp-content\plugins\wds-children-block\children-block.php on line 14

Workaround

change the hyphen(s) in the name space to underscore (_).

bobbingwide commented 4 years ago

Some additional information. Having fixed the problem, and before doing anything else I decided to try running the command interactively. The generated code had a different, unexpected value for the namespace.

C:\apache\htdocs\wordpress\wp-content\plugins>npm init @webdevstudios/block
npx: installed 85 in 11.444s
(node:15224) ExperimentalWarning: The fs.promises API is experimental
? The block slug used for identification (also the plugin and output folder name): wds-children-block
? The internal namespace for the block name (something unique for your products): wds
? The display title for your block: Children block
? The short description for your block (optional): List children of the current content as links - WDS
? The dashicon to make it easier to identify your block (optional): smiley
? The category name to help users browse and discover your block: widgets
? The name of the plugin author (optional). Multiple authors may be listed using commas: bobbingwide
? The short name of the plugin’s license (optional): GPL-2.0-or-later
? A link to the full text of the license (optional): https://www.gnu.org/licenses/gpl-2.0.html
? The current version number of the plugin: 0.1.1

Creating a new WordPress block in "wds-wds-children-block" folder.

Installing packages. It might take a couple of minutes.

Compiling block.

Done: block "Children block" bootstrapped in the "wds-wds-children-block" folder.

Expected output

plugin created/ovewritten in wds-children-block
prefix: wds
block name: wds/children-block
namespace: wds\children-block

Actual output

plugin created in wds-wds-children-block
prefix: wds
block name: wds/wds-children-block
namespace: wds\undefined

This is also used for the @package

WIBNI - wouldn't it be nice if

The interactive logic gives you a chance to confirm your responses

bobbingwide commented 4 years ago

Also, I was rather surprised to see that wp-scripts will happily overwrite an existing plugin.

C:\apache\htdocs\wordpress\wp-content\plugins>npm init @webdevstudios/block
npx: installed 85 in 8.307s
(node:34840) ExperimentalWarning: The fs.promises API is experimental
? The block slug used for identification (also the plugin and output folder name): children-block
? The internal namespace for the block name (something unique for your products): wds
? The display title for your block: Children block
? The short description for your block (optional): List children of the current content as links - WDS
? The dashicon to make it easier to identify your block (optional): smiley
? The category name to help users browse and discover your block: widgets
? The name of the plugin author (optional). Multiple authors may be listed using commas: bobbingwide
? The short name of the plugin’s license (optional): GPL-2.0-or-later
? A link to the full text of the license (optional): https://www.gnu.org/licenses/gpl-2.0.html
? The current version number of the plugin: 0.1.1

Creating a new WordPress block in "wds-children-block" folder.

Installing packages. It might take a couple of minutes.

Compiling block.

Done: block "Children block" bootstrapped in the "wds-children-block" folder.

Expected ouput

The target folder ( plugin-slug ) already exists and contains content. Then either:
Press Enter to confirm replacement. or go back and ask the questions again.

Actual output

Existing contents overwritten. Good thing:

I'd already put it under version control
Hadn't made any changes that mattered. See a) Workaround above and b) Actual output for namespace in previous comment.

donmhico commented 4 years ago

Hey @bobbingwide,

Thank you for creating this issue and for providing all the details. Greatly appreciate it! As for the first issue, the scaffolding tool is expecting the format in PascalCase. For example, instead of

npm init @webdevstudios/block wds/children-block

it should be

npm init @webdevstudios/block WDS/ChildrenBlock

Although, I don't see any problems supporting kebab-case as well.

As for the 2nd issue, thanks for catching this. I'll try to create fix as time permits.

Appreciate your time putting this issue together.

bobbingwide commented 4 years ago

BTW: We discussed this, and other things related to scaffolding for blocks, in WP_Hooked last night.
I found the interactive method to be far more intuitive than the parameterised version.

Other requirements for the script are:

to be able to build more than one block in a plugin
to support processes needed for internationalization and localization. Even if only to support UK English

WebDevStudios / create-block