Page Head Block
Overview
The Page Head Block in the Phenix Design System is a versatile component designed to display page titles and breadcrumb navigation at the top of content areas. It provides a consistent way to show page context and navigation hierarchy across your WordPress site. The block can be configured to display both title and breadcrumb, title only, or breadcrumb only, depending on your needs.
Key Features
- Flexible display modes: Title and Breadcrumb, Title Only, or Breadcrumb Only
- Automatic page title detection based on context (single posts, pages, archives)
- Comprehensive styling options through the block editor
- Responsive design with customizable alignment for different screen sizes
- Support for animations and visual effects
- Seamless integration with WordPress page hierarchy
Breadcrumb Feature
One of the primary features of the Page Head block is its breadcrumb navigation system, which offers:
- Automatic generation of breadcrumb trails based on WordPress page hierarchy
- Home page link with icon and customizable label
- Current page display in the breadcrumb path
- Integration with post types and taxonomies
- Support for Yoast SEO breadcrumb structure when available
- Font icon separators with customizable appearance
- Schema markup for improved SEO (itemprop="breadcrumb")
- Responsive alignment that adapts to different screen sizes
How to Use
- In the WordPress editor, click the "+" button to add a new block
- Search for "Page Head" or find it in the "Phenix Blocks" category
- Add the Page Head Block to your page
- Use the toolbar dropdown to select the display mode (Title/Breadcrumb, Title Only, or Breadcrumb)
- Customize the appearance using the block toolbar and sidebar options
Block Settings
Toolbar Controls
Control | Description |
---|---|
Display Mode | Select between "Title/Breadcrumb", "Title Only", or "Breadcrumb" |
Style Options | Configure colors, backgrounds, and other visual styles |
Typography Options | Set text size, alignment, and other typography settings |
Animation Options | Add entrance and hover animations (if enabled) |
Effects Options | Add shadows, opacity, and other visual effects (if enabled) |
Sidebar Controls
The Page Head block includes a General Settings panel where you can enable additional features:
Setting | Description |
---|---|
Enable Animations | Adds animation options to the toolbar |
Enable Effects | Adds effects options to the toolbar |
Breadcrumb Implementation
The breadcrumb is rendered as an unordered list with the following structure:
<ul class="px-breadcrumb reset-list flexbox custom-icon links-inherit" data-type="font-icon" itemprop="breadcrumb">
<li class="far fa-home tx-icon"><a href="[home-url]">Home</a></li>
<!-- Additional items based on page hierarchy -->
<li>Current Page Title</li>
</ul>
When Yoast SEO is active, its breadcrumb structure is used instead:
<div class="px-breadcrumb flexbox custom-icon links-inherit" data-type="font-icon" itemprop="breadcrumb">
<!-- Yoast SEO breadcrumb structure -->
</div>
Page Head Behavior
The Page Head block automatically adapts to different page types:
Home Page:
- Title: Site title or custom title
- Breadcrumb: Not displayed on the home page
Single Posts:
- Title: Post title
- Breadcrumb: Home → Post Type → Post Title
Pages:
- Title: Page title
- Breadcrumb: Home → Page Title
Archives/Categories:
- Title: Archive/Category title
- Breadcrumb: Home → Archive/Category Title
Styling Options
The Page Head block provides several styling options that affect the breadcrumb:
Typography
- Text size and weight
- Text alignment (left, center, right)
- Text color
Layout
- Background color or gradient
- Padding and margin
- Border styles and radius
- Box shadow effects
Breadcrumb Styling
The breadcrumb uses a separator between items, which is implemented through CSS:
.px-breadcrumb {
/*==== Default Divider ====*/
@if ($direction == 'ltr') {--divider-icon: '/';}
@else {--divider-icon: '\\';}
/*==== Items ====*/
> li {
/*==== Links ====*/
a {@extend %inline-block;}
/*====> Main-Style <====*/
&:not(:last-child) {
margin-#{$direction-end}: 10px;
&::after {
content: var(--divider-icon);
@extend %inline-block;
margin-#{$direction-start}: 10px;
}
}
}
/*==== Font icon Separator ====*/
&[data-type="font-icon"] > li::after {font-family: var(--icons-font);}
}
The separator can be customized by changing the --divider-icon
CSS variable.
Accessibility Features
The breadcrumb includes the following accessibility features:
- Semantic HTML structure
- Schema markup with
itemprop="breadcrumb"
- Home icon with text label for screen readers
- Clear visual hierarchy
Best Practices
Consistent Placement: Place the Page Head block in a consistent location across all pages, typically at the top of the content area
Choose Appropriate Mode: Select the right display mode (Title/Breadcrumb, Title Only, or Breadcrumb) based on the page context and user needs
Clear Hierarchy: Ensure your site structure is logical and well-organized for accurate breadcrumb paths
Visual Integration: Style the Page Head block to match your site's design using the available styling options
Typography Consistency: Maintain consistent typography settings across all instances of the Page Head block
Mobile Optimization: Use responsive alignment options to ensure proper display on all screen sizes
SEO Enhancement: The breadcrumb includes schema markup for SEO, which works best when your site structure is well-defined
Yoast SEO Integration: If using Yoast SEO, its breadcrumb structure will be automatically used, providing additional SEO benefits
Related Blocks
- Container Block - For positioning the Page Head block within layouts
- Group Block - For combining the Page Head block with other elements
- Text Elements Block - For adding additional descriptive text