Building Custom WordPress Blocks with React - WCPHX 2019

De0a01122ca4a619004332ab04431b7b?s=47 Zac Gordon
February 16, 2019

Building Custom WordPress Blocks with React - WCPHX 2019

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

De0a01122ca4a619004332ab04431b7b?s=128

Zac Gordon

February 16, 2019
Tweet

Transcript

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

  2. Zac Gordon Hi! I am an educator with a current

    focus on JavaScript & WordPress. javascriptforwp.com/wcphx-2019
  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
  4. Don’t worry! You don’t need to know React (yet)

  5. Things To Know

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

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

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

    WordPress Now Ships with React and ReactDOM Custom Blocks Belong In Plugins, Not Themes
  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
  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
  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
  12. 1. Make sure you have a local copy of WordPress

    and a code editor with command line access. Plugin Setup
  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
  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
  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!
  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
  17. Tools Allows us to install helpful packages and easily run

    command line scripts. NPM
  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
  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
  20. You don’t have to setup tooling from scratch!

  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!
  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
  23. registerBlockType() A JavaScript function for registering a custom block type

    (CBT). Includes all the settings and code for a custom block.
  24. A note on registering blocks with PHP & JS

  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!
  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
  27. Attributes Are like variables. They define all of the editable

    content and features of a block.
  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!
  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
  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
  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
  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!
  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
  34. Inspector Controls Where Block Settings Go WordPress offers a special

    set of components for creating a sidebar for block settings..
  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 <InspectorControls /> and it’s related components to create a sidebar. Then we will add some settings to our block. Let’s Code!
  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
  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!
  38. “WCPHX2019” 50% OFF Discount valid for any of my Gutenberg

    courses. Valid for 1 hour only. javascriptforwp.com/wcphx-2019 Follow @zgordon