Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020

1. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Fastest way of creating Gutenberg blocks with minimal JavaScript knowledge Imran Sayed @imranhsayed 22 Feb 2020 LIVE. LIVESTREAM

2. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM

3. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Need for building custom Blocks?

4. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Ways of building blocks ES5 ES & JSX Next

5. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Challenges in building blocks with ES6

6. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM 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.

7. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Challenges in building blocks with ES6 ● ES5 without JSX can run straight in the browser.

8. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM ES6

9. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM ES6 ● Import Statements E.g. import { registerBlockType } from '@wordpress/blocks'; ● Arrow Functions. () => {}

11. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM React ● Components <RichText>, <InspectorControls>, <TextControl> ● Classes ● Hooks ● State management concepts

12. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM JSX

13. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM JSX <p className={ className }> { __( ‘Hello World!’, ‘create-block’ ) } </p>

15. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM { "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "react-require" ] }

18. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM There is so much learn??

19. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM May give up?

20. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Is there a simpler way?

21. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Building blocks with minimal JavaScript

22. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Dynamic Blocks

23. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Building Dynamic blocks with minimal JavaScript : 1. Using wordpress/create-block

24. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM @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.

25. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Generate blocks with create- block

26. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM todo-list.php

28. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM src/index.js

30. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM 2. Using WP-CLI

31. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Generate blocks with WP-CLI

32. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM movie.php

34. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM index.js

36. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Adding a dynamic block

37. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Using dynamic Block - serverSideRender

38. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Using dynamic Template

40. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Movies block - 3 latest movies

41. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Can we build blocks without using JavaScript?

42. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM#WCASIA2020 BLOCKS Answer: Yes Blocks ( 5.8+ Pro ) ACF Blocks is a PHP framework that does not require any JavaScript.

43. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM ● A WordPress plugin. What is ACF? ● Add extra content fields to edit screens.

44. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Building Blocks with ACF

45. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM 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

46. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Difference WordPress Block API ACF Blocks ● Client Side or Server Side ● Static or Dynamic ● Dynamic ● Server Side

47. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM ACF Blocks demo

49. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Building a brands block

50. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Step 1: Register Block Server Side function gt_register_block() { acf_register_block_type( $settings ); } add_action( ‘acf/init’, 'gt_register_block' );

51. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM 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'

52. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Step 2: Create Fields

53. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Step 3: Load block template - brands.php $block print_r( $block )

54. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM print_r( $block )

55. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM brands.php

60. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Demo in Editor

62. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Demo in Front end

64. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Live Preview and Edit Mode

66. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM More blocks example

68. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Creating blocks with JavaScript Vs ACF

71. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Block generation and other tools ● WP-CLI ● @wordpress/create-block

72. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Ways of Building Blocks ES5 ES & JSX Next

75. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM WordPress Training Program

76. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM learn.rtcamp.com

Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020

You are reading a preview.

Check these out next

Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020

More Related Content

Similar to Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020 (20)

More from Imran Sayed (19)

Recently uploaded (20)