Gutenberg brings a powerful block editing experience with several default blocks but sometimes we may need to create custom ones. Creating Gutenberg blocks can be a challenging task as it involves writing a lot of code, even for creating a simple testimonial block. Since the process of learning JavaScript and React can be time-consuming, many developers find creating custom blocks quite complicated. Do I really need to learn JavaScript deeply to build blocks? Is there a quicker and simpler way? Well, this is where Advanced Custom Fields (ACF) come to the rescue. Through these slides, Imran will demonstrate how ACF blocks feature would help you create blocks in a very simple way. https://2019.vadodara.wordcamp.org/creating-gutenberg-blocks-with-acf-by-imran-sayed/

1. Creating Gutenberg Blocks
With ACF
Imran Sayed @imranhsayed
#WCVadodara

2. #WCVadodara
What are Gutenberg Blocks?

3. ❖ Gutenberg is a block-based editor.
Gutenberg Blocks
#WCVadodara

4. ❖ Every content element (e.g. heading,
paragraph, or YouTube embed) is a
block.
❖ The collection of blocks makes up
the content on the page.
Gutenberg Blocks
#WCVadodara

5. #WCVadodara
Need for Gutenberg Blocks?

6. #WCVadodara Problem with the Classic Editor

7. #WCVadodara How Gutenberg Solved it.

8. #WCVadodara
Gutenberg Blocks
Design Reuse Editing Experience

9. #WCVadodara
Types of Blocks

10. #WCVadodara Core Blocks

11. #WCVadodara
Block Plugins & Libraries

12. #WCVadodara WP Form : Block Plugin

13. #WCVadodara Ultimate Blocks: Block Library
● Content Filter
● Review
● Table of Contents
● Testimonial
● Click to Tweet
● Social Share
● Countdown
● Progress Bar
● Star Rating
● Image Slider

14. #WCVadodara Ultimate Blocks: Star Rating

15. #WCVadodara Ultimate Blocks: Review Block

16. #WCVadodara
Need for building Custom Blocks

17. Ways of Building Blocks
#WCVadodara
ES5
ES
&
JSX
Next

18. ❖ Learn JavaScript and React.
❖ Requires an extra build step for code
transformation (
@wordpress/scripts can be used )
#WCVadodara
Challenges in building blocks with ES6

19. ❖ ES5 without JSX can run straight in
the browser.
❖ Locating and understanding the
compiled source code is difficult.
#WCVadodara
Challenges in building blocks with ES6

20. ❖ Tooling around JavaScript could be
intimidating.
#WCVadodara
Challenges in building blocks with ES6

21. #WCVadodara
Step 1: Build- Install @wordpress/scripts

22. #WCVadodara Step 2: Register Block Server Side
public function register_block() {
…..
// Block editor script.
register_block_type(
'gtcb-blocks/custom-blocks',
[
'style' => 'gtcb-block-front-end-styles',
'editor_style' => 'gtcb-block-editor-styles',
'editor_script' => 'gtcb-block-editor-js',
] );

23. #WCVadodara Step 3: Register Block Client Side
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
registerBlockType( 'gtcb-blocks/custom-blocks', {
title: __( 'Custom Block', 'custom-blocks' ),
icon: 'megaphone',
category: 'common',
edit: () => ( <div>Hello World</div> ),
save: () => ( <div>Hello World</div> )
} );

24. #WCVadodara
Can we build blocks without
using JavaScript?

25. Answer: Yes#WCVadodara
Blocks ( 5.8+ Pro )
ACF Blocks is a PHP framework
that does not require any
JavaScript.

26. ❖ A WordPress plugin.
What is ACF?
#WCVadodara
❖ Allows you to add extra content
fields( custom fields ) to your
WordPress edit screens.
Author : Elliot Condon

27. Create Field Group#WCVadodara

28. #WCVadodara

29. ❖ Build website’s faster and educate
your client’s quicker.
❖ Free/ Pro
Features
#WCVadodara

30. #WCVadodara
Build blocks with ACF

31. #WCVadodara
WordPress Block API
❖ Install packages
❖ Register Block Server
Side
❖ Register Block Client
Side
Steps Involved
Blocks
❖ Register Block Server
Side
acf_register_block_type()
❖ Create Fields
❖ Load the template

32. #WCVadodara
WordPress Block API
Difference
Blocks
❖ Client Side or Server
Side
❖ Server Side
❖ Static or Dynamic ❖ Dynamic

33. #WCVadodara
Testimonial Block using
ACF Blocks

34. #WCVadodara Create a plugin
mkdir acf-guten-blocks
cd acf-guten-blocks
touch acf-guten-blocks.php testimonial.php
├── acf-guten-blocks.php
├── testimonial.php

35. #WCVadodara Step 1: Register Block Server Side
function register_block() {
acf_register_block_type( $settings )
}
add_action( ‘acf/init’, 'register_block' );

36. #WCVadodara Add Settings
$settings = [
'name' => 'testimonial',
'title' => __( 'Testimonial' ),
'description' => __( 'Testimonial block.' ),
'render_template' => 'path/to/testimonial.php',
'category' => 'formatting',
];

37. #WCVadodara Step 2- Create Fields

38. Step 3: Load Block Template
( template.php )
#WCVadodara

39. $block
print_r( $block )
#WCVadodara

40. #WCVadodara

41. template.php

49. #WCVadodara

52. #WCVadodara
Live Preview and Edit Mode

53. #WCVadodara

54. 🌎 PHP Environment
🎨 Simple Templating
🔌 Custom Fields Compatible
👀 Live Previews
🌈 Native Compatibility
🎉 Anywhere and everywhere
ACF Blocks Features
#WCVadodara

55. #WCVadodara
Common Questions

56. ● Scope
● Meta boxes save data to
‘postmeta’ table
● ACF Block data is saved
within the “post_content”
as an HTML comment
How are ACF blocks different
from meta boxes?
#WCVadodara

57. ● enqueue_block_assets :
both editor and front-end
● enqueue_block_editor_assets :
editor only
Style block differently in
editor
#WCVadodara

58. Ways of Building Blocks
#WCVadodara
ES5
ES
&
JSX
Next

59. ❖ Git repo for this example
https://github.com/imranhsayed/acf
-guten-blocks
Git Repo
#WCVadodara

60. #WCVadodara
ACF - making developers life easy
rtCamp
WordCamp Vadodara - organizing
Elliot Condon - support
Mahvash Fatima - Ppt
Design
Credits

61. #WCVadodara
rtCamp’s WordPress
Training Program

62. #WCVadodara learn.rtcamp.com

63. #WCVadodara
Codeytek Academy

64. #WCVadodara academy.codeytek.com

65. #WCVadodara

66. #WCVadodara
Questions

67. #WCVadodara
Imran Sayed
imranhsayed