Neoplastic Plasma Medusa

    This package has been deprecated

    Author message:

    create-wordpress-block has been moved, please use the latest version of @wordpress/create-block package instead

    create-wordpress-block

    0.5.1 • Public • Published

    Create WordPress Block

    Create WordPress Block is an officially supported way to create blocks for registering a block for a WordPress plugin. It offers a modern build setup with no configuration. It generates PHP, JS, CSS code, and everything else you need to start the project.

    It is largely inspired by create-react-app. Major kudos to @gaearon, the whole Facebook team, and the React community.

    Description

    Blocks are the fundamental element of the WordPress block editor. They are the primary way in which plugins and themes can register their own functionality and extend the capabilities of the editor.

    Visit the Gutenberg handbook to learn more about Block API.

    Quick start

    You just need to provide the slug which is the target location for scaffolded files and the internal block name.

    $ npm init wordpress-block todo-list
    cd todo-list
    $ npm start

    (requires node version 10.0.0 or above, and npm version 6.1.0 or above)

    Create example block – demo

    You don’t need to install or configure tools like webpack, Babel or ESLint yourself. They are preconfigured and hidden so that you can focus on the code.

    Usage

    The following command generates PHP, JS and CSS code for registering a block.

    $ npm init wordpress-block [options] [slug]

    [slug] is optional. When provided it triggers the quick mode where it is used as the block slug used for its identification, the output location for scaffolded files, and the name of the WordPress plugin. The rest of the configuration is set to all default values.

    Options:

    -t, --template <name>  template type name, allowed values: "es5""esnext" (default: "esnext")
    -V, --version          output the version number
    -h, --help             output usage information

    More examples:

    1. Interactive mode - it gives a chance to customize a few most important options before the code gets generated.
    $ npm init wordpress-block
    1. ES5 template – it is also possible to pick ES5 template when you don't want to deal with a build step (npm start) which enables ESNext and JSX support.
    $ npm init wordpress-block --template es5
    1. Help – you need to use npx to output usage information.
    $ npx create-wordpress-block --help

    When you scaffold a block, you must provide at least a slug name, the namespace which usually corresponds to either the theme or plugin name, and the category. In most cases, we recommended pairing blocks with plugins rather than themes, because only using plugin ensures that all blocks still work when your theme changes.

    Available Commands

    Inside that bootstrapped directory (it doesn't apply to es5 template), you can run several commands:

    $ npm start

    Starts the build for development.

    $ npm run build

    Builds the code for production.

    $ npm run lint:css

    Lints CSS files.

    $ npm run lint:js

    Lints JavaScript files.

    WP-CLI

    Another way of making a developer’s life easier is to use WP-CLI, which provides a command-line interface for many actions you might perform on the WordPress instance. One of the commands wp scaffold block was used as the baseline for this tool and ES5 template in particular.



    Code is Poetry.

    Install

    npm i create-wordpress-block

    DownloadsWeekly Downloads

    1

    Version

    0.5.1

    License

    MIT

    Unpacked Size

    27.9 kB

    Total Files

    22

    Last publish

    Collaborators

    • gziolo