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