Nightly Punk Masters

    @wordpress/create-block

    4.10.0 • Public • Published

    Create Block

    Create Block is an officially supported tool for scaffolding a WordPress plugin that registers a block. It generates PHP, JS, CSS code, and everything you need to start the project. It also integrates a modern build setup with no configuration.

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

    Blocks are the fundamental elements of modern WordPress sites. Introduced in WordPress 5.0, they allow page and post builder-like functionality to every up-to-date WordPress website.

    Learn more about the Block API at the Gutenberg HandBook.

    Table of Contents

    Quick start

    $ npx @wordpress/create-block todo-list
    $ cd todo-list
    $ npm start

    The slug provided (todo-list in the example) defines the folder name for the scaffolded plugin and the internal block name. The WordPress plugin generated must be installed manually.

    (requires node version 14.0.0 or above, and npm version 6.14.4 or above)

    Watch a video introduction to create-block on Learn.wordpress.org

    Usage

    The create-block command generates a project with PHP, JS, and CSS code for registering a block with a WordPress plugin.

    $ npx @wordpress/create-block [options] [slug]

    Demo

    The name for a block is a unique string that identifies a block. Block Names are structured as namespace/slug, where namespace is the name of your plugin or theme.

    In most cases, we recommended pairing blocks with WordPress plugins rather than themes, because only using plugin ensures that all blocks still work when your theme changes.

    Interactive Mode

    When no slug is provided, the script will run in interactive mode and will start prompting for the input required (slug, title, namespace...) to scaffold the project.

    slug

    The use of slug is optional.

    When provided it triggers the quick mode, where this slug is used:

    • as the block slug (required for its identification)
    • as the output location (folder name) for scaffolded files
    • as the name of the WordPress plugin.

    The rest of the configuration is set to all default values unless overridden with some options listed below.

    options

    -V, --version                output the version number
    -t, --template <name>        project template type name; allowed values: "static" (default), "es5", the name of an external npm package, or the path to a local directory
    --no-plugin                  scaffold block files only
    --namespace <value>          internal namespace for the block name
    --title <value>              display title for the block and the WordPress plugin
    --short-description <value>  short description for the block and the WordPress plugin
    --category <name>            category name for the block
    --wp-scripts                 enable integration with `@wordpress/scripts` package
    --no-wp-scripts              disable integration with `@wordpress/scripts` package
    --wp-env                     enable integration with `@wordpress/env` package
    -h, --help                   output usage information
    --variant                    choose a block variant as defined by the template

    --template

    This argument specifies an external npm package as a template.

    $ npx @wordpress/create-block --template my-template-package

    This argument also allows to pick a local directory as a template.

    $ npx @wordpress/create-block --template ./path/to/template-directory

    --variant

    With this argument, create-block will generate a dynamic block based on the built-in template.

    $ npx @wordpress/create-block --variant dynamic

    --help

    With this argument, the create-block package outputs usage information.

    $ npx @wordpress/create-block --help

    --no-plugin

    With this argument, the create-block package runs in No plugin mode which only scaffolds block files into the current directory.

    $ npx @wordpress/create-block --no-plugin

    --wp-env

    With this argument, the create-block package will add to the generated plugin the configuration and the script to run wp-env package within the plugin. This will allow you to easily set up a local WordPress environment (via Docker) for building and testing the generated plugin.

    $ npx @wordpress/create-block --wp-env

    Available commands in the scaffolded project

    The plugin folder created when executing this command, is a node package with a modern build setup that requires no configuration.

    A set of scripts is available from inside that folder (provided by the scripts package) to make your work easier. Click here for a full description of these commands.

    Note: 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 coding.

    For example, running the start script from inside the generated folder (npm start) would automatically start the build for development.

    External Project Templates

    Click here for information on External Project Templates

    Contributing to this package

    This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

    To find out more about contributing to this package or Gutenberg as a whole, please read the project's main contributor guide.



    Code is Poetry.

    Install

    npm i @wordpress/create-block

    DownloadsWeekly Downloads

    608

    Version

    4.10.0

    License

    GPL-2.0-or-later

    Unpacked Size

    89 kB

    Total Files

    33

    Last publish

    Collaborators

    • gutenbergplugin
    • mamaduka
    • ryanwelcher
    • adamziel
    • garypendergast
    • aduth
    • riad
    • adamsilverstein
    • gziolo
    • ntwb
    • noisysocks
    • kadamwhite
    • jorgefilipecosta
    • ellatrix
    • iandunn206
    • whyisjake
    • ockham
    • sirreal
    • nosolosw
    • wpisabel
    • ntsekouras
    • nerrad
    • desrosj
    • talldanwp
    • peterwilsoncc