Getting Started With Gutenberg Blocks

Getting Started with Gutenberg Blocks

View Slide

@EricDebelak
[email protected]
Slides: https://11online.us/getting-started-building-gutenberg-blocks/
• I’m a Senior Developer/co-founder at 11 online
• Started Block Party (https://wpblock.party) this year
• I ﬁrst tried WordPress in 2004, started using it more in 2006, started really
developing for WordPress in 2013
• These days I work mostly in React.js on the front end and either python
(Flask) or PHP (Lumen) on the backend. I also do some Android dev and,
of course, WordPress. I started using React.js over 2 years ago.
About me - Eric Debelak

View Slide

@EricDebelak
[email protected]
• New WordPress editor as of...?
• A What You See Is What You Get (WYSIWYG) Experience
• Content paradigm is BLOCKS!
• Comes with simple blocks, but you can build custom blocks
What is Gutenberg?

View Slide

DEMO

View Slide

@EricDebelak
[email protected]
• Do you have branding guidelines to follow? If so, Gutenberg by default
gives you too much freedom
Why Make Custom Blocks

View Slide

@EricDebelak
[email protected]
• What you can do with the
default paragraph block:
• Content creators should be
focusing on creating
content, not making styling
choices
Why Make Custom Blocks

View Slide

@EricDebelak
[email protected]
• Gutenberg is written in React.js, a modern front-end library from Facebook
https://reactjs.org/
• Most examples will use the ES6 and JSX syntax, which makes writing
React.js much easier
• Gutenberg uses attributes to interact with blocks
• Blocks are then saved in the post content as HTML, JSON data in HTML
comments or a combination of the two
Basics

View Slide

@EricDebelak
[email protected]
• When you register a block, you have an edit method and a save method
• The save method is responsible for turning the attributes into HTML that will
then be shown on posts and pages
Basics (continued)

View Slide

@EricDebelak
[email protected]
• The attributes are saved as JSON in html comments unless they are
attached to an html element
Basics (continued)

View Slide

@EricDebelak
[email protected]
• On the editor side, Gutenberg reads the attributes for each block, and
then sets the editor method with those attributes
• The editor method then allows users to interact with the block and change
the attributes
• The editor method can include a preview of what the block will look like in
the save method
Basics (continued)

View Slide

@EricDebelak
[email protected]
• Gutenberg allows for templating
as well - https://wordpress.org/
gutenberg/handbook/templates/
• Add in attributes and defaults
• And you can lock the templates
Basics (continued) - Templates

View Slide

@EricDebelak
[email protected]
Resources:
https://wordpress.org/gutenberg/handbook/
https://github.com/WordPress/gutenberg
Basics (continued)

View Slide

@EricDebelak
[email protected]
• We can’t cover everything here, but hopefully we’ll cover enough for you
to get started and follow the example
• Modern JavaScript requires at the very least build processes. Browsers
can’t read JSX or ES6 and the code needs to be compiled into what
browsers can read.
• To set up these build processes, we need Node.js and npm (Node Package
Manager). https://nodejs.org/en/
Getting Started

View Slide

@EricDebelak
[email protected]
• Once we have these tools, we can set up Babel or Webpack for our build
process or use a zero-conﬁguration tool to help us
• Create Guten Block (https://github.com/ahmadawais/create-guten-block)
Getting Started (continued)
create-guten-block my-block
cd my-block
npm start

View Slide

@EricDebelak
[email protected]
• Some Basic ES6 - arrow functions
function(param) {
}
(param) => {
}
• mutable and immutable variable assignments
let a = 1; //mutable
const b = 2; //immutable

View Slide

@EricDebelak
[email protected]
• destructuring
const { keyOne, keyTwo } = objectVariable;
var keyOne = objectVariable.keyOne;
var keyTwo = objectVariable.keyTwo;

View Slide

@EricDebelak
[email protected]
• Some Basic JSX - XML like JS syntax - our edit and save methods must
return either null or a JSX element (or vanilla JS equivalent)
const element =
React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
const element = (

Hello, world!

);

View Slide

@EricDebelak
[email protected]
• setAttributes - function to change a blocks attributes
• isSelected - see if the user has selected your block
• Editor components:
• Plain Text, Rich Text, Media Upload, Color Palette, Dropdown, Inner
Blocks, Select Control, Toggle Control, and more.
• Complete list - https://github.com/WordPress/gutenberg/tree/master/
components and https://github.com/WordPress/gutenberg/tree/master/
blocks
Gutenberg - What’s built in

View Slide

@EricDebelak
[email protected]
• Need some help with your edit methods?
• Node Package Manager - npm - https://www.npmjs.com/
• npm has 650,000 packages.
• Very useful for extending default functionality.
Adding More

View Slide

@EricDebelak
[email protected]
• https://github.com/11online/gutenberg-simple-paragraph
Going over a simple example

View Slide

@EricDebelak
[email protected]
• directory structure of where
we’ll be working
• also includes a dist directory
for the compiled code

View Slide

@EricDebelak
[email protected]
• src/block/block.js - imports and variable assignments

View Slide

@EricDebelak
[email protected]
• src/block/block.js - registerBlockType part 1

View Slide

@EricDebelak
[email protected]
• src/block/block.js - registerBlockType part 2

View Slide

@EricDebelak
[email protected]
• src/block/block.js - edit part 1

View Slide

@EricDebelak
[email protected]
• src/block/block.js - edit part 2

View Slide

@EricDebelak
[email protected]
• src/block/block.js - save

View Slide

@EricDebelak
[email protected]
Our approach (in development) for client sites
• https://github.com/11online/11online-blocks
Advanced Block Demos
• https://github.com/11online/gutenberg-simple-statistics
• https://github.com/11online/gutenberg-simple-weather-block
More advanced examples for the curious

View Slide

@EricDebelak
[email protected]
• Validation - Gutenberg revalidates both the html and the attributes, so you
need default attributes or selectors for everything
• Arrays don’t allow for declaration of sub attributes
• setAttributes has no callback!
• Using out of the box components do not always look like the front end of
the site will (PlainText, RichText)
• Inner Blocks are really useful, but you can only use one per block
Gotchas

View Slide

QUESTIONS?
@EricDebelak
[email protected]

View Slide

Getting Started With Gutenberg Blocks

Getting Started With Gutenberg Blocks

Eric Debelak

More Decks by Eric Debelak

Other Decks in Programming

Featured

Transcript