Think Outside the Block

Think Outside the Block

The block editor in WordPress (aka Gutenberg) offers a structured way of creating content through customizable “blocks”. But building custom blocks isn’t the only way to extend the editor; you can also register sidebars, enable custom toolbar buttons, and much more. In this talk, you’ll learn how to use these extension points to transform the block editor… without building a single block.

38bc9be7f4f140d1f719c1faeed29a6c?s=128

Chris Van Patten

February 07, 2020
Tweet

Transcript

  1. Think Outside The Block @ChrisVanPatten

  2. The other ways you can extend Gutenberg

  3. Gutenberg is all about Blocks

  4. Composable units that allow you to build page content (and

    soon page layouts) blocks (noun)
  5. Blocks are the building blocks, but you don't have to

    build blocks to customise the block editor
  6. Developers are used to the Classic Experience

  7. Metaboxes

  8. Metaboxes TinyMCE

  9. Metaboxes TinyMCE Hooks and filters

  10. Metaboxes TinyMCE Hooks and filters

  11. Gutenberg offers curated customisation

  12. Not everything from the past is possible today, but a

    lot is… and more!
  13. Block Styles Editor Settings Formats Sidebars Slots & Fills Automations

  14. CSS-based presets for block visual appearance block styles (noun)

  15. One style can be active at a time

  16. Users can select a default

  17. Can be registered when you create a block, or added

    by third parties
  18. Can also be removed by third parties

  19. None
  20. register_block_style( 'core/quote', [ 'name' => 'cool-design', 'label' => __( 'Cool

    Design' ), 'inline_style' => '' . '.wp-block-quote.is-style-cool-design {' . 'background: red;' . 'border: 3px solid blue;' . 'padding: 1rem;' . '}', ] );
  21. unregister_block_style( 'core/quote', 'fancy-quote' );

  22. None
  23. Custom toggles and settings shared across blocks and editors editor

    settings (noun)
  24. add_theme_support( 'disable-custom-colors' );

  25. $colors = [ [ 'name' => 'Brand Red', 'slug' =>

    'brand-red', 'color' => '#B86251', ], ]; add_theme_support( 'editor-color-palette', $colors );
  26. add_theme_support( 'disable-custom-font-sizes' );

  27. $sizes = [ [ 'name' => 'Super Large', 'slug' =>

    'super-large', 'size' => 80, ], ]; add_theme_support( 'editor-font-sizes', $sizes );
  28. Inline HTML "modifiers" for selections of text formats (noun)

  29. None
  30. import { applyFormat } from '@wordpress/rich-text'; import { RichTextToolbarButton }

    from '@wordpress/editor'; const MyFormat = ( { isActive, onChange, value } ) => ( <RichTextToolbarButton icon="admin-customizer" isActive={ isActive } onClick={ () => onChange( applyFormat( value, { type: 'wcphx/fancy-text' } ) ) } title="Fancy Text" /> );
  31. import { registerFormatType } from '@wordpress/rich-text'; import MyFormat from './my-format';

    registerFormatType( 'wcphx/fancy-text', { className: 'wcphx-fancy-text', edit: MyFormat, tagName: 'span', title: 'Fancy Text', }, );
  32. None
  33. Special link formats (e.g. for affiliate links) Superscript and subscript

    Footnotes
  34. Wide open (narrow) free space sidebars (noun)

  35. None
  36. import { PluginSidebar, PluginSidebarMoreMenuItem } from '@wordpress/edit-post'; import { registerPlugin

    } from '@wordpress/plugins'; const name = 'wcphx-sidebar'; const title = 'WordCamp Phoenix'; const icon = 'smiley';
  37. const Sidebar = () => ( <> <PluginSidebarMoreMenuItem icon={ icon

    } target={ name } > { title } </PluginSidebarMoreMenuItem>
  38. <PluginSidebar icon={ icon } name={ name } title={ title }

    > Hello Phoenix! </PluginSidebar> </> );
  39. registerPlugin( 'wcphx-sidebar', { render: Sidebar, }, );

  40. None
  41. Defined extension areas within the editor slots and fills (noun)

  42. PluginPostStatusInfo

  43. None
  44. PluginDocumentSettingPanel

  45. None
  46. PluginBlockSettingsMenuItem

  47. None
  48. PluginPrePublishPanel & PluginPostPublishPanel

  49. None
  50. None
  51. PluginMoreMenuItem

  52. None
  53. Actions executed programmatically automations (noun)

  54. Inserting blocks Opening sidebars Moving blocks Applying formats Saving and

    Publishing
  55. import { createBlock } from '@wordpress/blocks'; import { Button }

    from '@wordpress/components'; import { dispatch } from '@wordpress/data'; import { PluginDocumentSettingPanel } from '@wordpress/edit-post'; import { registerPlugin } from '@wordpress/plugins';
  56. const DemoPanel = () => ( <PluginDocumentSettingPanel name="wcphx" title="WordCamp Phoenix"

    icon="tickets" > ... </PluginDocumentSettingPanel> );
  57. <Button isPrimary onClick={ () => { const { editPost, insertBlocks,

    } = dispatch( 'core/editor' ); const block = createBlock( 'wcphx/demo' ); editPost( { title: 'WordCamp Phoenix!' } ); insertBlocks( block ); } } > Insert New Demo Block </Button>
  58. registerPlugin( 'wcphx-demo-automation-panel', { render: DemoPanel, }, );

  59. None
  60. Powerful extension options

  61. New ideas and new capabilities

  62. What can you come up with?

  63. thanks!

  64. @ChrisVanPatten cvp.me/wcphx2020