https://github.com/builtnorth/wp-component-library
Library of components for use in the WordPress block editor.
https://github.com/builtnorth/wp-component-library
block-library npm-package wordpress wp-components
Last synced: about 1 month ago
JSON representation
Library of components for use in the WordPress block editor.
- Host: GitHub
- URL: https://github.com/builtnorth/wp-component-library
- Owner: builtnorth
- Created: 2024-09-06T21:44:18.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-04T05:44:58.000Z (about 1 month ago)
- Last Synced: 2026-03-04T11:50:26.886Z (about 1 month ago)
- Topics: block-library, npm-package, wordpress, wp-components
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@builtnorth/wp-component-library
- Size: 454 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# WP Component Library
A comprehensive library of reusable components for WordPress block development, providing UI controls, media management, layout tools, and advanced input components.
## Installation
```bash
npm install @builtnorth/wp-component-library
```
## Components
### Media & Images
- [**AttachmentImage**](./components/attachment-image/README.md) - WordPress media attachment display with responsive features
- [**Media**](./components/media/README.md) - Complete media upload suite for toolbar, editor, and inspector contexts
### Layout & Structure
- [**Layout**](./components/layout/README.md) - Flexbox layout controls with alignment, justification, and orientation
- [**SectionSettings**](./components/section-settings/README.md) - Section-level background and styling controls
- [**SectionDivider**](./components/section-divider/README.md) - Decorative dividers for section blocks
- [**SectionPattern**](./components/section-pattern/README.md) - SVG background patterns with positioning controls
### Form & Input
- [**AttributesPanel**](./components/attributes-panel/README.md) - Dynamic attribute management for Site Editor blocks
- [**Button**](./components/button/README.md) - Frontend button component with style variants
- [**CaptchaPlaceholder**](./components/captcha-placeholder/README.md) - Unified captcha interface for multiple providers
- [**VariableField**](./components/variable-field/README.md) - Input with @ triggered variable autocomplete
- [**VariableInserter**](./components/variable-inserter/README.md) - Variable insertion tool for template fields
### Data & Content
- [**Query**](./components/query/README.md) - Query builder controls for post selection
- [**Meta**](./components/meta/README.md) - Meta field management and selection tools
- [**Repeater**](./components/repeater/README.md) - Drag-and-drop repeater field with flexible content
- [**SortableSelect**](./components/sortable-select/README.md) - Multi-select with drag-to-reorder functionality
### Editor Tools
- [**BlockAppender**](./components/block-appender/README.md) - Customizable block appenders for different contexts
## Quick Start
### Media Upload Example
```jsx
import { InspectorMediaUpload } from "@builtnorth/wp-component-library/components/media";
;
```
### Layout Controls Example
```jsx
import { LayoutPanel } from "@builtnorth/wp-component-library/components/layout";
;
```
### Variable Field Example
```jsx
import { VariableField } from "@builtnorth/wp-component-library/components/variable-field";
;
```
### Repeater Example
```jsx
import { Repeater } from "@builtnorth/wp-component-library/components/repeater";
;
```
## Component Categories
### 🖼️ Media Components
Handle image uploads, display, and media management across different editor contexts.
### 📐 Layout Components
Control flexbox layouts, alignment, spacing, and responsive design settings.
### 📝 Input Components
Advanced form fields with features like autocomplete, variable insertion, and validation.
### 📊 Data Components
Query builders, meta field selectors, and content management tools.
### 🎨 Style Components
Section styling, backgrounds, patterns, and visual dividers.
### 🔧 Utility Components
Helper components for common WordPress block editor tasks.
## Features
- **WordPress Integration** - Deep integration with WordPress block editor APIs
- **Customizable** - Flexible props and styling options
- **TypeScript Ready** - Full TypeScript definitions available
- **Tree-Shakeable** - Import only what you need
## Requirements
- WordPress 6.0+
- @wordpress/scripts
- React 18+
## Documentation
Each component has detailed documentation in its respective README file. Click on any component name above to view its full documentation including:
- Detailed usage examples
- Complete prop definitions
- Integration patterns
- Best practices
- Code snippets
## Disclaimer
This component library is provided "as is" without warranty of any kind, express or implied. Use at your own risk. The authors and contributors are not responsible for any damages or liabilities arising from the use of this library. Always test components thoroughly in your specific environment before deploying to production.