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

Building Custom WordPress Blocks with React - WCPHX 2019

Zac Gordon
February 16, 2019

Building Custom WordPress Blocks with React - WCPHX 2019

The slides for Zac's workshop on building custom Gutenberg blocks

Zac Gordon

February 16, 2019
Tweet

More Decks by Zac Gordon

Other Decks in Technology

Transcript

  1. Custom Block
    Development
    A Workshop
    w Zac Gordon
    @zgordon

    View Slide

  2. Zac Gordon
    Hi! I am an educator with a current focus
    on JavaScript & WordPress.
    javascriptforwp.com/wcphx-2019

    View Slide

  3. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  4. Don’t worry! You don’t
    need to know React (yet)

    View Slide

  5. Things
    To Know

    View Slide

  6. Things
    To Know
    Blocks Are Built with
    React & JavaScript

    View Slide

  7. Things
    To Know
    Blocks Are Built with
    React & JavaScript
    WordPress Now Ships with
    React and ReactDOM

    View Slide

  8. Things
    To Know
    Blocks Are Built with
    React & JavaScript
    WordPress Now Ships with
    React and ReactDOM
    Custom Blocks Belong In
    Plugins, Not Themes

    View Slide

  9. Things
    To Know
    Blocks Are Built with
    React & JavaScript
    WordPress Now Ships with
    React and ReactDOM
    Custom Blocks Belong In
    Plugins, Not Themes
    It Is Best to Use ES6+ With
    Tools Like Webpack & Babel

    View Slide

  10. Things
    To Know
    Blocks Are Built with
    React & JavaScript
    WordPress Now Ships with
    React and ReactDOM
    Custom Blocks Belong In
    Plugins, Not Themes
    It Is Best to Use ES6+ With
    Tools Like Webpack & Babel
    WordPress Offers A Library
    Of Pre-Built UI Components

    View Slide

  11. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  12. 1. Make sure you have a local copy of
    WordPress and a code editor with
    command line access.
    Plugin
    Setup

    View Slide

  13. 2.
    1. Make sure you have a local copy of
    WordPress and a code editor with
    command line access.
    Go to javascriptforwp.com/wcphx-2019
    and download the workshop files.
    Copy the files into your plugins folder.
    Plugin
    Setup

    View Slide

  14. 2.
    1. Make sure you have a local copy of
    WordPress and a code editor with
    command line access.
    Go to javascriptforwp.com/wcphx-2019
    and download the workshop files. Copy
    the files into your plugins folder.
    Activate the first plugin and open it in
    your code editor.
    3.
    Plugin
    Setup

    View Slide

  15. NOW WE WILL LOOK AT THE BASIC
    PHP NEEDED FOR SETTING UP A
    CUSTOM BLOCK PLUGIN.
    This will include registering our main JavaScript and CSS files
    and looking at the register_block_type function.
    Let’s
    Code!

    View Slide

  16. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  17. Tools
    Allows us to install helpful
    packages and easily run
    command line scripts.
    NPM

    View Slide

  18. Let’s us use modern ES6+
    JavaScript in our blocks as
    well as JSX with React.
    Babel
    Tools
    Allows us to install helpful
    packages and easily run
    command line scripts.
    NPM

    View Slide

  19. Let’s us use modern ES6+
    JavaScript in our blocks as
    well as JSX with React.
    Babel
    Tools
    Allows us to install helpful
    packages and easily run
    command line scripts.
    NPM
    Bundles our JavaScript files
    so we can use imports and
    exports.
    Webpack

    View Slide

  20. You don’t have to setup
    tooling from scratch!

    View Slide

  21. NOW WE WILL LOOK AT A BASIC
    TOOLING BOILERPLATE FOR CUSTOM
    BLOCK DEVELOPMENT.
    This will involve looking at the package.json,
    webpack.config.js and .babelrc files. Then we will run npm
    install and npm start and npm run build to test everything.
    Let’s
    Code!

    View Slide

  22. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  23. registerBlockType()
    A JavaScript function for
    registering a custom block
    type (CBT). Includes all the
    settings and code for a
    custom block.

    View Slide

  24. A note on registering
    blocks with PHP & JS

    View Slide

  25. NOW WE WILL LOOK AT HOW TO
    REGISTER A CUSTOM BLOCK USING
    JAVASCRIPT.
    This will involve registering using registerBlockType, giving it a
    unique name and adding the appropriate settings. We will
    also look at the i18n library and add some custom CSS to our
    block.
    Let’s
    Code!

    View Slide

  26. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  27. Attributes
    Are like variables. They define all
    of the editable content and
    features of a block.

    View Slide

  28. NOW WE WILL LOOK AT HOW TO
    SETUP ATTRIBUTES TO MAKE A
    DYNAMIC BLOCK.
    In this practice session we will look at how to setup a custom
    attribute to make our block editable or dynamic. We will also
    begin looking at how to destructure props, and write
    conditional statements based on whether block is selected.
    Let’s
    Code!

    View Slide

  29. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  30. This allows us to easily
    make interfaces that
    are styled and work well
    out of the box.
    Two UI Libraries
    - wp-components
    - wp-editor
    WP Offers Libraries of
    Styled UI Components
    Components

    View Slide

  31. WP
    Storybook
    An app where you can view the components from the wp-components
    library. Check it out here - https://wp-storybook.netlify.com

    View Slide

  32. NOW WE WILL LOOK AT HOW TO USE
    WP COMPONENTS INSIDE OF OUR
    BLOCKS.
    In this practice session we will look at how to use a
    component from wp-components and one from wp-editor.
    We will need to make sure the dependencies are included
    and we have them configured correctly.
    Let’s
    Code!

    View Slide

  33. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  34. Inspector
    Controls
    Where Block
    Settings Go
    WordPress offers a special
    set of components for
    creating a sidebar for block
    settings..

    View Slide

  35. NOW WE WILL LOOK AT HOW TO ADD
    INSPECTOR CONTROLS TO OUR
    BLOCK TO MANAGE SETTINGS.
    Now we will look at how to add and it’s
    related components to create a sidebar. Then we will add
    some settings to our block.
    Let’s
    Code!

    View Slide

  36. 1. Things to Know
    2. Plugin Setup
    3. Tooling
    4. A Static Block
    5. A Dynamic Block
    6. WP Components
    7. Inspector Controls
    8. Taking It Further
    Workshop
    Overview
    Follow @zgordon

    View Slide

  37. Taking It
    Further
    Read the Handbook, Experiment
    with Components, Look At Block
    Plugins, Take a Course...
    THERE IS SO MUCH
    MORE YOU CAN DO!

    View Slide

  38. “WCPHX2019” 50% OFF
    Discount valid for any of my Gutenberg
    courses. Valid for 1 hour only.
    javascriptforwp.com/wcphx-2019
    Follow @zgordon

    View Slide