How Modern JavaScript Influences WordPress Development

WordSesh APAC 2020
---

WordPress has always been recognized as a very welcoming platform for developers at any level of expertise. Introduced in WordPress core over a year ago, the block editor not only brought an entirely new editing experience for users, but it also redefined the way plugins and themes are developed.

In this talk, I want to present how the JavaScript ecosystem has flourished in recent years, creating a wide range of opportunities for contributors working on the Gutenberg project. At the same time, I want to explain many of the architectural decisions that have sought to make the transition as smooth as possible for those familiar with developing products and services based on WordPress.

Transcript

1. Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl How Modern JavaScript Influences WordPress Development
2. Agenda 1. History of JavaScript. 2. Architecting Gutenberg. 3. Embracing Modern JavaScript. 4. Practical Application.
3. CHAPTER I History of JavaScript
4. <script type="text/javascript"> <!-- function focusit() { // focus on the first input field document.post.title.focus(); } window.onload = focusit; //--> </script>
10. CHAPTER II Architecting Gutenberg
11. ARCHITECTING GUTENBERG Blocks
13. <!-- wp:image {"id":6616} --> <figure class="wp-block-image"> <img src=“https://gziolo.pl/wp-content/ uploads/2020/03/gutenberg-block.png” alt="Gutenberg block" class="wp-image-6616"/> <figcaption>Gutenberg block</figcaption> </figure> <!-- /wp:image -->
14. <!-- wp:image {"id":6616} --> <figure class="wp-block-image"> <img src=“https://gziolo.pl/wp-content/ uploads/2020/03/gutenberg-block.png” alt="Gutenberg block" class="wp-image-6616"/> <figcaption>Gutenberg block</figcaption> </figure> <!-- /wp:image -->
15. 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',
 }, 
 },
 ];
17. Components and State ARCHITECTING GUTENBERG
18. “ ” Build encapsulated components that manage their own state, then compose them to make complex UIs. reactjs.org/ REACT WEBSITE
19. import { render } from '@wordpress/element'; const HelloMessage = ( { name } ) => ( <div> Hello { name } </div> ); render( <HelloMessage name="WordSesh" />, document.getElementById( 'hello-example' ) );
20. “ Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more. ” redux.js.org/ REDUX WEBSITE
21. Extensibility ARCHITECTING GUTENBERG
22. “ ” 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
23. import { addFilter } from '@wordpress/hooks'; const replacePostFeaturedImage = () => ( <div> The replacement contents or components. </div> ); addFilter( 'editor.PostFeaturedImage', 'my-plugin/replace-post-featured-image', replacePostFeaturedImage );
24. Modular Architecture ARCHITECTING GUTENBERG
29. Embracing Modern JavaScript CHAPTER III
31. “ 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
32. EMBRACING MODERN JAVASCRIPT JavaScript Versions
33. ( 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 } ); } )();
34. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
35. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
36. import { __ } from '@wordpress/i18n'; import { registerPlugin } from '@wordpress/plugins'; import { PluginPostStatusInfo } from '@wordpress/editPost'; const MyPostStatusInfoPlugin = () => ( <PluginPostStatusInfo className="my-post-status-info- plugin"> { __( 'My post status info' ) } </PluginPostStatusInfo> ); registerPlugin( 'my-post-status-info-plugin', { render: MyPostStatusInfoPlugin, } );
37. "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 });
38. MODERN JAVASCRIPT Reusable Scripts
39. “ ” 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/
40. $ npm install @wordpress/scripts --save-dev
41. { "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" } }
42. Learn more: www.npmjs.com/package/@wordpress/scripts
43. Practical Application CHAPTER IV
44. $ npm init @wordpress/block --template es5 wordsesh—apac
46. $ npm init @wordpress/block
48. 1. Install dependencies: npm install. 2. Start development builds: npm start. 3. Develop. Test. Repeat. 4. Create production build: npm run build. Development Workflow
50. CHAPTER V Key Takeaways
51. 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.
52. Learn JavaScript deeply and prosper!
53. Thank You! Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl