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

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.

Chris Van Patten

February 07, 2020
Tweet

More Decks by Chris Van Patten

Other Decks in Technology

Transcript

  1. Think Outside The Block
    @ChrisVanPatten

    View full-size slide

  2. The other ways you can extend Gutenberg

    View full-size slide

  3. Gutenberg is all about Blocks

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Developers are used to the
    Classic Experience

    View full-size slide

  7. Metaboxes
    TinyMCE

    View full-size slide

  8. Metaboxes
    TinyMCE
    Hooks and filters

    View full-size slide

  9. Metaboxes
    TinyMCE
    Hooks and filters

    View full-size slide

  10. Gutenberg offers
    curated customisation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. One style can be active at a time

    View full-size slide

  15. Users can select a default

    View full-size slide

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

    View full-size slide

  17. Can also be removed by
    third parties

    View full-size slide

  18. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. icon={ icon }
    name={ name }
    title={ title }
    >
    Hello Phoenix!

    >
    );

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. PluginPostStatusInfo

    View full-size slide

  36. PluginDocumentSettingPanel

    View full-size slide

  37. PluginBlockSettingsMenuItem

    View full-size slide

  38. PluginPrePublishPanel
    &
    PluginPostPublishPanel

    View full-size slide

  39. PluginMoreMenuItem

    View full-size slide

  40. Actions executed programmatically
    automations (noun)

    View full-size slide

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

    View full-size slide

  42. 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 full-size slide

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

    );

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  46. Powerful extension options

    View full-size slide

  47. New ideas and new capabilities

    View full-size slide

  48. What can you come up with?

    View full-size slide

  49. @ChrisVanPatten
    cvp.me/wcphx2020

    View full-size slide