Ahmedabad WordPress Meetup Using Core blocks Create Gutenberg Blocks plugin for WordPress Jagir Bahesh 

Ahmedabad WordPress Meetup Agenda ● What is Gutenberg? ● What knowledge you should have? ● Gutenberg Editor Pros and Cons ● Installation requirements ● Commands for compilation ● How to create Gutenberg block plugin? ● How to use core blocks in our block plugin? ● Demo in Existing plugins. ● Questions & Answers. ● Conclusion. 

Ahmedabad WordPress Meetup ● Gutenberg helps you create content in a more visual way than the previous TinyMCE editor. To do this, it provides a library of pre-built elements, or ‘blocks’. Each block can be added to a page or post and customized. There are blocks to handle basic components such as text and images, as well as some that provide advanced features (such as buttons and tables). ● Gutenberg blocks are the editor blocks that are used to create content layouts in the new WordPress block editor aka Gutenberg. Introduced in WordPress 5.0, the Gutenberg editor is a fully block-based editor where each piece of content is a draggable block. What is Gutenberg? 

Ahmedabad WordPress Meetup Before Start, you should have below knowledge: ● Basic WordPress plugin creation ● Basic knowledge of react ● Basic knowledge of code compilation ( NPM, Node, YARN ) What knowledge you should have? 

Ahmedabad WordPress Meetup Advantages: ● Gutenberg editor that is very easy to use. ● Basic Technical knowledge about editor is required. ● Clear separation of layout and content allows easy distribution of content to other Post and Pages ● Developers can create custom and reusable content blocks with ReactJS knowledge. ● Reusable Blocks, so you can use any block on any Page or Post. ● Gutenberg is definitely more mobile-friendly and easy to use from any mobile device. ● Also use predefined Patterns, you can use in your Page or Post based on your Design. Gutenberg Editor Pros and Cons: 

Ahmedabad WordPress Meetup Disadvantages: ● Compatible with WPML ( still facing some issues ) ● You can export but not able to import in other CMS or WP site which not build with Gutenberg. ● Still we have issue of compatible plugins and theme of gutenberg . ● This editor has Double scrollbar, Double sidebar, Tiny Sidebar Gutenberg Editor Pros and Cons: 

Ahmedabad WordPress Meetup ● For composer install please follow below URL: https://getcomposer.org/download/ ● For Node.js please follow below URL: https://nodejs.org/en/download/ Installation requirements: 

Ahmedabad WordPress Meetup npm init ● Can be used to set up a new or existing npm package. npm install ● This command installs a package, and any packages that it depends on but for that we need the existing package.json file. Commands for compilation: 

Ahmedabad WordPress Meetup npm start ● Use to compile and run the block in development mode. ● Watches for any changes and reports back any errors in your code. npm run build ● Use to build production code for your block inside dist folder. ● Runs once and reports back the gzip file sizes of the produced code. Commands for compilation: 

Ahmedabad WordPress Meetup How to create Gutenberg block plugin? 01 02 03 Install composer https://getcomposer.org/download/ Install Node.js https://nodejs.org/en/download/ Open your plugin directory 

Ahmedabad WordPress Meetup How to create Gutenberg block plugin? 04 05 06 Once you are in your plugin directory ● npx @wordpress/create-block my-first-block ● npx create-guten-block my-first-block After Run above Command of NPX Active Plugin, You can check WP admin and you find your first Plugin and In Page/Post Gutenberg with Widget section you will find your first Gutenberg Block. Run NPM for development npm run start 

Ahmedabad WordPress Meetup Core Blocks Reference: ● https://developer.wordpress.org/block-editor/referenc e-guides/core-blocks/ Third Party Core Blocks Reference: ● https://fullsiteediting.com/block-reference/ How to use core blocks in our block plugin? 

Ahmedabad WordPress Meetup Local Demo Link: ● http://localhost:8888/wordpress-meetup-demo/core-block-demo-by-ja gir/ Demo in Exiting Plugin 

Ahmedabad WordPress Meetup ● Add code into function.php file with ID where you add your gutenberg code, so after adding you can see your block render array with all options. $my_post = get_post( Your POST/PAGE ID ); $parsed_block = parse_blocks( $my_post->post_content ); echo '

';
print_r( $parsed_block );
echo '

'; exit(); Debugging: 

Ahmedabad WordPress Meetup WordPress: ● https://developer.wordpress.org/block-editor/how-to-guides/block-tutoria l/writing-your-first-block-type/ ● https://developer.wordpress.org/block-editor/getting-started/ ● https://torquemag.io/2019/05/create-gutenberg-block/ Article In Simple Language: ● https://kinsta.com/blog/gutenberg-blocks/ Useful Links and blogs: 

Ahmedabad WordPress Meetup Understand Package Json File: ● https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/ React JS: ● https://reactjs.org/tutorial/tutorial.html Useful Links and blogs: 

Ahmedabad WordPress Meetup _? Any Questions? 

Ahmedabad WordPress Meetup Jagir Bahesh is a Team Leader at ZealousWeb Technologies by profession. He has over 7 years of experience in the area; He loves creativity and believes that the world of WordPress is endless and wishes to be a successful contributor in that community. He also organizes WordCamps and WordPress Meetups both in Ahmedabad and Asia. W: http://jagirbahesh.in/ T: https://twitter.com/jagirbahesh Jagir Bahesh