1 of 77

Fastest way of creating

Gutenberg blocks

with minimal JavaScript knowledge

Imran Sayed @imranhsayed

22 Feb 2020

LIVE

.

LIVESTREAM

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

2 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

3 of 77

Need for building custom Blocks?

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

4 of 77

Ways of building blocks

ES5

ES

&

JSX

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

5 of 77

Challenges in building blocks with ES6

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

6 of 77

Challenges in building blocks with ES6

JavaScript and React have learning curve�
Requires an extra build step for code transformation�
Tooling around JavaScript could be intimidating.

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

7 of 77

Challenges in building blocks with ES6

ES5 without JSX can run straight in the browser.

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

8 of 77

ES6

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

9 of 77

ES6

Import Statements

E.g. import { registerBlockType } from '@wordpress/blocks';�

Arrow Functions.

() => {}

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

10 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

11 of 77

React

Components

<RichText>, <InspectorControls>, <TextControl>�

Classes
Hooks
State management concepts

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

12 of 77

JSX

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

13 of 77

JSX

{ __( ‘Hello World!’, ‘create-block’ ) }

</p>

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

14 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

15 of 77

{

"presets": [

"@babel/preset-env",

"@babel/preset-react"

],

"plugins": [

"react-require"

]

}

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

16 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

17 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

18 of 77

There is so much learn??

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

19 of 77

May give up?

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

20 of 77

Is there a simpler way?

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

21 of 77

Building blocks with minimal JavaScript

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

22 of 77

Dynamic Blocks

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

23 of 77

Building Dynamic blocks with minimal JavaScript :��1. Using wordpress/create-block

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

24 of 77

@wordpress/create-block

Officially supported way to create blocks for registering a block for a WordPress plugin.�
Offers a modern build setup with no configuration.

generates PHP, JS, CSS code, and everything else you need to start the project.

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

25 of 77

Generate blocks with create-block

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

26 of 77

todo-list.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

27 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

28 of 77

src/index.js

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

29 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

30 of 77

2. Using WP-CLI

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

31 of 77

Generate blocks with WP-CLI

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

32 of 77

movie.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

33 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

34 of 77

index.js

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

35 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

36 of 77

Adding a dynamic block

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

37 of 77

Using dynamic Block - serverSideRender

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

38 of 77

Using dynamic Template

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

39 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

40 of 77

Movies block - �3 latest movies

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

41 of 77

Can we build blocks without using JavaScript?

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

42 of 77

#WCASIA 2020

BLOCKS

Answer: Yes

Blocks ( 5.8+ Pro )

ACF Blocks is a PHP framework that does not require any JavaScript.

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

43 of 77

A WordPress plugin.

What is ACF?

Add extra content fields to edit screens.

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

44 of 77

Building Blocks with ACF

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

45 of 77

WordPress Block API�

Install packages
Register Block Server Side
Register Block Client Side

Steps Involved

ACF Blocks

Register Block Server Side

acf_register_block_type()

Create Fields
Load the template

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

46 of 77

Difference

WordPress Block API

ACF Blocks

Client Side or Server Side

Static or Dynamic

Dynamic

Server Side

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

47 of 77

ACF Blocks demo

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

48 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

49 of 77

Building a brands block

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

50 of 77

Step 1: Register Block Server Side

�function gt_register_block() {

acf_register_block_type( $settings );

}

add_action( ‘acf/init’, 'gt_register_block' );

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

51 of 77

Add Settings

$settings = [

'name' => ‘integration-brands',

'title' => __( ‘Integrations By Brands’ ),

'description' => __( ‘Brand block' ),

'render_template' => 'path/to/brands.php',� 'icon' => 'images-alt',

'category' => 'formatting',

‘enqueue_style’ => 'path/to/style.css'

];

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

52 of 77

Step 2: Create Fields

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

53 of 77

Step 3: Load block template�- brands.php

$block

print_r( $block )

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

54 of 77

print_r( $block )

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

55 of 77

brands.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

56 of 77

brands.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

57 of 77

brands.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

58 of 77

brands.php

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

59 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

60 of 77

Demo in Editor

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

61 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

62 of 77

Demo in Front end

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

63 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

64 of 77

Live Preview and Edit Mode

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

65 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

66 of 77

More blocks example

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

67 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

68 of 77

Creating blocks with JavaScript Vs ACF

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

69 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

70 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

71 of 77

Block generation and other tools

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

72 of 77

Ways of Building Blocks

ES5

ES

&

JSX

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

73 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

74 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

75 of 77

WordPress Training Program

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

76 of 77

learn.rtcamp.com

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS

77 of 77

#WCASIA 2020

BLOCKS

L I V E S T R E A M

#WCASIA 2020

BLOCKS