Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

“ 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

Slide 4

Slide 4 text

JavaScript Versions CHAPTER I

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

CHAPTER II Reusable Scripts

Slide 11

Slide 11 text

“ ” 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/

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Block Scaffolding CHAPTER III

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

$ npm init @wordpress/block

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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