Growing JavaScript Skills with WordPress

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

  11. ARCHITECTING GUTENBERG Blocks

  12. None
  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',
 }, 
 },
 ];
  17. None
  18. Components and State ARCHITECTING GUTENBERG

  19. None
  20. None
  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

  28. None
  29. None
  30. None
  31. None
  32. Embracing Modern JavaScript CHAPTER III

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

  43. None
  44. EMBRACING MODERN JAVASCRIPT Code Quality

  45. None
  46. None
  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