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

npm install @builtnorth/wp-component-library

Components

Media & Images

• AttachmentImage - WordPress media attachment display with responsive features
• Media - Complete media upload suite for toolbar, editor, and inspector contexts

Layout & Structure

• Layout - Flexbox layout controls with alignment, justification, and orientation
• SectionSettings - Section-level background and styling controls
• SectionDivider - Decorative dividers for section blocks
• SectionPattern - SVG background patterns with positioning controls

Form & Input

• AttributesPanel - Dynamic attribute management for Site Editor blocks
• Button - Frontend button component with style variants
• CaptchaPlaceholder - Unified captcha interface for multiple providers
• VariableField - Input with @ triggered variable autocomplete
• VariableInserter - Variable insertion tool for template fields

Data & Content

• Query - Query builder controls for post selection
• Meta - Meta field management and selection tools
• Repeater - Drag-and-drop repeater field with flexible content
• SortableSelect - Multi-select with drag-to-reorder functionality

Editor Tools

• BlockAppender - Customizable block appenders for different contexts

Quick Start

Media Upload Example

import { InspectorMediaUpload } from "@builtnorth/wp-component-library/components/media";

<InspectorMediaUpload
	buttonTitle="Upload Logo"
	onSelect={handleImageSelect}
	onRemove={handleImageRemove}
	imageId={logoId}
	imageUrl={logoUrl}
/>;

Layout Controls Example

import { LayoutPanel } from "@builtnorth/wp-component-library/components/layout";

<LayoutPanel
	orientation={orientation}
	onOrientationChange={setOrientation}
	justification={justification}
	onJustificationChange={setJustification}
	alignment={alignment}
	onAlignmentChange={setAlignment}
/>;

Variable Field Example

import { VariableField } from "@builtnorth/wp-component-library/components/variable-field";

<VariableField
	value={content}
	onChange={setContent}
	options={[
		{ label: "User Name", value: "{user_name}" },
		{ label: "Site Title", value: "{site_title}" },
	]}
	placeholder="Type @ to insert variables"
/>;

Repeater Example

import { Repeater } from "@builtnorth/wp-component-library/components/repeater";

<Repeater
	items={items}
	renderItem={renderItem}
	onAdd={handleAdd}
	onRemove={handleRemove}
	onReorder={handleReorder}
	addButtonText="Add Item"
/>;

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.