Block Editor Components

Reusable components, hooks and helper functions for the WordPress block editor(s).

Table of Contents

• Introduction
• Installation
• Components
• Hooks
• Utils
• Contributing

Introduction

The Block Editor Components package provides reusable components, hooks and helper functions to use with the WordPress block editor(s). This is not a WordPress plugin or other production-use library. Instead, the package is intended to be used as development-time dependency, contributing to your plugin or project codebase build.

Installation

The recommended way to use the Block Editor Components package is to install as a development-only Node dependency.

Using npm:

npm install --save-dev @humanmade/block-editor-components

Of course, you can also use Yarn, pnpm or any other package manager.

Note: As the Block Editor Components package provides a variety of components, hooks and utils that you usually don't all need for a given project, the package does not declare any @wordpress/* dependencies. This means that you need to ensure all dependency assets are declared and loaded.

You can read about an individual component's dependencies in the relevant README file. One way to ensure all dependencies are loaded is to use the @wordpress/dependency-extraction-webpack-plugin package.

Components

• ConditionalComponent
• FetchAllTermSelectControl
• FileControls
• ImageControl
• InnerBlockSlider
• LinkToolbar
• PlainTextWithLimit
• PostPicker
• PostTitleControl
• PostTypeCheck
• RichTextWithLimit

Hooks

• useActiveBlockStyle
• useBlockStyles
• useDisallowedBlocks
• useMeta
• useRenderAppenderWithBlockLimit
• useSelectBlock
• useSetAttribute

Utils

• Block Utils
• Image Utils
• Option Utils
• Variation Utils

Contributing

This project relies on contributions from those using it! See the contribution guidelines for more information.