Shared Components System
The Phenix Blocks plugin features a powerful shared components system that provides a consistent and reusable set of UI controls for block editing. This system is the foundation that enables the rich editing experience across all Phenix blocks.
Overview
The shared components system consists of modular, reusable React components that handle common UI patterns and functionality across different blocks. These components are designed to:
- Maintain consistency across the block editing experience
- Reduce code duplication by centralizing common UI patterns
- Simplify block development by providing ready-to-use controls
- Enable responsive editing through consistent responsive controls
- Provide a framework-aligned experience by matching the front-end capabilities
Component Architecture
The shared components system is organized into several categories:
Core Controls
Basic UI controls that handle fundamental user interactions:
- Input Controls: Text inputs, number inputs, and textareas
- Selection Controls: Dropdowns, select menus, and data-driven selects
- Toggle Controls: Switches and checkboxes
- Media Controls: Media uploaders and selectors
- Navigation Controls: Tabs and navigation interfaces
- Special Controls: Icon selectors, URL controls, and other specialized inputs
Control Sets
Grouped controls that manage related properties:
- Layout Sets: Controls for flexbox, grid, positioning, and sizing
- Styling Sets: Controls for typography, colors, borders, and effects
- Spacing Sets: Controls for margin and padding
- Interactive Sets: Controls for animations and sliders
Integration Helpers
Utility functions and components that help integrate the controls with the WordPress block editor:
- Options Renderer: Processes block attributes and generates appropriate classes
- Block Accessibility: Ensures blocks meet accessibility standards
- Responsive Controls: Manages responsive property editing across breakpoints
- Attribute Management: Handles setting and updating block attributes
Integration with Blocks
Blocks use the shared components in their edit.js
files to create their editing interfaces. The components are distributed between two main areas of the block editor:
Toolbar Controls (BlockControls)
Components that appear in the top toolbar when a block is selected. These controls provide quick access to frequently used settings and are designed for efficiency and immediate visual feedback.
Common Toolbar Controls
Control Type | Description | Example Usage |
---|---|---|
HTML Tag Selection | Dropdown for selecting semantic HTML elements | Changing a container from div to section |
Container Type | Toggle between fixed-width and fluid containers | Switching a container to full-width |
Section Toggle | Convert between regular container and section | Making a container into a full section |
Layout Controls | Dropdown menus for layout configuration | Accessing flexbox, margin, padding settings |
Alignment Controls | Buttons for content alignment | Setting horizontal/vertical alignment |
Spacing Controls | Quick access to margin and padding | Adjusting spacing with visual feedback |
Position Settings | Controls for element positioning | Setting relative/absolute positioning |
Border Options | Controls for border styling | Adding borders with custom styles |
Effects Options | Controls for visual effects | Adding shadows, opacity effects |
Sidebar Controls (InspectorControls)
Components that appear in the right sidebar when a block is selected. These controls provide more detailed configuration options organized into panels for comprehensive block customization.
Common Sidebar Panels
Panel Type | Description | Example Controls |
---|---|---|
General Options | Basic block configuration | HTML ID, anchor settings, block-specific toggles |
Style Options | Visual styling properties | Background, color, border, effects settings |
Typography | Text styling controls | Font family, size, weight, line height, spacing |
Layout | Structural arrangement | Flexbox, grid, positioning, sizing options |
Spacing | Margin and padding | Detailed spacing controls with responsive options |
Animation | Motion and transition | Animation type, duration, delay, trigger settings |
Advanced | Special functionality | Block-specific advanced features |
Integration Pattern
The typical integration pattern is:
- Import required components from the
px-controls
directory - Set up attribute management methods
- Add toolbar components to the
BlockControls
component - Add sidebar components to the
InspectorControls
component - Connect all components to the block's attributes
For example, a button block might use the StylesSet
in the sidebar and alignment controls in the toolbar to manage its appearance.
Development Workflow
When developing with the shared components system:
- Identify needed controls: Determine which UI controls your block needs
- Import components: Import the necessary components from
px-controls
- Set up attribute handlers: Create methods to update block attributes
- Implement the UI: Add the components to your block's edit function
- Connect to attributes: Ensure components read from and write to the correct attributes
Next Steps
Explore the detailed documentation for each component category:
- Core Controls: Basic UI controls for fundamental interactions
- Control Sets: Grouped controls for related properties
- Integration Helpers: Utilities for block integration
Or dive into specific components:
- Input Controls: Text, number, and textarea inputs
- Flexbox Set: Controls for flexbox layouts
- Typography Set: Controls for text styling