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
   

   View Slide

2. Agenda
   1. History of JavaScript.
   2. Architecting Gutenberg.
   3. Embracing Modern JavaScript.
   4. Practical Application.
   

   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. 
    
    uploads/2020/03/gutenberg-block.png”
    alt="Gutenberg block" class="wp-image-6616"/>
    Gutenberg block
    
    
    

    View Slide

14. 
    
    uploads/2020/03/gutenberg-block.png”
    alt="Gutenberg block" class="wp-image-6616"/>
    Gutenberg block
    
    
    

    View Slide

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

    }, 

    },

    ];
    

    View Slide

16. View Slide

17. Components
    and State
    ARCHITECTING GUTENBERG
    

    View Slide

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

    View Slide

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

    View Slide

20. “
    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

21. Extensibility
    ARCHITECTING GUTENBERG
    

    View Slide

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
    

    View Slide

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

    View Slide

24. Modular
    Architecture
    ARCHITECTING GUTENBERG
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. Embracing
    Modern
    JavaScript
    CHAPTER III
    

    View Slide

30. View Slide

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
    

    View Slide

32. EMBRACING MODERN JAVASCRIPT
    JavaScript
    Versions
    

    View Slide

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

    View Slide

34. 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

35. 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

36. 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

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

    View Slide

38. MODERN JAVASCRIPT
    Reusable
    Scripts
    

    View Slide

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/
    

    View Slide

40. $ npm install @wordpress/scripts --save-dev
    

    View Slide

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

    View Slide

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

    View Slide

43. Practical
    Application
    CHAPTER IV
    

    View Slide

44. $ npm init @wordpress/block --template es5
    wordsesh—apac
    

    View Slide

45. View Slide

46. $ npm init @wordpress/block
    

    View Slide

47. View Slide

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
    

    View Slide

49. View Slide

50. CHAPTER V
    Key Takeaways
    

    View Slide

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.
    

    View Slide

52. Learn JavaScript deeply and prosper!
    

    View Slide

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

    View Slide