Building Custom WordPress Blocks with React - WCPHX 2019

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

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