Slide 1

Slide 1 text

Custom Block Development A Workshop w Zac Gordon @zgordon

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Things To Know

Slide 6

Slide 6 text

Things To Know Blocks Are Built with React & JavaScript

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

You don’t have to setup tooling from scratch!

Slide 21

Slide 21 text

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!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

A note on registering blocks with PHP & JS

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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!

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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!

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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!

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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