📦 NEW: Providing warning on invalid block name — FIX #28

[lukekowalski]

This PR tries to approach issue #28.

To be on the safe side and cover all possible scenarios I started with checking where the user provided blockName is used and what are the limitations of each case:

1. PHP function names:

A valid function name starts with a letter or underscore,
followed by any number of letters, numbers, or underscores. (PHP Manual)

2. Gutenberg's registerBlockType function name argument:
   'Block names must (...) include only lowercase alphanumeric characters or dashes,
   and start with a letter.'

3. wp_enqueue_script handle: - it simply has to be a non-empty string

4. Gutenberg's block title - it has to be a non-empty string too

5. Suffix for .wp-block-cgb-block-${blockName} CSS class:

In CSS, identifiers (including element names, classes, and IDs in selectors)
can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher,
plus the hyphen (-) and the underscore (_)" (W3C)

Now, when we sum up all the above we can come to a conclusion that:

• blockName's first character has to be a letter.
• blockName can contain spaces (ie: 'my awesome block') as they will be replaced by hyphens.
• blockName can contain uppercase letters as it will be converted to lowercase anyway.
• blockName shouldn't contain underscores(_) as they are valid in php, but will cause errors when we are trying to register our block
• starting with 2nd character: blockName can contain dashes (-) [thanks to: <% blockNamePHPLower %>]

Having this in mind I think that following regex should suffice to do the job: /^[a-z][a-z0-9-]/

As I mentioned spaces and uppercase letters are filtered anyway, so I think it's better to put the code after the formatting blockName instead of adding it into regex.

Wow, quite a long output for such a short regex, but hopefully it's good enough.

Cheers 🍻

[ahmadawais]

Looks good to me. Just need to test it. Thanks for the PR. I hope to get more help from you. Welcome as a contributor to this project. 👍👏👋

[lukekowalski]

Pleasure is all mine and I'm glad I was able to put my 2 cents into this cool project. Will do my best to contribute more often 👌👍

[ahmadawais]

@wpjsio ok, tested, it all looks good. Thanks a lot.

I welcome more contributions from your end, take a look at ahmadawais/create-guten-block#33 Roadmap for 2.0.

Also, I'd appreciate if you keep the git commit log in line with https://gist.github.com/ahmadawais/815ea20134cf4616a6b2a965eb08f716

Merged. Thank You! 😇

Peace! ✌️