Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Set up pullquote block
Sync TODOs with Issues / sync_todos (push) Successful in 7s
Details

Browse Source
This commit is contained in:
Keith Solomon
2026-05-18 13:08:32 -05:00
parent a0c6e3251b
commit 5642bf4300
5 changed files with 213 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
acf/group_6821a3c4d0001.json
+98
View File
@@ -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
+3
View File
@@ -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
+27
View File
@@ -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
+43
View File
@@ -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
+42
View File
@@ -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>