{"id":79748,"date":"2020-02-28T13:58:38","date_gmt":"2020-02-28T13:58:38","guid":{"rendered":"https:\/\/make.wordpress.org\/core\/?p=79748"},"modified":"2020-02-28T23:57:07","modified_gmt":"2020-02-28T23:57:07","slug":"new-wordpress-create-block-package-for-block-scaffolding","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/core\/2020\/02\/28\/new-wordpress-create-block-package-for-block-scaffolding\/","title":{"rendered":"New @wordpress\/create-block package for block scaffolding"},"content":{"rendered":"

BlockBlock<\/span> Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.<\/span><\/span><\/span> scaffolding<\/em> is a shorthand term that describes the supporting directory structure you need for WordPress to recognize a block. Typically that directory includes files like index.php<\/code>, index.js<\/code>, style.css<\/code> and perhaps others\u2014which in turn hold calls like register_block_type<\/code>.<\/p>\n\n\n\n

You\u2019ve likely noticed a lot of tools that aim to automate the scaffolding build\u2014or at least make it easier to build your own blocks. They\u2019re nothing new in the WordPress ecosystem. And there\u2019s even one in WP-CLIWP-CLI<\/span> WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http:\/\/wp-cli.org\/<\/a> https:\/\/make.wordpress.org\/cli\/<\/a><\/span><\/span><\/span>: the wp scaffold block<\/code> command.<\/p>\n\n\n\n

You\u2019ve probably also noticed that some of those third-party tools get you up and running with just one npx<\/code> command, while WP-CLI still needs a full WordPress installation to run. And WP-CLI doesn\u2019t play well with advanced JavaScriptJavaScript<\/span> JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user\u2019s browser.\rhttps:\/\/www.javascript.com<\/a><\/span><\/span><\/span> tooling like code transpiling, linting or formatting. <\/p>\n\n\n\n

Until now. <\/p>\n\n\n\n

WordPress 5.4 brings you a brand-new, officially supported npm-based scaffolding package.<\/p>\n\n\n\n

Create Block<\/strong> generates PHPPHP<\/span> The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher<\/span><\/span><\/span>, JSJS<\/span> JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.<\/span><\/span><\/span> and CSSCSS<\/span> Cascading Style Sheets.<\/span><\/span><\/span> code\u2014and everything else you need to start building your WordPress pluginPlugin<\/span> A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https:\/\/wordpress.org\/plugins\/<\/a> or can be cost-based plugin from a third-party.<\/span><\/span><\/span>. Its quick-start<\/em> mode lets you pass it a slug that then becomes both the target location for the generated files AND the internal block name:<\/p>\n\n\n\n

$ npm init @wordpress\/block todo-list<\/code><\/pre>\n\n\n\n
\"wordpress-create-block\"<\/figure>\n\n\n\n
You don\u2019t need to install or configure tools like webpack, Babel or ESLint yourself. They\u2019re preconfigured and out of sight. So you can focus on the code.<\/p>\n\n\n\n
Create Block also has an interactive mode that lets you customize several essential block options before code generation:<\/p>\n\n\n\n
$ npm init @wordpress\/block<\/code><\/pre>\n\n\n\n
Finally, despite its support for modern JavaScript tooling, Create Block also lets you to pick an ES5 template\u2014and skip the transpiling tools that trigger ESNext and JSX support.<\/p>\n\n\n\n
Note: If you\u2019re concerned about backwards compatibility, the new tool comes straight from the existing WP-CLI implementation\u2014and in particular, the optional ES5 template uses the existing ES5 code.<\/p>\n
#<\/span>5-4<\/a>, #<\/span>block-editor<\/a>, #<\/span>dev-notes<\/a><\/p>