Using Core blocks Create Gutenberg Blocks Plugin In WordPress - July 2022 Ahmedabad WordPress Meetup

In this session we have covered how to create Gutenberg block plugin using WordPress core blocks like title, image, query post, text area and etc.

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

Speaker:
==============
Jagir Bahesh

Transcript

1. Ahmedabad WordPress Meetup Using Core blocks Create Gutenberg Blocks plugin for WordPress Jagir Bahesh
2. 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.
3. 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?
4. 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?
5. 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:
6. 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:
7. 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:
8. 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:
9. 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:
10. 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
11. 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
12. 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?
13. Ahmedabad WordPress Meetup Local Demo Link: • http://localhost:8888/wordpress-meetup-demo/core-block-demo-by-ja gir/ Demo in Exiting Plugin
14. 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 '<pre>'; print_r( $parsed_block ); echo '</pre>'; exit(); Debugging:
15. 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:
16. 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:
17. Ahmedabad WordPress Meetup _? Any Questions?
18. Ahmedabad WordPress Meetup <?php echo ‘Thank You!’; ?> 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