Creating your�First Block

Brian Richards / @rzen

WPSessions.com

Who still needs help with their local setup?

Add Josh’s companion plugin:

Update my companion plugin:

$> cd /app/public/wp-content/plugins/gutendev

$> git pull

​

https://github.com/brichards/gutendev

$> cd /app/public/wp-content/plugins

$> git clone https://github.com/caldera-learn/alert-block.git

Create required files

Step 1

What we’ll need

• Base PHP file to register assets
• JS file for powering the block
• (Optional) CSS for rendering front-end styles
• (Optional) CSS for additional admin styles

Admin-only styles

Front-end (and admin) styles

01-static

assets

block.js

editor.css

style.css

index.php

JS file for powering the block

Base file to register assets

Register the assets

Step 2

What we’re registering

• wp_register_script() – main block JS
• wp_register_style() – front-end and admin styles
• register_block_type() – attach assets to block

Create the rest of the block

Step 3

What we’re going to do...

• Include external dependencies
• Register a title
• Add an icon*
• Set the category
• Add some keywords
• Define edit functionality
• Define save functionality

https://developer.wordpress.org/resource/dashicons/

Code demo time.

And now for something you’ll really enjoy!

This seems like a lot of work for very little return...

“

— YOU, 30 SECONDS AGO

WP-CLI can accomplish this in 2 commands:

Plus one line of PHP:

$> wp scaffold plugin my-guten-block --skip-tests --activate

Success: Created plugin files.

​

$> wp scaffold block hello-block --title="Hello, Block!" --dashicon=smiley --category=common --plugin=my-guten-block

Success: Created block 'Hello, Block!'.

require_once plugin_dir_path( __FILE__ ) . '/blocks/hello-block.php';

https://github.com/ahmadawais/create-guten-block

More goodies

Suddenly things don’t look so bad!

“

— YOU, RIGHT NOW

Let’s make it editable

Step 4

What do we need to change?

• Include wp.blocks.RichText
• Add attributes props to the block
• Register a handler for data changes
• Pass props through the save() function

Code demo time.

Questions?