How to Speed Up Development with Block Scaffolding

WPBlockTalk 2020 (https://wpblocktalk.wordpress.stream)

Transcript

1. Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl How to Speed Up Development with Block Scaffolding
3. “ That’s are clear signs of the Renaissance for JavaScript. Renaissance was a time when people became creative, and JavaScript is currently a place where creativity thrives. ” ALEXANDER BELETSKY medium.com/@alexbeletsky/renaissance-of-javascript-485118447cf9
4. JavaScript Versions CHAPTER I
5. ( function() { var el = wp.element.createElement; var __ = wp.i18n.__; var registerPlugin = wp.plugins.registerPlugin; var PluginPostStatusInfo = wp.editPost.PluginPostStatusInfo; function MyPostStatusInfoPlugin() { return el( PluginPostStatusInfo, { className: 'my-post-status-info-plugin', }, __( 'My post status info' ) ); } registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin } ); } )();
6. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
7. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
8. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
9. "use strict"; var _element = require("@wordpress/element"); var _i18n = require("@wordpress/i18n"); var _plugins = require("@wordpress/plugins"); var _editPost = require("@wordpress/editPost"); var MyPostStatusInfoPlugin = function MyPostStatusInfoPlugin() { return (0, _element.createElement)(_editPost.PluginPostStatusInfo, { className: "my-post-status-info-plugin" }, (0, _i18n.__)('My post status info')); }; (0, _plugins.registerPlugin)('my-post-status-info-plugin', { render: MyPostStatusInfoPlugin });
10. CHAPTER II Reusable Scripts
11. “ ” DAN ABRAMOV If WordPress were to adopt React, it would make sense for it to also provide a zero- configuration build environment. We are happy to offer some of the packages we developed as part of Create React App for reuse. thedevcouple.com/interview-react-team-facebook-wordpress-gutenberg/
12. $ npm install @wordpress/scripts --save-dev
13. { "scripts": { "build": "wp-scripts build", "format:js": "wp-scripts format-js“, "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }
14. Learn more: www.npmjs.com/package/@wordpress/scripts
15. Block Scaffolding CHAPTER III
16. $ npm init @wordpress/block --template es5 wpblocktalk
18. $ npm init @wordpress/block
20. Thank You! Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl