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
   

   View Slide

2. Agenda
   1. History of JavaScript.
   2. Architecting Gutenberg.
   3. Embracing Modern JavaScript.
   4. Reusable Scripts.
   

   View Slide

3. CHAPTER I
   History
   of JavaScript
   

   View Slide

4. <br/><!--<br/>function focusit() {<br/>// focus on the first input field<br/>document.post.title.focus();<br/>}<br/>window.onload = focusit;<br/>//--><br/>
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. CHAPTER II
    Architecting
    Gutenberg
    

    View Slide

11. ARCHITECTING GUTENBERG
    Blocks
    

    View Slide

12. View Slide

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
    

    View Slide

14. 
    
    class="wp-image-6616"/>
    Gutenberg block
    figcaption>
    
    
    

    View Slide

15. 
    
    class="wp-image-6616"/>
    Gutenberg block
    figcaption>
    
    
    

    View Slide

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',

    }, 

    },

    ];
    

    View Slide

17. View Slide

18. Components
    and State
    ARCHITECTING GUTENBERG
    

    View Slide

19. View Slide

20. View Slide

21. “
    ”
    Build encapsulated components that manage their own
    state, then compose them to make complex UIs.
    reactjs.org/
    REACT WEBSITE
    

    View Slide

22. import { render } from '@wordpress/element';
    const HelloMessage = ( { name } ) => (
    
    Hello { name }
    
    );
    render(
    ,
    document.getElementById( 'hello-example' )
    );
    

    View Slide

23. “
    Centralizing your application’s state and logic enables
    powerful capabilities like undo/redo, state persistence,
    and much more.
    ”
    redux.js.org/
    REDUX WEBSITE
    

    View Slide

24. Extensibility
    ARCHITECTING GUTENBERG
    

    View Slide

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
    

    View Slide

26. import { addFilter } from '@wordpress/hooks';
    const replacePostFeaturedImage = () => (
    
    The replacement contents or components.
    
    );
    addFilter(
    'editor.PostFeaturedImage',
    'my-plugin/replace-post-featured-image',
    replacePostFeaturedImage
    );
    

    View Slide

27. Modular
    Architecture
    ARCHITECTING GUTENBERG
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. Embracing
    Modern
    JavaScript
    CHAPTER III
    

    View Slide

33. View Slide

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
    

    View Slide

35. “
    ”
    MATT MULLENWEG
    Learn JavaScript, deeply.
    WordCamp US 2015
    

    View Slide

36. EMBRACING MODERN JAVASCRIPT
    JavaScript
    Versions
    

    View Slide

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
    } );
    } )();
    

    View Slide

38. 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,
    } );
    

    View Slide

39. 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,
    } );
    

    View Slide

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
    });
    

    View Slide

41. 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,
    } );
    

    View Slide

42. EMBRACING MODERN JAVASCRIPT
    Code Reuse
    

    View Slide

43. View Slide

44. EMBRACING MODERN JAVASCRIPT
    Code Quality
    

    View Slide

45. View Slide

46. View Slide

47. CHAPTER IV
    Reusable
    Scripts
    

    View Slide

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/
    

    View Slide

49. REUSABLE SCRIPTS
    Setup
    

    View Slide

50. npm install @wordpress/scripts --save-dev
    

    View Slide

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"
    }
    }
    

    View Slide

52. REUSABLE SCRIPTS
    Building
    

    View Slide

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"
    }
    }
    

    View Slide

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"
    }
    }
    

    View Slide

55. 1. Install dependencies: npm install.
    2. Start development builds: npm start.
    3. Develop. Test. Repeat.
    4. Create production build: npm run build.
    Workflow
    

    View Slide

56. REUSABLE SCRIPTS
    Other Tasks
    

    View Slide

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"
    }
    }
    

    View Slide

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"
    }
    }
    

    View Slide

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"
    }
    }
    

    View Slide

60. Learn more:
    www.npmjs.com/package/@wordpress/scripts
    

    View Slide

61. CHAPTER V
    Key Takeaways
    

    View Slide

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.
    

    View Slide

63. Learn JavaScript deeply and prosper!
    

    View Slide

64. Thank You!
    Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl
    

    View Slide

65. Thank You!
    Grzegorz (Greg) Ziółkowski @gziolo gziolo.pl
    

    View Slide