✨feature: Set up pullquote block

acf/group_6821a3c4d0001.json

@@ -0,0 +1,98 @@
+{
+    "key": "group_6821a3c4d0001",
+    "title": "Pull Quote",
+    "fields": [
+        {
+            "key": "field_6a0b49f03f870",
+            "label": "Background Image",
+            "name": "quote_bg",
+            "aria-label": "",
+            "type": "image",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "return_format": "array",
+            "library": "all",
+            "min_width": "",
+            "min_height": "",
+            "min_size": "",
+            "max_width": "",
+            "max_height": "",
+            "max_size": "",
+            "mime_types": "",
+            "allow_in_bindings": 0,
+            "preview_size": "medium"
+        },
+        {
+            "key": "field_6a0b4a0c3f871",
+            "label": "Background Color",
+            "name": "quote_bg_color",
+            "aria-label": "",
+            "type": "color_picker",
+            "instructions": "",
+            "required": 0,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "enable_opacity": 1,
+            "return_format": "string",
+            "allow_in_bindings": 0,
+            "show_custom_palette": 0,
+            "show_color_wheel": 1,
+            "custom_palette_source": "",
+            "palette_colors": ""
+        },
+        {
+            "key": "field_6821a3c4d0010",
+            "label": "Quote Text",
+            "name": "quote_text",
+            "aria-label": "",
+            "type": "wysiwyg",
+            "instructions": "Enter the pull quote text. Use bold to highlight key phrases.",
+            "required": 1,
+            "conditional_logic": 0,
+            "wrapper": {
+                "width": "",
+                "class": "",
+                "id": ""
+            },
+            "default_value": "",
+            "tabs": "visual",
+            "toolbar": "basic",
+            "media_upload": 0,
+            "delay": 0,
+            "allow_in_bindings": 0
+        }
+    ],
+    "location": [
+        [
+            {
+                "param": "block",
+                "operator": "==",
+                "value": "acf\/pull-quote"
+            }
+        ]
+    ],
+    "menu_order": 0,
+    "position": "normal",
+    "style": "default",
+    "label_placement": "top",
+    "instruction_placement": "label",
+    "hide_on_screen": "",
+    "active": true,
+    "description": "",
+    "show_in_rest": 0,
+    "display_title": "",
+    "allow_ai_access": false,
+    "ai_description": "",
+    "modified": 1779125577
+}

styles/base/colors.css

@@ -9,6 +9,7 @@
 
     --color-cwc-blue-01: oklch(47.31% 0.1141 242.9);
     --color-cwc-blue-02: oklch(28.99% 0.0614 237.9);
+    --color-cwc-blue-03: oklch(80.63% 0.0724 230.4);
     --color-cwc-orange-01: oklch(63.53% 0.1751 29.61);
 
     --color-primary:     var(--color-cwc-blue-01);
@@ -36,6 +37,8 @@
     --color-bodylinks: oklch(0.48 0.0789 211.58);
     --color-footlinks: oklch(0.65 0.1104 212.2);
 
+    --color-pullquote-bg: color-mix(in oklch, var(--color-cwc-blue-03) 30%, transparent);
+
     --color-success:   oklch(64.01% 0.1751 146.7);
     --color-info:      oklch(0.55 0.0922 211.57);
     --color-warning:   oklch(84.42% 0.1722 84.93);

views/blocks/pull-quote/block.json

@@ -0,0 +1,27 @@
+{
+    "name": "acf/pull-quote",
+    "title": "Pull Quote",
+    "description": "A decorative pull quote with background vectors and accent border.",
+    "style": [
+        "file:./pull-quote.css"
+    ],
+    "category": "vdi-blocks",
+    "icon": "format-quote",
+    "keywords": [
+        "pull-quote",
+        "quote"
+    ],
+    "acf": {
+        "mode": "preview",
+        "renderTemplate": "pull-quote.php"
+    },
+    "supports": {
+        "align": true,
+        "anchor": true,
+        "color": false,
+        "html": false,
+        "jsx": false,
+        "mode": true,
+        "multiple": true
+    }
+}

views/blocks/pull-quote/pull-quote.css

@@ -0,0 +1,43 @@
+.pull-quote {
+    background: color-mix(in oklch, var(--color-cwc-blue-03) 30%, transparent);
+    border-bottom: 16px solid var(--color-cwc-blue-03);
+    position: relative;
+    overflow: hidden;
+}
+
+.pull-quote__vector {
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    z-index: 0;
+}
+
+.pull-quote__vector img {
+    display: block;
+    height: auto;
+    width: 100%;
+}
+
+.pull-quote__content {
+    position: relative;
+    z-index: 1;
+}
+
+.pull-quote__text {
+    font-family: var(--font-quincy);
+    font-size: var(--text-35px);
+    font-weight: 500;
+    line-height: 1.3;
+    padding: 6rem 0;
+    text-align: center;
+
+    strong, b {
+        color: var(--color-cwc-blue-02);
+        font-weight: 800;
+    }
+
+    p {
+        color: var(--color-cwc-blue-01);
+        margin: 0;
+    }
+}

views/blocks/pull-quote/pull-quote.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Block Name: Pull Quote
+ *
+ * A decorative pull quote with background vectors and accent border.
+ *
+ * @package CWC
+ */
+
+namespace CWC;
+
+$quote_bg      = get_field( 'quote_bg' );
+$quote_bgColor = get_field( 'quote_bg_color' );
+$quote_text    = get_field( 'quote_text' );
+
+if ( empty( $quote_text ) ) {
+	return;
+}
+
+if ( $quote_bgColor ) {
+    $quote_bgColor = 'bg-[' . esc_attr( $quote_bgColor ) . '] ';
+} else {
+    $quote_bgColor = 'bg-(--color-pullquote-bg) ';
+}
+
+$classes = $quote_bgColor . 'pull-quote mx-break-out';
+$wrapper = blockWrapperAttributes( $classes, $is_preview );
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<?php if ( $quote_bg ) : ?>
+        <div class="pull-quote__vector" aria-hidden="true">
+            <img class="pull-quote__vector--bg" src="<?php echo esc_url( $quote_bg['url'] ); ?>" alt="" loading="lazy" role="presentation" />
+        </div>
+	<?php endif; ?>
+
+	<div class="container pull-quote__content">
+		<div class="pull-quote__text container">
+			<?php echo wp_kses_post( $quote_text ); ?>
+		</div>
+	</div>
+</section>