Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating Gutenberg Blocks With ACF

394 views

Published on

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/

Published in: Software

Creating Gutenberg Blocks With ACF

  1. 1. Creating Gutenberg Blocks With ACF Imran Sayed @imranhsayed #WCVadodara
  2. 2. #WCVadodara What are Gutenberg Blocks?
  3. 3. ❖ Gutenberg is a block-based editor. Gutenberg Blocks #WCVadodara
  4. 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. 5. #WCVadodara Need for Gutenberg Blocks?
  6. 6. #WCVadodara Problem with the Classic Editor
  7. 7. #WCVadodara How Gutenberg Solved it.
  8. 8. #WCVadodara Gutenberg Blocks Design Reuse Editing Experience
  9. 9. #WCVadodara Types of Blocks
  10. 10. #WCVadodara Core Blocks
  11. 11. #WCVadodara Block Plugins & Libraries
  12. 12. #WCVadodara WP Form : Block Plugin
  13. 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. 14. #WCVadodara Ultimate Blocks: Star Rating
  15. 15. #WCVadodara Ultimate Blocks: Review Block
  16. 16. #WCVadodara Need for building Custom Blocks
  17. 17. Ways of Building Blocks #WCVadodara ES5 ES & JSX Next
  18. 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. 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. 20. ❖ Tooling around JavaScript could be intimidating. #WCVadodara Challenges in building blocks with ES6
  21. 21. #WCVadodara Step 1: Build- Install @wordpress/scripts
  22. 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. 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. 24. #WCVadodara Can we build blocks without using JavaScript?
  25. 25. Answer: Yes#WCVadodara Blocks ( 5.8+ Pro ) ACF Blocks is a PHP framework that does not require any JavaScript.
  26. 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. 27. Create Field Group#WCVadodara
  28. 28. #WCVadodara
  29. 29. ❖ Build website’s faster and educate your client’s quicker. ❖ Free/ Pro Features #WCVadodara
  30. 30. #WCVadodara Build blocks with ACF
  31. 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. 32. #WCVadodara WordPress Block API Difference Blocks ❖ Client Side or Server Side ❖ Server Side ❖ Static or Dynamic ❖ Dynamic
  33. 33. #WCVadodara Testimonial Block using ACF Blocks
  34. 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. 35. #WCVadodara Step 1: Register Block Server Side function register_block() { acf_register_block_type( $settings ) } add_action( ‘acf/init’, 'register_block' );
  36. 36. #WCVadodara Add Settings $settings = [ 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'description' => __( 'Testimonial block.' ), 'render_template' => 'path/to/testimonial.php', 'category' => 'formatting', ];
  37. 37. #WCVadodara Step 2- Create Fields
  38. 38. Step 3: Load Block Template ( template.php ) #WCVadodara
  39. 39. $block print_r( $block ) #WCVadodara
  40. 40. #WCVadodara
  41. 41. template.php
  42. 42. #WCVadodara
  43. 43. #WCVadodara Live Preview and Edit Mode
  44. 44. #WCVadodara
  45. 45. 🌎 PHP Environment 🎨 Simple Templating 🔌 Custom Fields Compatible 👀 Live Previews 🌈 Native Compatibility 🎉 Anywhere and everywhere ACF Blocks Features #WCVadodara
  46. 46. #WCVadodara Common Questions
  47. 47. ● 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
  48. 48. ● enqueue_block_assets : both editor and front-end ● enqueue_block_editor_assets : editor only Style block differently in editor #WCVadodara
  49. 49. Ways of Building Blocks #WCVadodara ES5 ES & JSX Next
  50. 50. ❖ Git repo for this example https://github.com/imranhsayed/acf -guten-blocks Git Repo #WCVadodara
  51. 51. #WCVadodara ACF - making developers life easy rtCamp WordCamp Vadodara - organizing Elliot Condon - support Mahvash Fatima - Ppt Design Credits
  52. 52. #WCVadodara rtCamp’s WordPress Training Program
  53. 53. #WCVadodara learn.rtcamp.com
  54. 54. #WCVadodara Codeytek Academy
  55. 55. #WCVadodara academy.codeytek.com
  56. 56. #WCVadodara
  57. 57. #WCVadodara Questions
  58. 58. #WCVadodara Imran Sayed imranhsayed

×