Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

More Decks by Grzegorz (Greg) Ziółkowski

Other Decks in Programming

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