Beyond the Block

The new WordPress editor Gutenberg has much more possibilities to be individualized than creating custom blocks.

This talk aims to demonstrate how developers can extend Gutenberg beyond creating custom blocks, by utilizing the redux data store and the Slot/Fill concept, which are working behind the scenes to render Gutenberg.

Transcript

1. Beyond the block Beyond the block Inpsyde weekly dev meeting Inpsyde weekly dev meeting 16. July 2018 16. July 2018 by David Remer by David Remer
2. Introduction • Its fairly easy to register your own blocks, so we skip this topic. You can find more information here: https://wordpress.org/gutenberg/handbook/ • This talk aims to use Gutenberg beyond registering custom blocks. • We focus on two main concepts: • Data stores • Slot/Fill • We will do so by a basic example: A recipes plugin.
3. What is Gutenberg • Gutenberg is an extensible application, driven by React • It is always in a certain state, which will then be rendered. • You can alter this state.
4. A section of the current state view by „Redux Dev Tools“ addon available for Chrome and Firefox
5. WARM UP
6. The recipe plugin Location: https://github.com/inpsyde/gutenberg-example Current branch: 0­init You can follow the changes by diffing: git diff 0­init..1­template Contains a post type and an attach the categories taxonomy for our ingredients. We would probably use a ingridients taxonomy, but then... Gutenberg is still in development...
7. The recipe post type in Gutenberg
8. 1. Feature: Templates The client wants to restrict the editors, to always follow a specific content order: 1)Galery 2)Ingredients 3)How to cook the recipe https://wordpress.org/gutenberg/handbook/templates/ Branch: 1­template
9. Defining the template Extend the arguments for register_post_type template => [] template_lock => all|insert https://wordpress.org/gutenberg/handbook/templates/
10. Extending the arguments for register_post_type()
11. Adding the new block
12. Dynamic block registration in PHP
13. Dynamic block in JS
14. The template in Gutenberg
15. THE DATA STORE
16. 2. Feature: First gallery image is the featured image When the editor sets the gallery images, the first picture should automatically be the featured image. Branch: 2­featured­image
17. wp.data wp.data gives us the functionality to access the general state of the application: • wp.data.subscribe() • wp.data.select() • wp.data.dispatch()
18. wp.data.subscribe( () => { console.log( 'something happend' ); } );
19. wp.data.select() With this function, we can select a data store. Each data store gives us specified functionality (selectors), we can use. core/editor is the data store, which has all information about the current post, we are working with. wp.data.select('core/editor'). getEditedPostAttribute('categories'); https://github.com/WordPress/gutenberg/tree/master/docs/data
20. wp.data.dispatch() With this function, we can select a data store. Each data store gives us specified functionality (actions), we can use to alter the data core/editor is the data store, which has all actions for our current post. wp.data.dispatch('core/editor'). editPost({categories:[]}); would reset all selected categories. https://github.com/WordPress/gutenberg/tree/master/docs/data
21. Example How to use wp.data for our feature request.
24. The result.
25. 3. Feature: Show Ingredients The client wants the ingredients to show up in the Editor. Branch: 3­show­ingredients­in­block
26. Problems We need to re-render our block, once the editor selects a new category or deselects a selected one. So, somehow we have to subscribe to changes in the state of the general Gutenberg application
27. withSelect() But, how to invoke a re-rendering? Basically, React will re-render a component, once the properties of the component change. We can wrap a component with the method withSelect and can extend the properties for the component in a way, they change, once specific data in a data store changes.
29. withSelect() in action
30. Register your own stores: https://github.com/WordPress/gutenberg/tree/mas ter/packages/data
31. RENDER INTO EXISTING COMPONENTS SLOT/FILL
32. 4. Feature: Editors pick Branch: 4­editors­pick
33. Pre-Gutenberg We could have used 'post_submitbox_misc_actions'
34. How to make React extensible When AutoCAD moved to React, they were facing a major issue: They have a highly adjustable product, where 3rd parties can hook into and add new functionality. The same problem is facing Gutenberg. Cameron Westland came up with Slot/Fill to basically solve the following issue:
35. How to enable 3rd Parties to add components in your React application?
36. Slot & Fill The principle they came up with was Slot/Fill. https://github.com/camwest/react-slot-fill https://www.youtube.com/watch?v=395ou6k6C6k Gutenberg solution is inspired by this concept. Basically, you can define Slots, which third parties can then fill. Lets have a look, how this is done:
37. https://github.com/WordPress/gutenberg/blob/master/edit-post/components/sidebar/post-status/index.js Basically, we can hook ourselfs where we see { fills }
39. The result
40. You can also provide Slot/Fills in your component. More information about Slot/Fill https://github.com/WordPress/gutenberg/tree/master/components/slo t-fill
41. Happy Cooking! #gutenberg on the Inpsyde Slack https://wordpress.org/gutenberg/handbook/ http://github.com/wordpress/gutenberg