How to Speed Up Development with Block Scaffolding

Transcript

1. Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl How to Speed Up Development

   with Block Scaffolding
2. None

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

17. None

18. $ npm init @wordpress/block

19. None

20. Thank You! Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl