Slide 1

Slide 1 text

Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl Growing JavaScript Skills with WordPress

Slide 2

Slide 2 text

Agenda 1. History of JavaScript. 2. Architecting Gutenberg. 3. Embracing Modern JavaScript. 4. Reusable Scripts.

Slide 3

Slide 3 text

CHAPTER I History of JavaScript

Slide 4

Slide 4 text

<!-- function focusit() { // focus on the first input field document.post.title.focus(); } window.onload = focusit; //-->

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

CHAPTER II Architecting Gutenberg

Slide 11

Slide 11 text

ARCHITECTING GUTENBERG Blocks

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

“ ” The editor will endeavor to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. make.wordpress.org/core/2017/01/04/focus-tech-and-design-leads/ MATT MULLENWEG

Slide 14

Slide 14 text

Gutenberg block Gutenberg block

Slide 15

Slide 15 text

Gutenberg block Gutenberg block

Slide 16

Slide 16 text

const blocks = [
 {
 name: 'core/image',
 attributes: {
 alt: 'Gutenberg block',
 caption: 'Gutenberg block',
 id: 6616,
 linkDestination: 'none',
 url: 'https://gziolo.pl/wp-content/ uploads/2019/06/gutenberg-block.png',
 }, 
 },
 ];

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Components and State ARCHITECTING GUTENBERG

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

“ ” Build encapsulated components that manage their own state, then compose them to make complex UIs. reactjs.org/ REACT WEBSITE

Slide 22

Slide 22 text

import { render } from '@wordpress/element'; const HelloMessage = ( { name } ) => (
Hello { name }
); render( , document.getElementById( 'hello-example' ) );

Slide 23

Slide 23 text

“ Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more. ” redux.js.org/ REDUX WEBSITE

Slide 24

Slide 24 text

Extensibility ARCHITECTING GUTENBERG

Slide 25

Slide 25 text

“ ” WordPress combines simplicity for users and publishers with under-the-hood complexity for developers. This makes it flexible while still being easy- to-use. wordpress.org/about/features/ WORDPRESS FEATURES PAGE

Slide 26

Slide 26 text

import { addFilter } from '@wordpress/hooks'; const replacePostFeaturedImage = () => (
The replacement contents or components.
); addFilter( 'editor.PostFeaturedImage', 'my-plugin/replace-post-featured-image', replacePostFeaturedImage );

Slide 27

Slide 27 text

Modular Architecture ARCHITECTING GUTENBERG

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Embracing Modern JavaScript CHAPTER III

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 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 35

Slide 35 text

“ ” MATT MULLENWEG Learn JavaScript, deeply. WordCamp US 2015

Slide 36

Slide 36 text

EMBRACING MODERN JAVASCRIPT JavaScript Versions

Slide 37

Slide 37 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 38

Slide 38 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 39

Slide 39 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 40

Slide 40 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 41

Slide 41 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 42

Slide 42 text

EMBRACING MODERN JAVASCRIPT Code Reuse

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

EMBRACING MODERN JAVASCRIPT Code Quality

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

CHAPTER IV Reusable Scripts

Slide 48

Slide 48 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 49

Slide 49 text

REUSABLE SCRIPTS Setup

Slide 50

Slide 50 text

npm install @wordpress/scripts --save-dev

Slide 51

Slide 51 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 52

Slide 52 text

REUSABLE SCRIPTS Building

Slide 53

Slide 53 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 54

Slide 54 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 55

Slide 55 text

1. Install dependencies: npm install. 2. Start development builds: npm start. 3. Develop. Test. Repeat. 4. Create production build: npm run build. Workflow

Slide 56

Slide 56 text

REUSABLE SCRIPTS Other Tasks

Slide 57

Slide 57 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 58

Slide 58 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 59

Slide 59 text

{ "scripts": { "build": "wp-scripts build", "check-engines": "wp-scripts check-engines", "check-licenses": "wp-scripts check-licenses", "lint:css": "wp-scripts lint-style", "lint:js": "wp-scripts lint-js", "lint:pkg-json": "wp-scripts lint-pkg-json", "start": "wp-scripts start", "test:e2e": "wp-scripts test-e2e", "test:unit": "wp-scripts test-unit-js" } }

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

CHAPTER V Key Takeaways

Slide 62

Slide 62 text

Key Takeaways 1. ES5 standard is still relevant. 2. ESNext and JSX make your life easier. 3. Reuse pieces of Gutenberg. 4. Use modern JavaScript tools.

Slide 63

Slide 63 text

Learn JavaScript deeply and prosper!

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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