Gutenberg & Custom Block Development

It covers following things:

- Gutenberg - Introduction
- Make compatible with themes & plugins
- Custom Block Development
- How you can Lend a Hand with Gutenberg (Contribute)

Transcript

1. abdullahmzm@gmail.com @Software_abi Gutenberg & Custom Block Development How you can lend a hand with Gutenberg!!! abdullahmzm@gmail.com @Software_abi
2. abdullahmzm@gmail.com @Software_abi About Me - Abdullah Ramzan - WP Plugin Developer at PressTigers - Regular WordPress Core Contributor Dev - WordPress Theme Reviewer - Open Source Contributor in free time - International liaison for Urdu Support Forum @WordPress abdullahmzm@gmail.com @Software_abi
3. abdullahmzm@gmail.com @Software_abi What is Gutenberg? - New WordPress editor as of..? - A What You See Is What You Get (WYSIWYG) Experience - Content Paradigms is BLOCKS! - Comes with Simple Blocks but you can develop custom blocks abdullahmzm@gmail.com @Software_abi
4. abdullahmzm@gmail.com @Software_abi Gutenberg & Other Page Builders - Visual Composer - Divi Builders - Beaver Builder - Elementor - Page Builder by SiteOrigin abdullahmzm@gmail.com @Software_abi
5. abdullahmzm@gmail.com @Software_abi The Vision - Everything is a block - All blocks are created equal - Drag & Drop is additive - Placeholders are key - Direct manipulation - Customization
6. abdullahmzm@gmail.com @Software_abi Gutenberg - Basic - Gutenberg based on React.js, a modern frontend library owned by Facebook - Mostly use ES6 and JSX syntax, which makes writing React.js much easier - Gutenberg uses attributes to interact with the blocks - Blocks are then saved in the post content as HTML, JSON data in HTML comments or a combination of two - When you register a block, you have an edit method and a save method
7. abdullahmzm@gmail.com @Software_abi Gutenberg - Basic(conti.) - The save method is responsible for turning the attributes into HTML that will then be shown on posts and pages. - On the editor side, Gutenberg reads attributes for each block, and then sets the editor method with those attributes - The editor method then allows users to interact with the block and change the attributes - The editor method can include the preview of the block how it looks in the save method
8. abdullahmzm@gmail.com @Software_abi Block Anatomy - The attributes are saved as JSON in HTML comments unless they are attached to an HTML element e.g.
9. abdullahmzm@gmail.com @Software_abi Gutenberg Roadmap - Gutenberg will be turned off - Metaboxes will be supported - Custom Post Types will be supported - Shortcodes will continue to work - You don’t need a specific theme to use Gutenberg - Accessibility is not an afterthought - Gutenberg call out will be added in future WP releases abdullahmzm@gmail.com @Software_abi
10. abdullahmzm@gmail.com @Software_abi Gutenberg Roadmap(August 2018 & beyond) - All critical issues will be resolved - Integration with Calypso, offering opt-in users - 100k+ sites having made 250k+ post using Gutenberg - Core merge, beginning the 5.0 release cycle - 5.0 beta releases and translations completed - Mobile version of Gutenberg by the end of the year
11. abdullahmzm@gmail.com @Software_abi Gutenberg - Templates - Gutenberg allows for templating as well https://wordpress.org/gutenberg/handbook/te mplates/ - Set default settings for attributes - Ability to lock the templates
12. abdullahmzm@gmail.com @Software_abi Getting Started - Can’t cover the full but give you a basic idea how can we develop a custom block - Modern JS requires very least build process. Browsers can’t read ES6 and JSX so code needs to be compiled for the browser ease. - For setting up build process we need Node.js and npm(Node Package Manager) https://nodejs.org/en/ - Different ways to setup Babel and Webpack for build process or we can any use zero configuration tool like Create Guten Block https://github.com/ahmadawais/create-guten-block
13. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - I have developed a Simple Paragraph Block for you to give an idea how can we kick start for the Gutenberg custom block development - Clone/download Simple Paragraph Block code from my Github repo https://github.com/abdullah1908/simple-paragraph-block
14. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - Directory structure where we’ll be working - Also includes a dist directory for the compiled code
15. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - src/block/block.js - imports & variable assignments
16. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - src/block/block.js - registerBlockType - Part 1
17. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - src/block/block.js - registerBlockType - Part 2
18. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - src/block/block.js - edit function
19. abdullahmzm@gmail.com @Software_abi Simple Paragraph Block - Example - src/block/block.js - save function
20. abdullahmzm@gmail.com @Software_abi Gutenberg - What’s built in - setAttributes - function to change the attributes - isSelected - see if the user has selected your block - Number of editor components - https://github.com/WordPress/gutenberg/tree/master/components - https://github.com/WordPress/gutenberg/tree/master/blocks
21. abdullahmzm@gmail.com @Software_abi How you can lend a hand with Gutenberg Yesss!! You can contribute to Gutenberg in many ways: - By reporting bugs on Gutenberg Github repo: https://github.com/WordPress/gutenberg The @Daniel Bachhuber introduced the Gutenberg Plugin Compatibility Database Simply launch an environment, test the installed plugin, and record your results. https://plugincompat.danielbachhuber.com/ abdullahmzm@gmail.com @Software_abi
22. Question?