Feature/plumbing Styles Block

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.7.1] - 2026-03-16
+
+### Added
+- Plumbing Styles block (`elayne/plumbing-styles`) — utility block that loads plumbing vertical CSS helpers on any page it is inserted into
+- Plumbing Styles block registered in admin settings page with enable/disable support
+
 ## [2.7.0] - 2026-02-15
 
 ### Added

blocks/plumbing-styles/build/block.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "elayne/plumbing-styles",
+  "version": "1.0.0",
+  "title": "Plumbing Styles",
+  "category": "theme",
+  "icon": "admin-appearance",
+  "description": "Loads plumbing vertical CSS utilities. Insert once per plumbing page. No frontend output.",
+  "keywords": [
+    "plumbing",
+    "styles",
+    "utilities",
+    "css"
+  ],
+  "supports": {
+    "html": false,
+    "anchor": false,
+    "inserter": true,
+    "multiple": false,
+    "reusable": false
+  },
+  "textdomain": "elayne-blocks",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css"
+}

blocks/plumbing-styles/build/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-i18n'), 'version' => 'f509b5b692d5987b80a0');

blocks/plumbing-styles/package.json

@@ -0,0 +1,22 @@
+{
+	"name": "plumbing-styles",
+	"version": "1.0.0",
+	"description": "CSS utility block for the Elayne plumbing vertical. Loads plumbing-specific styles without using the wp_global_styles database snapshot.",
+	"author": "Imagewize",
+	"license": "GPL-2.0-or-later",
+	"main": "build/index.js",
+	"scripts": {
+		"build": "wp-scripts build",
+		"format": "wp-scripts format",
+		"lint:css": "wp-scripts lint-style",
+		"lint:js": "wp-scripts lint-js",
+		"packages-update": "wp-scripts packages-update",
+		"start": "wp-scripts start"
+	},
+	"devDependencies": {
+		"@wordpress/scripts": "^30.27.0"
+	},
+	"overrides": {
+		"webpack-dev-server": "^5.2.2"
+	}
+}

blocks/plumbing-styles/src/block.json

@@ -0,0 +1,22 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "elayne/plumbing-styles",
+	"version": "1.0.0",
+	"title": "Plumbing Styles",
+	"category": "theme",
+	"icon": "admin-appearance",
+	"description": "Loads plumbing vertical CSS utilities. Insert once per plumbing page. No frontend output.",
+	"keywords": [ "plumbing", "styles", "utilities", "css" ],
+	"supports": {
+		"html": false,
+		"anchor": false,
+		"inserter": true,
+		"multiple": false,
+		"reusable": false
+	},
+	"textdomain": "elayne-blocks",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}

blocks/plumbing-styles/src/edit.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Edit component — visible in editor only, renders nothing on frontend.
+ */
+export default function Edit() {
+	const blockProps = useBlockProps( {
+		className: 'elayne-plumbing-styles-indicator',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<span className="elayne-plumbing-styles-indicator__icon">🔧</span>
+			<span className="elayne-plumbing-styles-indicator__label">
+				{ __( 'Plumbing CSS', 'elayne-blocks' ) }
+			</span>
+		</div>
+	);
+}

blocks/plumbing-styles/src/editor.scss

@@ -0,0 +1,29 @@
+/**
+ * Editor-only styles for the Plumbing Styles indicator block.
+ */
+
+.elayne-plumbing-styles-indicator {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	padding: 4px 12px;
+	background: rgba( 230, 126, 34, 0.12 );
+	border: 1px dashed rgba( 230, 126, 34, 0.5 );
+	border-radius: 999px;
+	font-size: 11px;
+	font-weight: 600;
+	color: #cf6d17;
+	letter-spacing: 0.04em;
+	text-transform: uppercase;
+	pointer-events: none;
+	user-select: none;
+
+	&__icon {
+		font-size: 13px;
+		line-height: 1;
+	}
+
+	&__label {
+		line-height: 1;
+	}
+}

blocks/plumbing-styles/src/index.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import './style.scss';
+import './editor.scss';
+
+/**
+ * Register block
+ */
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save,
+} );

blocks/plumbing-styles/src/save.js

@@ -0,0 +1,13 @@
+/**
+ * Save component — outputs a hidden span so the block has a DOM presence,
+ * which guarantees WordPress enqueues style-index.css on the frontend.
+ */
+export default function save() {
+	return (
+		<span
+			aria-hidden="true"
+			className="wp-block-elayne-plumbing-styles"
+			style={ { display: 'none' } }
+		/>
+	);
+}

blocks/plumbing-styles/src/style.scss

@@ -0,0 +1,182 @@
+/**
+ * Plumbing vertical — utility CSS.
+ *
+ * Loaded on any page that contains the elayne/plumbing-styles block.
+ * Lives here (not in plumbing.json "css" key) to avoid the wp_global_styles
+ * database snapshot problem. See docs/elayne/WP-GLOBAL-STYLES-MULTISITE.md.
+ */
+
+/* ── Section label pill ─────────────────────────────────────────────────── */
+
+.plumbing-section-label {
+	display: inline-block;
+	font-size: 0.75rem;
+	font-weight: 700;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+	color: #e67e22;
+	margin-bottom: 0.75rem;
+	padding: 0.3rem 0.9rem;
+	background: rgba( 230, 126, 34, 0.1 );
+	border-radius: 999px;
+	border: 1px solid rgba( 230, 126, 34, 0.2 );
+}
+
+/* ── Stat blocks ────────────────────────────────────────────────────────── */
+
+.plumbing-stat-block strong {
+	display: block;
+	font-size: 1.6rem;
+	font-weight: 900;
+	color: #e67e22;
+	line-height: 1;
+	margin-bottom: 0.25rem;
+	font-stretch: 75%;
+}
+
+.plumbing-stat-block span {
+	display: block;
+	font-size: 0.72rem;
+	color: #8fa3bf;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+.plumbing-stats-divider {
+	display: block;
+	width: 1px;
+	height: 36px;
+	background: rgba( 255, 255, 255, 0.1 );
+	align-self: center;
+}
+
+/* ── Why-us items ───────────────────────────────────────────────────────── */
+
+.plumbing-check-icon {
+	width: 30px;
+	height: 30px;
+	min-width: 30px;
+	background: rgba( 230, 126, 34, 0.15 );
+	border: 1px solid rgba( 230, 126, 34, 0.3 );
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #e67e22;
+}
+
+.plumbing-why-item {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+
+/* ── Featured card highlight ────────────────────────────────────────────── */
+
+.plumbing-t-featured {
+	border-color: rgba( 230, 126, 34, 0.35 ) !important;
+	background: rgba( 230, 126, 34, 0.05 ) !important;
+}
+
+/* ── Testimonial avatar ─────────────────────────────────────────────────── */
+
+.plumbing-avatar {
+	width: 42px;
+	height: 42px;
+	min-width: 42px;
+	border-radius: 50%;
+	background: linear-gradient( 135deg, #1e88e5, #e67e22 );
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.78rem;
+	font-weight: 700;
+	color: #fff;
+}
+
+/* ── Contact icon ───────────────────────────────────────────────────────── */
+
+.plumbing-contact-icon {
+	width: 38px;
+	height: 38px;
+	min-width: 38px;
+	background: rgba( 144, 202, 249, 0.1 );
+	border: 1px solid rgba( 144, 202, 249, 0.2 );
+	border-radius: 10px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #90caf9;
+}
+
+/* ── Always-on badge text ───────────────────────────────────────────────── */
+
+.plumbing-always-on {
+	color: #e67e22 !important;
+	font-weight: 600 !important;
+}
+
+/* ── Emergency icon pulse ───────────────────────────────────────────────── */
+
+@keyframes plumbing-pulse {
+	0%,
+	100% {
+		transform: scale( 1 );
+	}
+
+	50% {
+		transform: scale( 1.1 );
+	}
+}
+
+.plumbing-emergency-icon {
+	animation: plumbing-pulse 2s ease-in-out infinite;
+	display: inline-block;
+}
+
+/* ── Hero diagonal separator ────────────────────────────────────────────── */
+
+.plumbing-hero-section {
+	position: relative;
+	overflow: visible !important;
+}
+
+.plumbing-hero-section::after {
+	content: "";
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 80px;
+	background: #0b1628;
+	clip-path: polygon( 0 100%, 100% 0, 100% 100% );
+	z-index: 2;
+	pointer-events: none;
+}
+
+/* ── Header top bar ─────────────────────────────────────────────────────── */
+
+.plumbing-top-bar a {
+	color: #fff !important;
+}
+
+.plumbing-topbar-phone {
+	background: rgba( 255, 255, 255, 0.2 );
+}
+
+.plumbing-topbar-phone:hover {
+	background: rgba( 255, 255, 255, 0.35 );
+}
+
+/* ── Header CTA button ──────────────────────────────────────────────────── */
+
+.plumbing-header-cta {
+	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.plumbing-header-cta:hover {
+	background: #cf6d17 !important;
+	transform: translateY( -1px );
+	box-shadow: 0 4px 16px rgba( 230, 126, 34, 0.4 );
+}

elayne-blocks.php

@@ -3,7 +3,7 @@
  * Plugin Name: Elayne Blocks
  * Plugin URI: https://github.com/imagewize/elayne-blocks
  * Description: Custom blocks for the Elayne WordPress theme including Mega Menu, Carousel, and Slide blocks
- * Version: 2.7.0
+ * Version: 2.7.1
  * Requires at least: 6.9
  * Requires PHP: 7.4
  * Author: Jasper Frumau
@@ -23,7 +23,7 @@
 	exit;
 }
 
-define( 'ELAYNE_BLOCKS_VERSION', '2.7.0' );
+define( 'ELAYNE_BLOCKS_VERSION', '2.7.1' );
 define( 'ELAYNE_BLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
 define( 'ELAYNE_BLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
 
@@ -54,6 +54,7 @@ function () {
 				'faq-tabs'               => true,
 				'faq-tab-answer'         => true,
 				'search-overlay-trigger' => true,
+				'plumbing-styles'        => false,
 			)
 		);