Slide 1
Slide 1 text
Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl
How Modern
JavaScript
Influences
WordPress
Development
Slide 2
Slide 2 text
Agenda
1. History of JavaScript.
2. Architecting Gutenberg.
3. Embracing Modern JavaScript.
4. Practical Application.
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
Gutenberg block
Slide 14
Slide 14 text
Gutenberg block
Slide 15
Slide 15 text
const blocks = [
{
name: 'core/image',
attributes: {
alt: 'Gutenberg block',
caption: 'Gutenberg block',
id: 6616,
linkDestination: 'none',
url: ‘https://gziolo.pl/wp-content/uploads/
2020/03/gutenberg-block.png',
},
},
];
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
Components
and State
ARCHITECTING GUTENBERG
Slide 18
Slide 18 text
“
”
Build encapsulated components that manage their own
state, then compose them to make complex UIs.
reactjs.org/
REACT WEBSITE
Slide 19
Slide 19 text
import { render } from '@wordpress/element';
const HelloMessage = ( { name } ) => (
Hello { name }
);
render(
,
document.getElementById( 'hello-example' )
);
Slide 20
Slide 20 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 21
Slide 21 text
Extensibility
ARCHITECTING GUTENBERG
Slide 22
Slide 22 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 23
Slide 23 text
import { addFilter } from '@wordpress/hooks';
const replacePostFeaturedImage = () => (
The replacement contents or components.
);
addFilter(
'editor.PostFeaturedImage',
'my-plugin/replace-post-featured-image',
replacePostFeaturedImage
);
Slide 24
Slide 24 text
Modular
Architecture
ARCHITECTING GUTENBERG
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
Embracing
Modern
JavaScript
CHAPTER III
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 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 32
Slide 32 text
EMBRACING MODERN JAVASCRIPT
JavaScript
Versions
Slide 33
Slide 33 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 34
Slide 34 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 35
Slide 35 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 36
Slide 36 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 37
Slide 37 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 38
Slide 38 text
MODERN JAVASCRIPT
Reusable
Scripts
Slide 39
Slide 39 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 40
Slide 40 text
$ npm install @wordpress/scripts --save-dev
Slide 41
Slide 41 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 42
Slide 42 text
Learn more:
www.npmjs.com/package/@wordpress/scripts
Slide 43
Slide 43 text
Practical
Application
CHAPTER IV
Slide 44
Slide 44 text
$ npm init @wordpress/block --template es5
wordsesh—apac
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
$ npm init @wordpress/block
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
1. Install dependencies: npm install.
2. Start development builds: npm start.
3. Develop. Test. Repeat.
4. Create production build: npm run build.
Development Workflow
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
CHAPTER V
Key Takeaways
Slide 51
Slide 51 text
Recommendations
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 52
Slide 52 text
Learn JavaScript deeply and prosper!
Slide 53
Slide 53 text
Thank You!
Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl