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
Slide 15
Slide 15 text
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