Bug Report

Expected Behavior

I wanted to install create-guten-blocks by running the npx create-guten-blocks my-block command.

Actual Behavior

I expected to install the create-guten-block plugin, but when I try to run the "npx create-guten-block my-block" It throws me the next error after a while:

Error: Command failed: npm install cgb-scripts --save --save-exact --silent

at makeError (/home/vagrant/.npm/_npx/4487/lib/node_modules/create-guten-block/node_modules/execa/index.js:169:9)

at Promise.all.then.arr (/home/vagrant/.npm/_npx/4487/lib/node_modules/create-guten-block/node_modules/execa/index.js:274:16)

at processTicksAndRejections (internal/process/next_tick.js:81:5)

I am sorry if im not able to provide further information, this is as far as I got into the plugin, I cant seem to be able to install it at all, let alone use it!!

Steps to Reproduce

(Write your steps here:)

1. Go to the plugins directory on the project.
2. Open the command line
3. Run "npx create-guten-block my-block"

1. node -v: 6.9.0

2. npm -v: v11.10.1

3. yarn --version (if you use Yarn): N/A

4. npm ls cgb-scripts (if you haven’t ejected): N/A

5. Operating system: Ubuntu 18.04.1 LTS

6. Browser and version (if relevant): N/A

Possible Solution

It seems to me that the error is when Im installing all the cgb-scripts, but I dont know what is causing the issue.

I would appreciate any help to start working on the plugin as fast as possible, Thank you in advance!

Hi,

I just tried this plugin, but sometimes it fails, sometimes it fails with errors, and it create two folders, one with name I given, and other nammed -p

Thanks

Bug Report

Expected Behavior

After creating / enabling my first guten-block plugin I inspected the pages source code to see at which position my frontend stylesheet for the new block gets included. To my surprise there wasn't just one new file but 6 instead.

Actual Behavior

The other 5 stylesheets are for the editor only (at least I think so? correct me if I'm wrong ;)), so they shouldn't be there at all.

• wp-editor-font-css
• wp-components-css
• wp-block-editor-css
• wp-nux-css
• wp-editor-css

Head before enabling the plugin:

Head after enabling:

Steps to Reproduce

1. Create a block
2. Look at frontend source
3. Enable Plugin / Refresh page
4. Compare =)

• node: v10.16.3
• npm: v6.9.0
• system: Windows 10
• browser: Chrome v76.0.3809.100

I've also tested this on a new WP installation with default theme and no plugins active.

Bug Report

I've been testing the latest version of Wordpress (beta 5) but when it comes to test the create-guten-block toolkit with this release, I notice that, in the front-end, the stylesheet isn't loaded and therefore that block styles are not rendered. I've followed the very same instructions to create a Gutenberg block and also I've tested the example block that comes with it and this behavior persist. I wonder if it has something to do with the enqueue function or maybe something else. I've been poking around in the init.php file in order to get this to work with no luck. However, the toolkit works fine with the Gutenberg plugin and it renders the styles for both, editor and front-end

Expected Behavior

It is expected that the toolkit render the styles for both editor and front-end. Just like it does when it is used with gutenberg's plugin.

Actual Behavior

The stylesheet is not loaded in the front-end. Seems like the enqueue function is not working properly.
This is how it looks in the editor:

And this is how it looks in the front-end

I've verified and double checked the class and the fact that the plugin stylesheet is not loaded in the front-end

Steps to Reproduce

You only need a fresh installation of the latest release of Wordpress 5.0 beta 5 which can be downloaded from this link: https://wordpress.org/news/2018/11/wordpress-5-0-beta-5/ and create a new block with create-guten-block toolkit. (Write your steps here:)

1. Create a block with npx create-guten-block my-block

2. Activate the resulting plugin in the plugin's manager

3. Create a new post and insert the new block

4. Save / Publish the post and go to front-ed to see if your block is styled as expected

5. node -v: 8.10.0

6. npm -v: 6.4.1

7. yarn --version (if you use Yarn):

8. npm ls cgb-scripts (if you haven’t ejected): 1.11.1

Then, specify:

1. Operating system: Mac OSX High Sierra

Possible Solution

Reproducible Demo

Since I'm working on a local environment, I can't share a Reproducible Demo.

Bug Report

Expected Behavior

WordPress dependencies should be @imported correctly.

Actual Behavior

Import error:

Module not found: Can't resolve '@wordpress/blocks' in '[...]/slider-block/src/slider'

Steps to Reproduce

1. Add some imports for Gutenberg core modules:

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { PanelBody, RangeControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
import {
	InspectorControls,
	InnerBlocks,
} from '@wordpress/editor';

2. Build (or watch) and notice in terminal the import error:

Module not found: Can't resolve '@wordpress/blocks' in '[...]/slider-block/src/slider'

1. node -v: v8.11.4
2. npm -v: 5.6.0
3. yarn --version (if you use Yarn): 1.9.4
4. npm ls cgb-scripts (if you haven’t ejected):

[email protected] [...]/slider-block
                     └── UNMET DEPENDENCY [email protected]

I ensured it is installed by using yarn add --dev [email protected]. I used npm for installing the dependencies instead of yarn and the error message went away, npm ls seems to have compatibility issues with yarn dependency installations. This doesn't seem to be related to the reported issue.

Then, specify:

1. Operating system: Windows 10 Pro x64, WSL (Bash on Windows)
2. Browser and version (if relevant): (Not relevant / applicable, node/terminal)

Reproducible Demo

Create empty boilerplate app and add these imports to ./src/<block-name>/block.js:

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { PanelBody, RangeControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { createBlock } from '@wordpress/blocks';
import {
	InspectorControls,
	InnerBlocks,
} from '@wordpress/editor';

This is to address an issue I created: #163

This is primarily a dependency update but also includes code changes to the eject.js file for the ejected package.json.

This code includes the similar changes made in @asharirfan's fork(https://github.com/ahmadawais/create-guten-block/commits/asharirfan/webpack-4).

One thing I did not see that I expected to make changes to is the babel configuration used in the build and start tasks. If I missed that and need to add the updated plugins and presets to that as well, let me know.

EDIT: I've tested this with my own project using multiple blocks.

Thanks, team! 💖

Hi 👋

I am creating this PR as a module for #11, and in it, I have updated the webpack from version 3.1.0 to 4.29.6

Screenshots

Here are the GIF and screenshot of my tests:

I am not sure if this is a bug or an intended behavior but I when I start the script "npm start", I do get a message in my terminal that the files are being watched.

Currently, whenever I save a file (.js), I don't get any feedback on the terminal if the files have been successfully generated/compiled. So, I just assume that it was a success and need to load the browser and check the console if there are any errors.

I do see that "npm run build" would show the status of the compiled files.

If that's intended, then nevermind this ;)

Bug Report

Trying to include create-guten-block in a larger project via yarn workspaces. I'm assuming this is a problem with conflicting babel versions, but this "shouldn't happen".

The directory layout is like this:

project/
    create-guten-block/
    other-package1/
    other-package2/

start yields this:

❌   Failed to compile.

👉  ./src/blocks.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In /[...]/node_modules/babel-preset-cgb/index.js
    at Array.map (<anonymous>)

I'll update this issue if I can track this bug down.

This is in the production build configuration:

devtool: 'cheap-eval-source-map'

and produces eval'ed code in the built JS files.

This is okay with development, but should not be present in the production builds.

I can run create-guten-block in my home directory;

` 📦 Creating a WP Gutenberg Block plugin called: testblock

In the directory: /home/andrewspiers/testblock This might take a couple of minutes.

✔ 1. Creating the plugin directory called → testblock ✔ 2. Installing npm packages... ✔ 3. Creating plugin files...

✅ All done! Go build some Gutenberg blocks.

CGB (create-guten-block) has created a WordPress plugin called testblock that you can use with zero configurations #0CJS to build Gutenberg blocks with ESNext (i.e. ES6/7/8), React.js, JSX, Webpack, ESLint, etc.

Created testblock plugin at: /home/andrewspiers/testblock ` However, when I run the same command in the Apache directory (/var/www/html/wp-content/plugins). I get the following error;

`📦 Creating a WP Gutenberg Block plugin called: testblock

In the directory: /var/www/html/wp-content/plugins/testblock This might take a couple of minutes.

⠋ 1. Creating the plugin directory called → testblock mkdir: cannot create directory testblock: Permission denied cd: no such file or directory: /var/www/html/wp-content/plugins/testblock /usr/local/lib/node_modules/create-guten-block/index.js:60 throw err; ^

ShellJSInternalError: EACCES: permission denied, open '.gitignore' at Object.fs.openSync (fs.js:663:18) at touchFile (/usr/local/lib/node_modules/create-guten-block/node_modules/shelljs/src/touch.js:68:19) at /usr/local/lib/node_modules/create-guten-block/node_modules/shelljs/src/touch.js:47:5 at Array.forEach () at Object._touch (/usr/local/lib/node_modules/create-guten-block/node_modules/shelljs/src/touch.js:46:9) at Object.touch (/usr/local/lib/node_modules/create-guten-block/node_modules/shelljs/src/common.js:384:25) at module.exports (/usr/local/lib/node_modules/create-guten-block/app/createGitignore.js:13:8) at Promise (/usr/local/lib/node_modules/create-guten-block/app/createPluginDir.js:47:10) at new Promise () at module.exports (/usr/local/lib/node_modules/create-guten-block/app/createPluginDir.js:44:10) `

The command run in both circumstances is "create-guten-block testblock"

Hi folks,

The create-guten-block project was a labor of love and I personally don't use it any more which is why I find less and less time to manage and improve upon it. While I'd like to think this project paved the way for other projects like wp-scripts and wp-blocks, there's value in maintaining this project.

If you're interested in improving the overall health of this project, please respond to this issue. It would require a great deal of technical insights into the WordPress ecosystem as well as JavaScript projects like webpack, React, and more.

Peace! ✌️

Can a developer on this project please explain what is going on here with this function name format on your init.php file, which throws an error in VSCode....

Line 30:

 function <% blockNamePHPLower %>_cgb_block_assets() { // phpcs:ignore
	// Register block styles for both frontend + backend.
	.....
}

why is the function name setup that way in this php file?????? its a problem. how do we fix that? function <% blockNamePHPLower %>

why would anyone write a function name that way in a php file?????

what would be an alternative way to bring blockNamePHPLower into this area, without the invalid naming convention used above?

I ran the command npx create-guten-block arion-related-posts as suggested, in wp-content/plugins, The installation took a minute, and after that, the arion-related-posts folder had 2 files.

package.json

{
  "name": "arion-related-posts-cgb-guten-block",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "cgb-scripts start",
    "build": "cgb-scripts build",
    "eject": "cgb-scripts eject"
  }
}

and a .gitignore for the node_modules

The scripts, don't seem to be working either.

I have: Node version 16.13.0 NPM version 8.1.0 Windows 10

Bug Report

Expected Behavior

I've created a fairly simple block that imports some features from the @wordpress package (example below).

However when I try to compile it fails with this error:

I already tried a bunch of stuff to overcome this, but none was successful.

• Eject the block and try to add the preset @babel/preset-react , @babel/preset-env, etc
• Update babel
• Change babel plugins options
• etc

Actual Behavior

(Write what happened. Please add screenshots!)

Steps to Reproduce

(Write your steps here:)

1. Bootstrap a block
2. npm install @wordpress/block-editor --save
3. Import something from the @wordpress package
4. Try to run: npm start

1. node -v: 12.8.1
2. npm -v: 6.14.5

Then, specify:

1. Operating system: Windows 10
2. Browser and version (if relevant):

Possible Solution

Reproducible Demo

I'm attaching a zip file with a reproducible demo, not ejected. Link: https://drive.google.com/file/d/18UlVUdzxDwj8GdfQ3USN5kJ9oR1uVMMI/view?usp=sharing

(Paste the link to an example project and exact instructions to reproduce the issue.)

Starting in WordPress 5.8 release, the use of block.json was encouraged. Create-guten-block does not have support for block.json which will cause custom block styles to not load. This can be tested by activating the Gutenberg plugin (to use the latest editor updates) Editor style and style must be defined in block.json metadata.