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
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
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' );
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)
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', }, );
33. Special link formats (e.g. for affiliate links) Superscript and subscript Footnotes
34. Wide open (narrow) free space sidebars (noun)
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, }, );
41. Defined extension areas within the editor slots and fills (noun)
42. PluginPostStatusInfo
44. PluginDocumentSettingPanel
46. PluginBlockSettingsMenuItem
48. PluginPrePublishPanel & PluginPostPublishPanel
51. PluginMoreMenuItem
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, }, );
60. Powerful extension options
61. New ideas and new capabilities
62. What can you come up with?
63. thanks!
64. @ChrisVanPatten cvp.me/wcphx2020