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