Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020
Ähnlich wie Fastest Way Of Creating Gutenberg Blocks With Minimal JavaScript Knowledge - Pop-Up Livestream 22nd Feb 2020 (20)
Mehr von Imran Sayed
Mehr von Imran Sayed (19)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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
- 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.
- 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
- 13. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM JSX <p className={ className }> { __( ‘Hello World!’, ‘create-block’ ) } </p>
- 18. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM There is so much learn??
- 20. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Is there a simpler way?
- 21. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Building blocks with minimal JavaScript
- 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
- 37. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Using dynamic Block - serverSideRender
- 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.
- 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
- 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'
- 53. #WCASIA2020 BLOCKS #WCASIA2020 BLOCKS LIVESTREAM Step 3: Load block template - brands.php $block print_r( $block )
- 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