![#WCROC2020
BLOCKS
#WCASIA2020
BLOCKS
#WCROC2020
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"react-require"
]
}](https://image.slidesharecdn.com/wordcamprochester-talkpresentation-imransayed-201003170525/85/Fastest-Way-of-Creating-Gutenberg-Blocks-WordCamp-Rochester-15-320.jpg)
![#WCROC2020
BLOCKS
#WCASIA2020
BLOCKS
#WCROC2020
Register a Block Pattern
register_block_pattern(
'aquila/cover',
[
'title' => __( 'Aquila Cover', 'aquila' ),
'description' => __( 'Aquila Cover Block ', 'aquila' ),
'content' =>’<!-- wp:cover {"url".....’,
]
);](https://image.slidesharecdn.com/wordcamprochester-talkpresentation-imransayed-201003170525/85/Fastest-Way-of-Creating-Gutenberg-Blocks-WordCamp-Rochester-64-320.jpg)
Ad
More Related Content
Similar to Fastest Way of Creating Gutenberg Blocks - WordCamp Rochester (20)
More from Imran Sayed (19)
Ad
Recently uploaded (20)
Ad
Fastest Way of Creating Gutenberg Blocks - WordCamp Rochester
- 1. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Fastest way of creating Gutenberg blocks with minimal JavaScript knowledge Imran Sayed @imranhsayed 03 Oct 2020 #WCROC WordCamp Rochester
- 3. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Need for building custom Blocks?
- 4. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Ways of building blocks ES5 ES & JSX Next
- 5. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Challenges in building blocks with ES6
- 6. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 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. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Challenges in building blocks with ES6 ● ES5 without JSX can run straight in the browser.
- 9. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 ES6 ● Import Statements E.g. import { registerBlockType } from '@wordpress/blocks'; ● Arrow Functions. () => {}
- 11. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 React ● Components <RichText>, <InspectorControls>, <TextControl> ● Classes ● Hooks ● State management concepts
- 13. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 JSX <p className={ className }> { __( ‘Hello World!’, ‘create-block’ ) } </p>
- 18. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 There is so much learn??
- 20. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Is there a simpler way?
- 21. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Building blocks with minimal JavaScript
- 23. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Building Dynamic blocks with minimal JavaScript : Using wordpress/create-block
- 24. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 @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. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Generate blocks with create- block
- 31. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Using dynamic Block - serverSideRender
- 34. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Movies block - 3 latest movies
- 35. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Can we build blocks without using JavaScript?
- 36. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020#WCASIA2020 BLOCKS Answer: Yes Blocks ( 5.8+ Pro ) ACF Blocks is a PHP framework that does not require any JavaScript.
- 37. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 ● A WordPress plugin. What is ACF? ● Add extra content fields to edit screens.
- 39. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 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
- 40. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Difference WordPress Block API ACF Blocks ● Client Side or Server Side ● Static or Dynamic ● Dynamic ● Server Side
- 44. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Step 1: Register Block Server Side function gt_register_block() { acf_register_block_type( $settings ); } add_action( ‘acf/init’, 'gt_register_block' );
- 45. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Add Settings $settings = [ 'name' => ‘contact-card', 'title' => __( ‘Contact Card, ‘text- domain’), 'description' => __( ‘Contact Card Block', ‘text-domain’ ), 'render_template' => 'path/to/contact.php', 'icon' => 'id', 'category' => 'formatting',
- 47. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Step 3: Load block template - contact.php $block
- 61. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 How do we build an entire page section with Blocks?
- 63. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 What are Block Patterns? ● Block Patterns are predefined block layouts, ready to insert and tweak.
- 64. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Register a Block Pattern register_block_pattern( 'aquila/cover', [ 'title' => __( 'Aquila Cover', 'aquila' ), 'description' => __( 'Aquila Cover Block ', 'aquila' ), 'content' =>’<!-- wp:cover {"url".....’, ] );
- 65. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Block generation and other tools ● @wordpress/create-block ● Code repo - https://github.com/imranhsayed/aquila/ blob/master/inc/classes/class-block- patterns.php ● https://github.com/imranhsayed/acf- block-example
- 66. #WCROC2020 BLOCKS #WCASIA2020 BLOCKS #WCROC2020 Ways of Building Blocks ES5 ES & JSX Next