πŸ“¦ A zero-configuration #0CJS developer toolkit for building WordPress Gutenberg block plugins.

Overview

create-guten-block


create-guten-block

create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.

DOWNLOADS Learn Node.js CLI Automation Follow @MrAhmadAwais on Twitter


πŸ“¦ create-guten-block

create-guten-block is zero configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, webpack, ES6/7/8/Next, ESLint, Babel, etc.

Create Guten Block is not like other starter-kits or boilerplates. It's a developer's toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code.

create-guten-block is:


Start

GETTING STARTED!

Let's create a WordPress block plugin...

⚑️ Quick Overview

Run step #1 and #2 quickly in one go β€” Run inside local WP install E.g. /wp.local/wp-content/plugins/ directory.

npx create-guten-block my-block
cd my-block
npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

πŸŽ› If you want to study the detailed installation of step #1 and #2 β€” then take a look at the steps below.

STEP #0 β€” Don't have Node.js + npm installed? Read this. (CLICK TO EXPAND!)

In case you are an absolute beginner to the world of Node.js, JavaScript, and npm packages β€” all you need to do is go to the Node's site download + install Node on your system. This will install both Node.js and npm, i.e., node package manager β€” the command line interface of Node.js.

You can verify the install by opening your terminal app and typing...

node -v
# Results into v9.1.0 β€” make sure you have Node >= 8 installed.

npm -v
# Results into 5.6.0 β€” make sure you have npm >= 5.3 installed.

β†’ STEP #1

All you have to do is run the following command and it will create a WordPress block plugin. It's done by installing and running the create-guten-block command and providing it with a unique name for a WordPress plugin that will get created.

⚠️ Make sure run this command in your local WordPress install's plugins folder i.e. /local_dev_site.tld/wp-content/plugins/ folder β€” since this command will produce a WordPress plugin that you can go to WP Admin β–ΆοΈŽ Plugins to activate.

npx create-guten-block my-block

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npx block

It'll take a couple of minutes to install.

You’ll need to have Node >= 8 and npm >= 5.3 on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

It will create a directory called my-block inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

INSIDE: /local_dev_site.tld/wp-content/plugins/my-block

β”œβ”€β”€ .gitignore
β”œβ”€β”€ plugin.php
β”œβ”€β”€ package.json
β”œβ”€β”€ readme.md
|
β”œβ”€β”€ dist
|  β”œβ”€β”€ blocks.build.js
|  β”œβ”€β”€ blocks.editor.build.css
|  └── blocks.style.build.css
|
└── src
   β”œβ”€β”€ block
   |  β”œβ”€β”€ block.js
   |  β”œβ”€β”€ editor.scss
   |  └── style.scss
   |
   β”œβ”€β”€ blocks.js
   β”œβ”€β”€ common.scss
   └── init.php

No configuration or complicated folder structures, just the files you need to build your app.

β†’ STEP #2

Once the installation is done, you can open your project folder and run the start script.

Let's do that.

cd my-block
npm start

You can also use yarn start if that's your jam.

cgb-npm-start

This runs the plugin in development mode. To produce production code run npm run build. You will see the build messages, errors, and lint warnings in the console.

And just like that, you're building your next WordPress plugin with Gutenberg, React.js, ES 6/7/8/Next, transpiled with Babel, which also has ESLint configurations for your code editor to pick up and use automatically.


More

Workflow!

There are just three scripts that you can use in your create-guten-block workflow. With these three scripts, you can develop, build, and eject your plugin.

πŸ‘‰ npm start

  • Use to compile and run the block in development mode.
  • Watches for any changes and reports back any errors in your code.

πŸ‘‰ npm run build

  • Use to build production code for your block inside dist folder.
  • Runs once and reports back the gzip file sizes of the produced code.

πŸ‘‰ npm run eject

  • Use to eject your plugin out of create-guten-block.
  • Provides all the configurations so you can customize the project as you want.
  • It's a one-way street, eject and you have to maintain everything yourself.
  • You don't normally have to eject a project because by ejecting you lose the connection with create-guten-block and from there onwards you have to update and maintain all the dependencies on your own.

That's about it.


included

What’s Included?

Your environment will have everything you need to build a modern next-gen WordPress Gutenberg plugin:

  • React, JSX, and ES6 syntax support.
  • webpack dev/production build process behind the scene.
  • Language extras beyond ES6 like the object spread operator.
  • Auto-prefixed CSS, so you don’t need -webkit or other prefixes.
  • A build script to bundle JS, CSS, and images for production with source-maps.
  • Hassle-free updates for the above tools with a single dependency cgb-scripts.

The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can "eject" and customize it, but then you will need to maintain this configuration.


Philosophy

Philosophy

  • One Dependency: There is just one build dependency. It uses webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.

  • No Configuration Required: You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.

  • No Lock-In: You can eject to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.


Why

Why create-guten-block?

Well, it's really hard to configure things like webpack, React, ES 6/7/8/Next, ESLint, Babel, etc. before you even start writing a Hello World Gutenberg block. Then there's the fact that you have to maintain and constantly update your configuration with all the new tools and growth in the JavaScript community.

create-guten-block hides all this configuration away in an optimized package that we call cgb-scripts. This package is the only dependency in your projects. We keep cgb-scripts up to date while you go ahead and create the next best WordPress themes and plugins.


tldr

TL;DR

Too long, didn't read? Here's a shorter version.

Open the terminal app and run the following commands.

  • πŸ”° Install/Create: npx create-guten-block my-block β€” Run inside local WP install E.g. /wp.local/wp-content/plugins/ directory.
  • πŸ“‚ Browse: cd my-block β€” Open the newly created plugin directory.
  • ♻️ Run: npm start β€” For development.
  • πŸ“¦ Run: npm run build β€” For production build.
  • ⏏ Run: npm run eject β€” To customize, update, and maintain all by yourself.

Create-Guten-Block has been tested to work on macOS, but must also work on Windows, and Linux. If something doesn’t work, kindly file an issue β†’


update

Updating to New Releases

Create Guten Block is divided into two packages:

  1. create-guten-block is a command-line utility that you use to create new WP Gutenberg plugins.
  2. cgb-scripts is a development dependency in the generated plugin projects.

You never need to update create-guten-block itself as it's run via npx and it delegates all the setup to cgb-scripts.

When you run create-guten-block, it always creates the project with the latest version of cgb-scripts so you’ll get all the new features and improvements in newly created plugins automatically.

To update an existing project to a new version of cgb-scripts, open the changelog, find the version you’re currently on (check package.json in your plugin's folder if you’re not sure), and apply the migration instructions for the newer versions.

In most cases bumping the cgb-scripts version in package.json and running npm install in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

We commit to keeping the breaking changes minimal so you can upgrade cgb-scripts painlessly.


Log

Changelog

Read what's πŸ“¦ new, πŸ‘Œ improved, πŸ› fixed, and if πŸ“– docs got updated.

πŸ‘‰ Go read the entire changelog at this link β€” CGB Changelog β†’

Nothing's ever complete, so bear with us while we keep iterating towards a better future.

'Coz every night I lie in bed
The brightest colors fill my head
A million dreams are keeping me awake
I think of what the world could be
A vision of the one I see
A million dreams is all it's gonna take
A million dreams for the world we're gonna make ...

... listen to β†’ A million dreams!


Hello

Hello, we're The Dev Couple!

Me (Ahmad Awais) and my incredible wife (Maedah Batool) are two engineers who fell in love with open source and then with each other. You can read more about me here. If you or your company use any of my projects or like what I’m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.

Ahmad on Twitter

NodeCLI.com β€” Learn to build Node.js CLI Automation

This repository is part of the NodeCLI.com course.

After building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js & JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community. β†’ I'm sharing it all in this online video course. Node CLI Automation without wasting a 1,000 hours β†’

Node CLI

Awais on Twitter


Partners

Project Backers & TheDevCouple Partners ⚑️

This FOSS (free and open source software) project is updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies/individuals, this project would not have been possible.

β€” What/How? Read more about it β†’


Thanks

License & Attribution

GitHub @AhmadAwais (follow) TO STAY UP TO DATE ON FREE & OPEN SOURCE SOFTWARE

Twitter @MrAhmadAwais (follow) TO GET ONE DEV MINUTE DAILY HOT TIPS & TROLLS

YouTube AhmadAwais (subscribe) TO TECH TALKS & ONE DEV MINUTE VIDEOS

Blog: AhmadAwais.com (read) MOSTLY LONG FORM TECHNICAL ARTICLES

LinkedIn @MrAhmadAwais (connect) WITH THE LINKEDIN PROFILE Y'ALL

This project is inspired by the work of more people than I could mention here. But thank you, Dan Abramov for Create React App, Andrew Clark, and Christopher Chedeau, Sophie Alpert from React.js team, Kent C. Dodds for his open source evangelism, WordPress Core Contributors, Gary for keeping everyone sane, Gutenberg developers Matias, Riad, Andrew, Ella, Joen, Tammie, Greg and contributors, and other WordPress community members like Zac for his course on Gutenberg, and also my friend Morten for all the #Guten-motivation, Icons8 for the awesome icons, Maedah for managing this project, and to everyone I forgot.

Follow me πŸ‘‹ on Twitter for more updates and questions β†’ Tweet to say Hi



For anything else, tweet at @MrAhmadAwais

I have released a video course to help you learn how to create projects just like this one. Node.js and JavaScript based automation dev-tools and Command-line CLIs β€” Learn to build Node.js CLIS β†’



VSCode

Node CLI Automation β†’

I have released a video course to help you become a better developer β€” Become a VSCode Power User β†’



VSCode

VSCode Power User Course β†’


VSCode Ahmad on Twitter

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

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

    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!!

    33a996cb9e20c975beeb06d7ca3e6971

    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!

    opened by mauricionieto1994 27
  • Create new folder named -p on windows

    Create new folder named -p on windows

    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

    πŸ™Œ GOOD FIRST ISSUE πŸ› BUG 
    opened by erropix 10
  • Unnecessary CSS loaded in frontend

    Unnecessary CSS loaded in frontend

    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: image

    Head after enabling: image

    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.

    opened by Azragh 9
  • Styles not working on latest Wordpress version (beta 5)

    Styles not working on latest Wordpress version (beta 5)

    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: screen shot 2018-11-22 at 11 23 17

    And this is how it looks in the front-end screen shot 2018-11-22 at 11 23 28

    I've verified and double checked the class and the fact that the plugin stylesheet is not loaded in the front-end screen shot 2018-11-22 at 11 27 12

    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.

    πŸ”₯ DECISION PENDING βš‘️ IN PROGRESS 
    opened by HelaGone 9
  • @wordpress imports fail

    @wordpress imports fail

    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';
    
    1. 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';
    
    opened by strarsis 9
  • πŸ“¦ NEW: Upgrade webpack and @babel/core

    πŸ“¦ NEW: Upgrade webpack and @babel/core

    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! πŸ’–

    opened by KenEucker 8
  • πŸ“¦ NEW: webpack 4 package updates

    πŸ“¦ NEW: webpack 4 package updates

    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:

    image

    image

    πŸ‘Œ IMPROVE 
    opened by asharirfan 8
  • Show Changes in Watched Files

    Show Changes in Watched Files

    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 ;)

    opened by igorbenic 8
  • Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In [...]/babel-preset-cgb/index.js

    Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In [...]/babel-preset-cgb/index.js

    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.

    opened by braco 7
  • Remove eval'ed code on production build

    Remove eval'ed code on production build

    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.

    opened by bfintal 7
  • Unable to run create-guten-block in Apache directory

    Unable to run create-guten-block in Apache directory

    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"

    πŸ‘‹ REQUEST/QUESTION πŸ€” NOT RELATED 
    opened by LensDigitalUK 6
  • create-guten-block is looking for active maintianers

    create-guten-block is looking for active maintianers

    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! ✌️

    opened by ahmadawais 0
  • blockNamePHPLower causes issue when its running as a function n ame

    blockNamePHPLower causes issue when its running as a function n ame

    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?

    opened by blachawk 0
  • Only a package.json and a .gitignore file after running the npx command

    Only a package.json and a .gitignore file after running the npx command

    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

    opened by andornagy 3
  • Module parse failed: Unexpected token while compiling block

    Module parse failed: Unexpected token while compiling block

    Bug Report

    Expected Behavior

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

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

    image

    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.)

    opened by carlosmiei 0
  • Block.json is missing. Block styles will not load in future WordPress releases

    Block.json is missing. Block styles will not load in future WordPress releases

    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.

    opened by virgiliud 0
Releases(1.0.0)
Owner
Ahmad Awais ⚑️
Award-winning Open Source & JavaScript Dev Advocate ❯ @nodejs Community Committee ❯ Edutainer at the VSCode.pro ❯ @WordPress Core Team Dev ❯ EE-CS Engineer
Ahmad Awais ⚑️
WordPress entities creation library (CPT, CT, native option page, ACF option page, user role, block pattern category, block category…)

WordPress entities creation library (CPT, CT, native option page, ACF option page, user role, block pattern category, block category…)

LoΓ―c Antignac 2 Jul 25, 2022
A plugin to disable the drop cap option in Gutenberg editor paragraph block. This is version 2.

Disable Drop Cap (v2) A plugin to disable drop cap option in the Gutenberg editor block editor paragraph block. Note for WordPress 5.8 With WordPress

Johannes Siipola 4 Jan 4, 2022
A foundation for WordPress Plugin Development that aims to provide a clear and consistent guide for building your plugins.

WordPress Plugin Boilerplate A standardized, organized, object-oriented foundation for building high-quality WordPress Plugins. Contents The WordPress

Devin 7.2k Jan 4, 2023
Rabbit Framework - A modern way of building WordPress plugins

Rabbit Framework - A modern way of building WordPress plugins. About Rabbit Framework is a modern framework designed to be a solid foundation for your

VeronaLabs 8 Nov 20, 2022
This Plugin is used to install and activate multiple plugins in one go. I was facing problem uploading plugins one by one so I developed this to solve my problem. Hope you will enjoy using this plugin.

=== Bulk Plugin Installer === Contributors: jawadarshad Donate link: https://jawadarshad.io/ Tags: bulk plugin installer, import multiple plugins, up

Muhammad Jawad Arshad 2 Sep 20, 2022
Examples for extending WordPress/Gutenberg with blocks.

Gutenberg Examples Examples for extending Gutenberg with plugins which create blocks. See also: Gutenberg developer documentation Installation Gutenbe

null 1.1k Dec 29, 2022
Documents WordPress Classic Editor integration points and their Gutenberg equivalents

Gutenberg Migration Guide This repository documents WordPress Classic Editor customization points and their Gutenberg equivalents (if such exist). Its

Daniel Bachhuber 185 Nov 16, 2022
The easiest way to develop and release Gutenberg blocks (components) for WordPress

Contents Install Comparison with competition Future Plans Usage Creating a Block Install npm install gutenblock -g This is a Gutenberg plugin creator

Zach Silveira 239 Nov 11, 2022
A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities.

Awesome WordPress A curated list of Awesome WordPress Theme, Plugins and Framework development Resources and WordPress Communities. Inspired by bayand

Dropndot Limited 91 Dec 26, 2022
WordPress plugin to make it easier to create block patterns.

=== Templets === Contributors: mkaz Tags: block patterns, patterns Requires at least: 5.8 Tested up to: 5.8 Requires PHP: 7.3 Stable tag: 0.2.0 Licens

Marcus Kazmierczak 9 Jan 3, 2023
A simple little WordPress block that allows you add social share icons to your website.

Social Sharing Block This plugin requires WordPress 5.9+ or 5.8+ with Gutenberg active. A simple little block that allows you to add social share icon

Nick Diego 18 Dec 27, 2022
WordPress plugin boilerplate using React and Block Editor components.

PluginWP Foundation ?? UNDER DEVELOPMENT ?? This code serves as a starting point for building a WordPress plugin using React and the block editor comp

JR Tashjian 5 Dec 8, 2022
This is code to create a new user as admin use for Wordpress FrontEnd Developer to prevent any scaming from clients

theme-setup This is code to create a new user as admin use for Wordpress FrontEnd Developer to prevent any scaming from clients How to use Just copy c

Abdul Razzaq 1 Nov 27, 2021
Gutenberg Custom Fields... wait what?

Gutenberg Custom Fields Gutenberg Custom Fields allows you to control the content of the Gutenberg edit screen by creating pre-filled templates. Navig

Riad Benguella 192 Dec 24, 2022
Query gutenberg blocks with wp-graphql

WPGraphQL Gutenberg Query gutenberg blocks through wp-graphql Usage Docs Join our community through WpGraphQL Slack Install Requires PHP 7.0+ Requires

null 270 Jan 3, 2023
A WordPress package for updating custom plugins and themes based on an API response from a custom update server.

WordPress Update Handler A WordPress package for updating custom plugins and themes based on an JSON REST API response from a custom update server. Ch

WP Forge 7 Oct 5, 2022
A custom update API for WordPress plugins and themes

A custom update API for WordPress plugins and themes. Intended to be used in conjunction with my plugin-update-checker library.

Yahnis Elsts 717 Dec 31, 2022
Developers tool for WordPress plugins: Wraps all your projects dependencies in your own namespace

Developers tool for WordPress plugins: Wraps all your projects dependencies in your own namespace, in order to prevent conflicts with other plugins loading the same dependencies in different versions.

Coen Jacobs 362 Dec 23, 2022
Classy is a framework for building WordPress themes, based on Blade template engine

Classy is a framework for building WordPress themes, based on Blade template engine. It's fast with beautiful architecture that allows you to write le

DigitalKwarts 75 Nov 23, 2022