Skip to content

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:

  1. Maintain consistency across the block editing experience
  2. Reduce code duplication by centralizing common UI patterns
  3. Simplify block development by providing ready-to-use controls
  4. Enable responsive editing through consistent responsive controls
  5. 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 TypeDescriptionExample Usage
HTML Tag SelectionDropdown for selecting semantic HTML elementsChanging a container from div to section
Container TypeToggle between fixed-width and fluid containersSwitching a container to full-width
Section ToggleConvert between regular container and sectionMaking a container into a full section
Layout ControlsDropdown menus for layout configurationAccessing flexbox, margin, padding settings
Alignment ControlsButtons for content alignmentSetting horizontal/vertical alignment
Spacing ControlsQuick access to margin and paddingAdjusting spacing with visual feedback
Position SettingsControls for element positioningSetting relative/absolute positioning
Border OptionsControls for border stylingAdding borders with custom styles
Effects OptionsControls for visual effectsAdding shadows, opacity effects

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 TypeDescriptionExample Controls
General OptionsBasic block configurationHTML ID, anchor settings, block-specific toggles
Style OptionsVisual styling propertiesBackground, color, border, effects settings
TypographyText styling controlsFont family, size, weight, line height, spacing
LayoutStructural arrangementFlexbox, grid, positioning, sizing options
SpacingMargin and paddingDetailed spacing controls with responsive options
AnimationMotion and transitionAnimation type, duration, delay, trigger settings
AdvancedSpecial functionalityBlock-specific advanced features

Integration Pattern

The typical integration pattern is:

  1. Import required components from the px-controls directory
  2. Set up attribute management methods
  3. Add toolbar components to the BlockControls component
  4. Add sidebar components to the InspectorControls component
  5. 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:

  1. Identify needed controls: Determine which UI controls your block needs
  2. Import components: Import the necessary components from px-controls
  3. Set up attribute handlers: Create methods to update block attributes
  4. Implement the UI: Add the components to your block's edit function
  5. Connect to attributes: Ensure components read from and write to the correct attributes

Next Steps

Explore the detailed documentation for each component category:

Or dive into specific components:

Released under the MIT License.