Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Websupporter

July 16, 2018
Tweet

Other Decks in Programming

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. 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...
  6. 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
  7. Defining the template Extend the arguments for register_post_type template =>

    [] template_lock => all|insert https://wordpress.org/gutenberg/handbook/templates/
  8. 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
  9. 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()
  10. 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
  11. 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
  12. 3. Feature: Show Ingredients The client wants the ingredients to

    show up in the Editor. Branch: 3­show­ingredients­in­block
  13. 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
  14. 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.
  15. 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:
  16. 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:
  17. 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