![#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',
] );](https://image.slidesharecdn.com/creatinggutenbergblockswithacf-191013064701/85/Creating-Gutenberg-Blocks-With-ACF-22-320.jpg)
![#WCVadodara Add Settings
$settings = [
'name' => 'testimonial',
'title' => __( 'Testimonial' ),
'description' => __( 'Testimonial block.' ),
'render_template' => 'path/to/testimonial.php',
'category' => 'formatting',
];](https://image.slidesharecdn.com/creatinggutenbergblockswithacf-191013064701/85/Creating-Gutenberg-Blocks-With-ACF-36-320.jpg)
Creating Gutenberg Blocks With ACF
- 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
- 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
- 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
- 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
- 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
- 65. #WCVadodara