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

More Decks by Grzegorz (Greg) Ziółkowski

Other Decks in Programming

Transcript

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

    View Slide

  2. View Slide


  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

    View Slide

  4. JavaScript
    Versions
    CHAPTER I

    View Slide

  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
    } );
    } )();

    View Slide

  6. import { __ } from '@wordpress/i18n';
    import { registerPlugin } from '@wordpress/plugins';
    import { PluginPostStatusInfo } from '@wordpress/editPost';
    const MyPostStatusInfoPlugin = () => (

    { __( 'My post status info' ) }

    );
    registerPlugin( 'my-post-status-info-plugin', {
    render: MyPostStatusInfoPlugin,
    } );

    View Slide

  7. import { __ } from '@wordpress/i18n';
    import { registerPlugin } from '@wordpress/plugins';
    import { PluginPostStatusInfo } from '@wordpress/editPost';
    const MyPostStatusInfoPlugin = () => (

    { __( 'My post status info' ) }

    );
    registerPlugin( 'my-post-status-info-plugin', {
    render: MyPostStatusInfoPlugin,
    } );

    View Slide

  8. import { __ } from '@wordpress/i18n';
    import { registerPlugin } from '@wordpress/plugins';
    import { PluginPostStatusInfo } from '@wordpress/editPost';
    const MyPostStatusInfoPlugin = () => (

    { __( 'My post status info' ) }

    );
    registerPlugin( 'my-post-status-info-plugin', {
    render: MyPostStatusInfoPlugin,
    } );

    View Slide

  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
    });

    View Slide

  10. CHAPTER II
    Reusable
    Scripts

    View Slide



  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/

    View Slide

  12. $ npm install @wordpress/scripts --save-dev

    View Slide

  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"
    }
    }

    View Slide

  14. Learn more:
    www.npmjs.com/package/@wordpress/scripts

    View Slide

  15. Block
    Scaffolding
    CHAPTER III

    View Slide

  16. $ npm init @wordpress/block --template es5
    wpblocktalk

    View Slide

  17. View Slide

  18. $ npm init @wordpress/block

    View Slide

  19. View Slide

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

    View Slide