Phenix Design System

Appearance

WordPress Integration Overview ​

The Phenix Design System provides a comprehensive WordPress integration that empowers both content creators and developers. This section covers all the WordPress features of the Phenix Design System, including Gutenberg blocks, theme customization, developer tools, and PHP methods.

What is Phenix Blocks? ​

Phenix Blocks (pds-blocks) is a WordPress plugin that transforms the standard WordPress editor into a powerful design system. It provides:

  • A comprehensive collection of custom Gutenberg blocks
  • Advanced styling and layout controls
  • Performance optimization features
  • Developer tools for extending WordPress
  • Seamless integration with the Phenix Design System

The plugin is designed to work with the Phenix Starter Theme but can be used with any WordPress theme that supports Gutenberg (WordPress 5.9+).

Core Modules ​

The WordPress integration in Phenix is divided into several core modules:

Getting Started ​

This section covers the basics of installing and configuring the Phenix Blocks plugin and Starter Theme:

Gutenberg Blocks ​

Phenix provides a comprehensive collection of custom blocks for the WordPress block editor, organized into logical categories:

Layout Blocks ​

  • Container, Grid Row, Grid Column, and Group blocks for creating responsive layouts
  • Logical Content blocks for conditional display
  • Dynamic Theme Part blocks for template parts

Content Blocks ​

  • Text Elements, Media Elements, and Icon Element blocks
  • Button, Logo, and Page Head blocks
  • Dynamic Query blocks for posts, taxonomies, and users

Interactive Blocks ​

  • Popup Modals and Navigation Menu blocks
  • Custom Code blocks for advanced functionality

Block Controls ​

Phenix extends the WordPress editor with powerful controls for customizing blocks:

  • Layout Options - Control alignment, width, height, and position
  • Style Options - Apply colors, backgrounds, borders, and effects
  • Typography Options - Customize fonts, sizes, and text styles
  • Responsive Controls - Adjust display, margin, padding, and position for different screen sizes
  • Advanced Options - Add custom attributes, CSS classes, and more

Developer Tools ​

Tools for extending WordPress with custom functionality:

  • Block Patterns and Templates - Create reusable design patterns
  • Custom Post Types and Taxonomies - Define new content types
  • Custom Meta Boxes - Add custom fields to content
  • Custom Menu Locations - Register new menu positions
  • Performance Optimization - Enhance site speed with built-in tools

PHP Methods ​

Phenix provides PHP utility functions and methods for WordPress developers:

  • Admin Pages - Create custom admin interfaces
  • Assets Management - Handle CSS and JavaScript files efficiently
  • WooCommerce Integration - Extend WooCommerce functionality
  • Optimization Functions - Improve site performance
  • Utility Functions - Helper functions for common WordPress tasks

For Content Creators ​

If you're a content creator or site editor, start with the Getting Started section to learn how to use the Phenix Blocks plugin. Then explore the various blocks available to create beautiful, responsive layouts without writing code.

For Developers ​

If you're a developer, you'll find comprehensive documentation on extending Phenix Blocks with custom functionality in the Developer Tools and PHP Methods sections. The plugin is built with modern development practices using SASS and TypeScript.

Version Information ​

The current version of Phenix Blocks is 1.3.0, which requires:

  • WordPress 5.9 or higher
  • PHP 7.4 or higher
  • Modern web browsers (Chrome, Firefox, Safari, Edge)

How to Use This Documentation ​

Each section provides detailed guidance on implementing Phenix's WordPress features. Browse through the sidebar to navigate to specific features you're interested in. The documentation includes code examples, screenshots, and step-by-step instructions to help you get the most out of the Phenix Design System.

Released under the MIT License.

Copyright 2023-present Phenix Design System