Beyond the Block

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.

C226961fc660043d05f289d3e359b815?s=128

Websupporter

July 16, 2018
Tweet

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.

  22. None
  23. None
  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.
  28. None
  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 }
  38. None
  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