How Modern JavaScript Influences WordPress Development

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>
  5. None
  6. None
  7. None
  8. None
  9. None
  10. CHAPTER II Architecting Gutenberg

  11. ARCHITECTING GUTENBERG Blocks

  12. None
  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',
 }, 
 },
 ];
  16. None
  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

  25. None
  26. None
  27. None
  28. None
  29. Embracing Modern JavaScript CHAPTER III

  30. None
  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

  45. None
  46. $ npm init @wordpress/block

  47. None
  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
  49. None
  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