✨feature: Set up pullquote block

2026-05-18 13:08:32 -05:00
parent a0c6e3251b
commit 5642bf4300
5 changed files with 213 additions and 0 deletions
@@ -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
+    }
+}
@@ -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;
+    }
+}
@@ -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>