Skip to content

Commit b3d38e4

Browse files
wpgauravwpgaurav
committed
v2.2.0: Minimalist visual overhaul for product box, pros/cons, and TOC blocks
Product Box: - Remove show more/less toggle and its JS - Bump description + features font to 1rem (16px) - Fix grid align-items: center → start - Add data-acf-block attribute for TOC filtering Pros & Cons: - Minimalist redesign: flush columns, border-bottom separators - Reduced font to 0.875rem, uppercase title with letter-spacing - Removed border-left in favor of background-only columns - Dark mode border separator adjustment - Reduced icon SVGs from 16px to 14px - Add data-acf-block attribute TOC Block: - Minimalist CSS: removed border-left, opacity-based link visibility - Title as tiny uppercase label at 0.5 opacity - New 'Include ACF Block Headings' checkbox (default OFF) - Filters rendered HTML to exclude headings from ACF blocks - Sticky CSS cleaned up
1 parent 14d8419 commit b3d38e4

8 files changed

Lines changed: 42 additions & 32 deletions

File tree

‎acf-blocks.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* Plugin Name: ACF Blocks
44
* Plugin URI: https://github.com/wpgaurav/acf-blocks-plugin
55
* Description: A collection of ACF Pro blocks for the WordPress block editor with automatic field group registration.
6-
* Version: 2.1.8
6+
* Version: 2.2.0
77
* Requires at least: 6.0
88
* Requires PHP: 7.4
99
* Author: Gaurav Tiwari
@@ -19,7 +19,7 @@
1919
}
2020

2121
// Plugin constants
22-
define( 'ACF_BLOCKS_VERSION', '2.1.8' );
22+
define( 'ACF_BLOCKS_VERSION', '2.2.0' );
2323
define( 'ACF_BLOCKS_PLUGIN_DIR', plugin_dir_path( __FILE__ ) );
2424
define( 'ACF_BLOCKS_PLUGIN_URL', plugin_dir_url( __FILE__ ) );
2525
define( 'ACF_BLOCKS_PLUGIN_FILE', __FILE__ );

‎blocks/product-box/product-box.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blocks/product-box/product-box.php‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
$wrapper_attributes = get_block_wrapper_attributes(['class' => 'acf-product-box']);
6363
?>
6464

65-
<div <?php echo $wrapper_attributes; ?>>
65+
<div <?php echo $wrapper_attributes; ?> data-acf-block="product-box">
6666
<?php if ($badge_text) : ?>
6767
<div class="acf-product-box__badge" style="background-color: <?php echo esc_attr($badge_color); ?>;">
6868
<?php echo esc_html($badge_text); ?>
@@ -113,23 +113,13 @@
113113
<?php endif; ?>
114114

115115
<?php if (!empty($features)) : ?>
116-
<div class="acf-product-box__features-wrap">
117-
<ul class="acf-product-box__features">
118-
<?php foreach ($features as $feature) : ?>
119-
<?php if (!empty($feature['pb_feature_text'])) : ?>
120-
<li><?php echo esc_html($feature['pb_feature_text']); ?></li>
121-
<?php endif; ?>
122-
<?php endforeach; ?>
123-
</ul>
124-
<button type="button" class="acf-product-box__features-toggle" hidden>Show more</button>
125-
</div>
126-
<?php
127-
static $pb_features_script = false;
128-
if (!$pb_features_script) :
129-
$pb_features_script = true;
130-
?>
131-
<script>document.addEventListener('DOMContentLoaded',function(){document.querySelectorAll('.acf-product-box__features-wrap').forEach(function(w){var l=w.querySelector('.acf-product-box__features'),b=w.querySelector('.acf-product-box__features-toggle');if(!l||!b)return;if(l.scrollHeight>280)b.hidden=false;b.addEventListener('click',function(){var e=l.classList.toggle('is-expanded');b.textContent=e?'Show less':'Show more'})})});</script>
132-
<?php endif; ?>
116+
<ul class="acf-product-box__features">
117+
<?php foreach ($features as $feature) : ?>
118+
<?php if (!empty($feature['pb_feature_text'])) : ?>
119+
<li><?php echo esc_html($feature['pb_feature_text']); ?></li>
120+
<?php endif; ?>
121+
<?php endforeach; ?>
122+
</ul>
133123
<?php endif; ?>
134124

135125
<?php if ($original_price || $current_price) : ?>
@@ -150,7 +140,7 @@
150140
<?php endif; ?>
151141

152142
<?php if ($description) : ?>
153-
<div class="acf-product-box__description">
143+
<div class="acf-product-box__description" style="font-size:1rem">
154144
<?php echo wp_kses_post($description); ?>
155145
</div>
156146
<?php endif; ?>

‎blocks/pros-cons/pros-cons.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blocks/pros-cons/pros-cons.php‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ function acf_pros_cons_process_list($html, $type = 'positive') {
1717
}
1818

1919
// SVG icons (inline for performance - no extra HTTP requests)
20-
$check_icon = '<span class="acf-pros-cons__icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
21-
$x_icon = '<span class="acf-pros-cons__icon" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>';
20+
$check_icon = '<span class="acf-pros-cons__icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg></span>';
21+
$x_icon = '<span class="acf-pros-cons__icon" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>';
2222

2323
$icon = ($type === 'positive') ? $check_icon : $x_icon;
2424

@@ -45,12 +45,12 @@ function acf_pros_cons_process_list($html, $type = 'positive') {
4545
// Color fields with defaults
4646
$neg_bg = acf_blocks_get_field('pc_neg_bg_color', $block) ?: '#fef2f2';
4747
$neg_border = acf_blocks_get_field('pc_neg_border_color', $block) ?: '#dc2626';
48-
$neg_title_color = acf_blocks_get_field('pc_neg_title_color', $block) ?: '#dc2626';
48+
$neg_title_color = acf_blocks_get_field('pc_neg_title_color', $block) ?: '#991b1b';
4949
$neg_icon_color = acf_blocks_get_field('pc_neg_icon_color', $block) ?: '#dc2626';
5050

5151
$pos_bg = acf_blocks_get_field('pc_pos_bg_color', $block) ?: '#f0fdf4';
5252
$pos_border = acf_blocks_get_field('pc_pos_border_color', $block) ?: '#16a34a';
53-
$pos_title_color = acf_blocks_get_field('pc_pos_title_color', $block) ?: '#16a34a';
53+
$pos_title_color = acf_blocks_get_field('pc_pos_title_color', $block) ?: '#166534';
5454
$pos_icon_color = acf_blocks_get_field('pc_pos_icon_color', $block) ?: '#16a34a';
5555

5656
// Build wrapper classes
@@ -71,13 +71,12 @@ function acf_pros_cons_process_list($html, $type = 'positive') {
7171
$block_id = 'pc-' . uniqid();
7272
?>
7373

74-
<div <?php echo $anchor_attr; ?> class="<?php echo esc_attr(implode(' ', $wrapper_classes)); ?>" data-pc-id="<?php echo esc_attr($block_id); ?>">
74+
<div <?php echo $anchor_attr; ?> class="<?php echo esc_attr(implode(' ', $wrapper_classes)); ?>" data-pc-id="<?php echo esc_attr($block_id); ?>" data-acf-block="pros-cons">
7575
<?php
7676
ob_start();
7777
?>
7878
[data-pc-id="<?php echo esc_attr($block_id); ?>"] .acf-pros-cons__negative {
7979
background-color: <?php echo esc_attr($neg_bg); ?>;
80-
border-left-color: <?php echo esc_attr($neg_border); ?>;
8180
}
8281
[data-pc-id="<?php echo esc_attr($block_id); ?>"] .acf-pros-cons__negative .acf-pros-cons__title {
8382
color: <?php echo esc_attr($neg_title_color); ?>;
@@ -88,7 +87,6 @@ function acf_pros_cons_process_list($html, $type = 'positive') {
8887
}
8988
[data-pc-id="<?php echo esc_attr($block_id); ?>"] .acf-pros-cons__positive {
9089
background-color: <?php echo esc_attr($pos_bg); ?>;
91-
border-left-color: <?php echo esc_attr($pos_border); ?>;
9290
}
9391
[data-pc-id="<?php echo esc_attr($block_id); ?>"] .acf-pros-cons__positive .acf-pros-cons__title {
9492
color: <?php echo esc_attr($pos_title_color); ?>;

‎blocks/toc-block/block-data.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,15 @@
5252
"layout": "horizontal",
5353
"instructions": "Select which heading levels to include in the table of contents."
5454
},
55+
{
56+
"key": "field_toc_include_acf_headings",
57+
"label": "Include ACF Block Headings",
58+
"name": "toc_include_acf_block_headings",
59+
"type": "true_false",
60+
"default_value": 0,
61+
"ui": 1,
62+
"instructions": "When enabled, headings inside ACF blocks (product boxes, pros/cons, etc.) will be included in the table of contents. Off by default."
63+
},
5564
{
5665
"key": "field_toc_list_type",
5766
"label": "List Type",

‎blocks/toc-block/toc-block.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎blocks/toc-block/toc-block.php‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,7 @@ function acf_toc_generate_schema( $headings, $post_id ) {
213213
$link_class = acf_blocks_get_field( 'toc_link_class', $block );
214214
$include_schema = acf_blocks_get_field( 'toc_schema', $block );
215215
$aria_label = acf_blocks_get_field( 'toc_aria_label', $block ) ?: 'Table of Contents';
216+
$include_acf_headings = acf_blocks_get_field( 'toc_include_acf_block_headings', $block );
216217

217218
// Validate heading levels
218219
if ( ! is_array( $heading_levels ) || empty( $heading_levels ) ) {
@@ -264,6 +265,18 @@ function acf_toc_generate_schema( $headings, $post_id ) {
264265
}
265266
}
266267

268+
// Strip headings inside ACF blocks when checkbox is OFF (default)
269+
if ( ! $include_acf_headings && ! empty( $post_content ) ) {
270+
// After do_blocks(), rendered HTML contains data-acf-block attributes
271+
// on product boxes, pros/cons, etc. Strip those wrappers and their content
272+
// so their internal headings don't appear in the TOC.
273+
$post_content = preg_replace(
274+
'/<([a-z][a-z0-9]*)\b[^>]*\bdata-acf-block\b[^>]*>.*?<\/\1>/is',
275+
'',
276+
$post_content
277+
);
278+
}
279+
267280
// Extract headings from the rendered content
268281
$headings = acf_toc_extract_headings( $post_content, $heading_levels );
269282

@@ -343,7 +356,7 @@ class="<?php echo esc_attr( implode( ' ', $block_classes ) ); ?>"
343356
// Inline CSS for sticky behavior (only when sticky is enabled)
344357
if ( $sticky && ! defined( 'ACF_TOC_STICKY_CSS_LOADED' ) ) :
345358
define( 'ACF_TOC_STICKY_CSS_LOADED', true );
346-
$sticky_css = ':root{--acf-toc-sticky-offset:calc(var(--header-height,0px) + var(--wp-admin--admin-bar--height,0px) + 20px)}@media(min-width:1400px){.acf-toc--sticky{position:fixed;top:var(--acf-toc-sticky-offset);left:0;max-width:220px;max-height:calc(100vh - var(--acf-toc-sticky-offset) - 20px);overflow-y:auto;scrollbar-width:thin;font-size:0.8125em;line-height:1.4;z-index:100}.acf-toc--sticky .acf-toc__title{font-size:0.875em;margin-bottom:0.5em}.acf-toc--sticky .acf-toc__content{padding-left:0.75em;border-left-width:2px}.acf-toc--sticky .acf-toc__item{padding:0.125em 0}.acf-toc--sticky .acf-toc__sublist{padding-left:0.75em;margin-top:0.125em;margin-left:0}.acf-toc--sticky::-webkit-scrollbar{width:3px}.acf-toc--sticky::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);border-radius:2px}}';
359+
$sticky_css = ':root{--acf-toc-sticky-offset:calc(var(--header-height,0px) + var(--wp-admin--admin-bar--height,0px) + 20px)}@media(min-width:1400px){.acf-toc--sticky{position:fixed;top:var(--acf-toc-sticky-offset);left:0;max-width:220px;max-height:calc(100vh - var(--acf-toc-sticky-offset) - 20px);overflow-y:auto;scrollbar-width:thin;font-size:0.8125em;line-height:1.4;z-index:100}.acf-toc--sticky .acf-toc__title{font-size:0.75em;margin-bottom:0.5em}.acf-toc--sticky .acf-toc__item{padding:0}.acf-toc--sticky .acf-toc__link{padding:0.15em 0}.acf-toc--sticky .acf-toc__sublist{padding-left:0.75em;margin-top:0;margin-left:0}.acf-toc--sticky::-webkit-scrollbar{width:3px}.acf-toc--sticky::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,0.15);border-radius:2px}}';
347360
echo '<style>' . acf_blocks_minify_css( $sticky_css ) . '</style>';
348361
// Set custom offset if provided
349362
if ( $sticky_offset && $sticky_offset != 20 ) {

0 commit comments

Comments
 (0)