Transparent header pattern

[giacomo-secchi]

Create Transparent Header Pattern

Description

Develop a new block pattern for the BlankSpace theme that allows users to create a transparent header. The pattern should integrate seamlessly with the block editor and leverage theme.json settings for styling. It will only be active on the homepage where the full-screen hero is present.

Requirements

1. Transparency: The header pattern should support full transparency or custom opacity values for the background.
2. Structure:
   • Include placeholders for a navigation menu and site logo.
   • Optionally include a tagline or call-to-action.
3. Customization:
   • Adjust background color and transparency via global styles.
   • Allow users to easily adjust padding, margin, and alignment in the editor.
   • Ensure responsiveness for all screen sizes.
4. Integration:
   • Use existing blocks like core/navigation, core/site-logo, and core/group.
   • Designed to work well with sticky headers if the user enables it.
5. Homepage Restriction:
   • Ensure the pattern is only active and displayed on the homepage when the full-screen hero section is present.

Acceptance Criteria

• The pattern is available and listed under a new or existing category in the block editor.
• The pattern is styled correctly in both the editor and front-end.
• Users can easily customize the pattern's appearance.
• The pattern only appears on the homepage where the full-screen hero is present.
• Adheres to WordPress coding standards and passes accessibility checks.

Notes

Utilize the theme.json file to ensure consistency with global styles (e.g., typography, colors, shadows). Ensure the pattern adheres to the BlankSpace theme's design philosophy and functions as intended within the specified homepage condition.