Growing JavaScript Skills with WordPress

The JavaScript for WordPress Conference 2019
---

WordPress has always been recognized as a very welcoming platform for developers at any level of expertise. The block editor introduced in WordPress 5.0 release is not only an entirely new editing experience for users, but it also redefines the way plugins and themes are developed.

In this talk, I want to explain many of the architectural decisions that have sought to make the transition as smooth as possible for those familiar with WordPress development. I will discuss all the tooling that the Gutenberg project uses behind the scenes to benefit from the massive growth of the JavaScript ecosystem. Finally, I’d like to demonstrate how you can leverage the same software in your projects using the @wordpress/scripts npm package to improve your skills.

Transcript

1. Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl Growing JavaScript Skills with WordPress
2. Agenda 1. History of JavaScript. 2. Architecting Gutenberg. 3. Embracing Modern JavaScript. 4. Reusable Scripts.
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. “ ” 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
14. <!-- wp:image {"id":6616} --> <figure class="wp-block-image"> <img src="https://gziolo.pl/wp- content/uploads/2019/06/gutenberg- block.png" alt="Gutenberg block" class="wp-image-6616"/> <figcaption>Gutenberg block</ figcaption> </figure> <!-- /wp:image -->
15. <!-- wp:image {"id":6616} --> <figure class="wp-block-image"> <img src="https://gziolo.pl/wp- content/uploads/2019/06/gutenberg- block.png" alt="Gutenberg block" class="wp-image-6616"/> <figcaption>Gutenberg block</ figcaption> </figure> <!-- /wp:image -->
16. 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',
 }, 
 },
 ];
18. Components and State ARCHITECTING GUTENBERG
21. “ ” Build encapsulated components that manage their own state, then compose them to make complex UIs. reactjs.org/ REACT WEBSITE
22. import { render } from '@wordpress/element'; const HelloMessage = ( { name } ) => ( <div> Hello { name } </div> ); render( <HelloMessage name="Taylor" />, document.getElementById( 'hello-example' ) );
23. “ Centralizing your application’s state and logic enables powerful capabilities like undo/redo, state persistence, and much more. ” redux.js.org/ REDUX WEBSITE
24. Extensibility ARCHITECTING GUTENBERG
25. “ ” 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
26. import { addFilter } from '@wordpress/hooks'; const replacePostFeaturedImage = () => ( <div> The replacement contents or components. </div> ); addFilter( 'editor.PostFeaturedImage', 'my-plugin/replace-post-featured-image', replacePostFeaturedImage );
27. Modular Architecture ARCHITECTING GUTENBERG
32. Embracing Modern JavaScript CHAPTER III
34. “ 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
35. “ ” MATT MULLENWEG Learn JavaScript, deeply. WordCamp US 2015
36. EMBRACING MODERN JAVASCRIPT JavaScript Versions
37. ( 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 } ); } )();
38. 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, } );
39. 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, } );
40. "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 });
41. 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, } );
42. EMBRACING MODERN JAVASCRIPT Code Reuse
44. EMBRACING MODERN JAVASCRIPT Code Quality
47. CHAPTER IV Reusable Scripts
48. “ ” 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/
49. REUSABLE SCRIPTS Setup
50. npm install @wordpress/scripts --save-dev
51. { "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" } }
52. REUSABLE SCRIPTS Building
53. { "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" } }
54. { "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" } }
55. 1. Install dependencies: npm install. 2. Start development builds: npm start. 3. Develop. Test. Repeat. 4. Create production build: npm run build. Workflow
56. REUSABLE SCRIPTS Other Tasks
57. { "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" } }
58. { "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" } }
59. { "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" } }
60. Learn more: www.npmjs.com/package/@wordpress/scripts
61. CHAPTER V Key Takeaways
62. 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.
63. Learn JavaScript deeply and prosper!
64. Thank You! Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl
65. Thank You! Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl