Introducing the block editor extension toolkit

I’m excited to announce my latest WordPress hobby project that has morphed into an essential part of my site building practice: Block Editor Extension Toolkit (Beet).

I’m a huge fan of leveraging WordPress core as much as possible, so I try to avoid creating custom blocks if a core block can do the job.

That said, often there is just a single extra piece of functionality I want to add to a core block, but the process can be a bit of a pain.

The Block Editor Extension Toolkit seeks to streamline this, allowing developers to easily port extra controls onto core blocks to extend their functionality.

Here’s a couple quick examples:

Adding text wrap controls to heading blocks:

Adding style chips – think block styles, but composable!

Even some basic animation presets!

How it works:

The awesome part is you can do this all without really writing any code. Beet simply takes a configuration file, parses it, and adds in additional UI behind the scenes.

const extensions = [
  {
    title: 'Text Wrapping Controls',
    slug: 'text-custom',
    blocks: ['core/heading', 'core/paragraph'],
    controls: [{
      id: 'text-wrap',
      controlType: 'select',
      label: 'Text Wrap',
      options: [
        { label: 'Default', value: '' },
        { label: 'Pretty', value: 'pretty' },
        { label: 'Balance', value: 'balance' },
      ],
    }]
  },
  {
    title: 'Custom Style Presets',
    slug: "custom-style-presets",
    blocks: ['core/heading', 'core/paragraph'],
    controls: [{
      id: 'custom-style',
      label: "Custom Styles",
      controlType: 'chips',
      options: [
        { label: 'Drop Shadow', value: 'shadow' },
        { label: 'Rounded Corners', value: 'rounded' },
        { label: 'Border 1', value: 'border-1' },
      ],
    }]
  },
];

Under the hood all these UI elements are simple adding extra classes to the blocks. I’ve found 9/10 times this is really all I need with how powerful CSS is these days and the composability of the editor.

What is great about this is that even if you disable BEET later, all the styling stays in place – it just lives in the native CSS classes field under the block’s advanced settings.

Going further

This setup could be used to build out your own animation presets, advanced layout configurations and more! All you need to write is the config and the accompanying CSS / JS!

I’ve already got a ton of use out of this tool and I’m eager to see how others will use and extend it.