Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Speed Up Development with Block Scaffolding

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