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.

Transcript

1. Think Outside The Block
   @ChrisVanPatten
   

   View Slide

2. The other ways you can extend Gutenberg
   

   View Slide

3. Gutenberg is all about Blocks
   

   View Slide

4. Composable units that allow you to build page
   content (and soon page layouts)
   blocks (noun)
   

   View Slide

5. Blocks are the building blocks, but
   you don't have to build blocks to
   customise the block editor
   

   View Slide

6. Developers are used to the
   Classic Experience
   

   View Slide

7. Metaboxes
   

   View Slide

8. Metaboxes
   TinyMCE
   

   View Slide

9. Metaboxes
   TinyMCE
   Hooks and filters
   

   View Slide

10. Metaboxes
    TinyMCE
    Hooks and filters
    

    View Slide

11. Gutenberg offers
    curated customisation
    

    View Slide

12. Not everything from the past is possible today,
    but a lot is… and more!
    

    View Slide

13. Block Styles
    Editor Settings
    Formats
    Sidebars
    Slots & Fills
    Automations
    

    View Slide

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

    View Slide

15. One style can be active at a time
    

    View Slide

16. Users can select a default
    

    View Slide

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

    View Slide

18. Can also be removed by
    third parties
    

    View Slide

19. View Slide

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;'
    . '}',
    ]
    );
    

    View Slide

21. unregister_block_style(
    'core/quote',
    'fancy-quote'
    );
    

    View Slide

22. View Slide

23. Custom toggles and settings shared across
    blocks and editors
    editor settings (noun)
    

    View Slide

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

    View Slide

25. $colors = [
    [
    'name' => 'Brand Red',
    'slug' => 'brand-red',
    'color' => '#B86251',
    ],
    ];
    add_theme_support(
    'editor-color-palette',
    $colors
    );
    

    View Slide

26. add_theme_support( 'disable-custom-font-sizes' );
    

    View Slide

27. $sizes = [
    [
    'name' => 'Super Large',
    'slug' => 'super-large',
    'size' => 80,
    ],
    ];
    add_theme_support( 'editor-font-sizes', $sizes );
    

    View Slide

28. Inline HTML "modifiers" for selections of text
    formats (noun)
    

    View Slide

29. View Slide

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

    View Slide

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',
    },
    );
    

    View Slide

32. View Slide

33. Special link formats (e.g. for affiliate links)
    Superscript and subscript
    Footnotes
    

    View Slide

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

    View Slide

35. View Slide

36. import { PluginSidebar, PluginSidebarMoreMenuItem }
    from '@wordpress/edit-post';
    import { registerPlugin } from '@wordpress/plugins';
    const name = 'wcphx-sidebar';
    const title = 'WordCamp Phoenix';
    const icon = 'smiley';
    

    View Slide

37. const Sidebar = () => (
    <>
    icon={ icon }
    target={ name }
    >
    { title }
    
    

    View Slide

38. icon={ icon }
    name={ name }
    title={ title }
    >
    Hello Phoenix!
    
    >
    );
    

    View Slide

39. registerPlugin(
    'wcphx-sidebar',
    {
    render: Sidebar,
    },
    );
    

    View Slide

40. View Slide

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

    View Slide

42. PluginPostStatusInfo
    

    View Slide

43. View Slide

44. PluginDocumentSettingPanel
    

    View Slide

45. View Slide

46. PluginBlockSettingsMenuItem
    

    View Slide

47. View Slide

48. PluginPrePublishPanel
    &
    PluginPostPublishPanel
    

    View Slide

49. View Slide

50. View Slide

51. PluginMoreMenuItem
    

    View Slide

52. View Slide

53. Actions executed programmatically
    automations (noun)
    

    View Slide

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

    View Slide

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';
    

    View Slide

56. const DemoPanel = () => (
    name="wcphx"
    title="WordCamp Phoenix"
    icon="tickets"
    >
    ...
    
    );
    

    View Slide

57. isPrimary
    onClick={ () => {
    const {
    editPost,
    insertBlocks,
    } = dispatch( 'core/editor' );
    const block = createBlock( 'wcphx/demo' );
    editPost( { title: 'WordCamp Phoenix!' } );
    insertBlocks( block );
    } }
    >
    Insert New Demo Block
    
    

    View Slide

58. registerPlugin(
    'wcphx-demo-automation-panel',
    {
    render: DemoPanel,
    },
    );
    

    View Slide

59. View Slide

60. Powerful extension options
    

    View Slide

61. New ideas and new capabilities
    

    View Slide

62. What can you come up with?
    

    View Slide

63. thanks!
    

    View Slide

64. @ChrisVanPatten
    cvp.me/wcphx2020
    

    View Slide