diff --git a/CHANGELOG.md b/CHANGELOG.md index bad8468..5363d2e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Planned - Continue importing native React blocks from the Nynaeve theme (e.g. contact-section, two-column-card, content-image-text-card, multi-column-content, related-articles), re-namespaced from `imagewize/*` to `aludra/*`. See `docs/PLAN-OF-ACTION.md` for the full gap analysis and import order. +## [2.9.3] - 2026-07-13 + +### Changed +- Redesigned the Settings → Aludra page as a categorized, multi-column grid of block cards instead of a single-column checkbox list. Blocks are grouped into **Carousel**, **Interactive**, and **Marketing & Content** sections, each rendered in a responsive card grid with toggle switches, a function glyph, and the block's namespace. +- The page now renders its own markup rather than the Settings API `do_settings_sections()` form-table, while keeping the same `aludra_enabled[...]` field names so the save/sanitize path is unchanged. + +### Added +- Live "enabled / total" counter in the settings header that updates as toggles change. +- Per-card dependency chips surfacing parent-child rules ("Requires Carousel" on Slide, "Requires FAQ Tabs" on FAQ Tab Answer); dependent toggles are disabled when their parent is off. +- `category` metadata on each block in `aludra_get_available_blocks()` and a new `aludra_get_block_categories()` helper defining category order and labels. + ## [2.9.2] - 2026-07-13 ### Fixed diff --git a/aludra.php b/aludra.php index 316bb2c..e20ce48 100644 --- a/aludra.php +++ b/aludra.php @@ -3,7 +3,7 @@ * Plugin Name: Aludra * Plugin URI: https://github.com/imagewize/aludra * Description: Shared custom block library for Imagewize block themes (Nynaeve, Elayne, Aviendha) — Mega Menu, Carousel, FAQ Tabs, and content blocks (Feature Cards, Pricing Tiers, Testimonial Grid, and more). Built with React, block.json, and @wordpress/scripts. - * Version: 2.9.2 + * Version: 2.9.3 * Requires at least: 6.9 * Requires PHP: 7.4 * Author: Jasper Frumau @@ -23,7 +23,7 @@ exit; } -define( 'ALUDRA_VERSION', '2.9.2' ); +define( 'ALUDRA_VERSION', '2.9.3' ); define( 'ALUDRA_PLUGIN_DIR', plugin_dir_path( __FILE__ ) ); define( 'ALUDRA_PLUGIN_URL', plugin_dir_url( __FILE__ ) ); diff --git a/assets/admin/admin-settings.css b/assets/admin/admin-settings.css index 2ac6c7e..abbea4e 100644 --- a/assets/admin/admin-settings.css +++ b/assets/admin/admin-settings.css @@ -1,68 +1,372 @@ /** * Admin Settings Page Styles * + * Categorized block-card grid for Settings → Aludra. + * * @package Aludra */ -.aludra-bulk-actions { - margin: 20px 0; - padding: 15px; - background: #f9f9f9; - border: 1px solid #ddd; - border-radius: 4px; +.aludra-settings { + --al-card: #ffffff; + --al-border: #e4e6ee; + --al-border-strong: #d3d6e0; + --al-ink: #16182b; + --al-muted: #6b6f7d; + --al-faint: #9498a6; + --al-brand: #4f46e5; + --al-brand-soft: #eef0fe; + --al-brand-line: #c9ccf7; + --al-spark: #e0912e; + --al-ok: #16a34a; + --al-radius: 12px; + --al-shadow: 0 1px 2px rgba(22, 24, 43, .05), 0 1px 3px rgba(22, 24, 43, .04); + --al-shadow-hover: 0 4px 14px rgba(22, 24, 43, .09); + + max-width: 1120px; + color: var(--al-ink); } -.aludra-bulk-actions .button { - margin-right: 10px; +/* ---- Header ---- */ +.aludra-settings .aludra-head { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 24px; + justify-content: space-between; + padding-bottom: 22px; + margin: 10px 0 26px; + border-bottom: 1px solid var(--al-border); } -/* Settings field styling */ -#aludra_main_section .form-table th { - width: 250px; - vertical-align: top; - padding-top: 15px; +.aludra-settings .aludra-wordmark { + display: flex; + align-items: center; + gap: 11px; } -#aludra_main_section .form-table td { - padding-top: 10px; +.aludra-settings .aludra-star { + width: 26px; + height: 26px; + flex: none; + color: var(--al-spark); } -#aludra_main_section .form-table td label { - display: inline-flex; +.aludra-settings .aludra-wordmark h1 { + margin: 0; + padding: 0; + font-size: 26px; + font-weight: 700; + letter-spacing: -.02em; + line-height: 1; + color: var(--al-ink); +} + +.aludra-settings .aludra-wordmark .sub { + display: block; + margin-top: 5px; + font-size: 12.5px; + font-weight: 500; + color: var(--al-muted); +} + +.aludra-settings .aludra-summary { + display: flex; align-items: center; + gap: 18px; +} + +.aludra-settings .aludra-count { + display: flex; + align-items: baseline; + gap: 7px; + padding: 9px 15px; + background: var(--al-card); + border: 1px solid var(--al-border); + border-radius: 999px; + box-shadow: var(--al-shadow); +} + +.aludra-settings .aludra-count b { + font-size: 18px; + font-weight: 700; + letter-spacing: -.01em; +} + +.aludra-settings .aludra-count .of { + color: var(--al-faint); + font-weight: 600; +} + +.aludra-settings .aludra-count .lbl { + font-size: 11px; + text-transform: uppercase; + letter-spacing: .08em; + color: var(--al-muted); + font-weight: 600; +} + +.aludra-settings .aludra-count .dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--al-ok); + align-self: center; +} + +.aludra-settings .aludra-bulk { + display: flex; gap: 8px; } -#aludra_main_section .form-table td input[type="checkbox"] { +/* ---- Category section ---- */ +.aludra-settings .aludra-cat { + margin-top: 34px; +} + +.aludra-settings .aludra-cat:first-of-type { + margin-top: 4px; +} + +.aludra-settings .aludra-cat-head { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 14px; +} + +.aludra-settings .aludra-cat-eyebrow { + display: flex; + align-items: center; + gap: 8px; + font-size: 11.5px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .12em; + color: var(--al-ink); +} + +.aludra-settings .aludra-cat-eyebrow .tick { + width: 13px; + height: 13px; + color: var(--al-spark); +} + +.aludra-settings .aludra-cat-rule { + flex: 1; + height: 1px; + background: var(--al-border); +} + +.aludra-settings .aludra-cat-count { + font-size: 11px; + font-weight: 600; + letter-spacing: .04em; + color: var(--al-muted); + padding: 3px 9px; + background: var(--al-card); + border: 1px solid var(--al-border); + border-radius: 999px; +} + +/* ---- Card grid ---- */ +.aludra-settings .aludra-grid { + display: grid; + gap: 14px; + grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); +} + +.aludra-settings .aludra-card { + position: relative; + background: var(--al-card); + border: 1px solid var(--al-border); + border-radius: var(--al-radius); + padding: 16px 16px 15px; + box-shadow: var(--al-shadow); + transition: border-color .15s, box-shadow .15s, transform .15s; + display: flex; + flex-direction: column; +} + +.aludra-settings .aludra-card:hover { + box-shadow: var(--al-shadow-hover); + transform: translateY(-1px); +} + +.aludra-settings .aludra-card.is-on { + border-color: var(--al-brand-line); +} + +.aludra-settings .aludra-card.is-off { + background: #fbfbfc; +} + +.aludra-settings .aludra-card.is-off .aludra-card-title, +.aludra-settings .aludra-card.is-off .aludra-card-desc { + opacity: .6; +} + +.aludra-settings .aludra-card.is-off .aludra-glyph { + opacity: .4; +} + +.aludra-settings .aludra-card-top { + display: flex; + align-items: flex-start; + gap: 12px; +} + +.aludra-settings .aludra-glyph { + width: 38px; + height: 38px; + flex: none; + border-radius: 9px; + display: grid; + place-items: center; + background: var(--al-brand-soft); + color: var(--al-brand); +} + +.aludra-settings .aludra-glyph svg { + width: 20px; + height: 20px; +} + +.aludra-settings .aludra-card-heading { + flex: 1; + min-width: 0; + padding-top: 1px; +} + +.aludra-settings .aludra-card-title { margin: 0; + padding: 0; + font-size: 14.5px; + font-weight: 600; + letter-spacing: -.01em; +} + +.aludra-settings .aludra-card-slug { + display: block; + margin-top: 2px; + font-size: 11px; + color: var(--al-faint); + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } -/* Description text styling */ -#aludra_main_section .description { - margin-top: 8px; - margin-bottom: 0; - color: #666; - font-size: 13px; +.aludra-settings .aludra-card-desc { + margin: 12px 0 0; + font-size: 12.8px; + color: var(--al-muted); line-height: 1.5; } -#aludra_main_section .description strong { - color: #d63638; +.aludra-settings .aludra-dep { + display: inline-flex; + align-items: center; + gap: 5px; + margin-top: 11px; + padding: 3px 9px 3px 7px; + font-size: 11px; + font-weight: 600; + color: #7a5c14; + background: #fdf5e7; + border: 1px solid #f3e2bf; + border-radius: 999px; + align-self: flex-start; +} + +.aludra-settings .aludra-dep svg { + width: 12px; + height: 12px; +} + +/* ---- Toggle switch ---- */ +.aludra-settings .aludra-toggle { + position: relative; + flex: none; + width: 40px; + height: 23px; +} + +.aludra-settings .aludra-toggle input { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + margin: 0; + opacity: 0; + cursor: pointer; + z-index: 1; +} + +.aludra-settings .aludra-track { + position: absolute; + inset: 0; + border-radius: 999px; + background: #cbcfda; + transition: background .18s; +} + +.aludra-settings .aludra-track::after { + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 17px; + height: 17px; + border-radius: 50%; + background: #fff; + box-shadow: 0 1px 2px rgba(0, 0, 0, .25); + transition: transform .18s; +} + +.aludra-settings .aludra-toggle input:checked + .aludra-track { + background: var(--al-brand); +} + +.aludra-settings .aludra-toggle input:checked + .aludra-track::after { + transform: translateX(17px); } -/* Child block indentation */ -#aludra_main_section tr.aludra-child-row th, -#aludra_main_section tr.aludra-child-row td { - padding-left: 30px; +.aludra-settings .aludra-toggle input:focus-visible + .aludra-track { + outline: 2px solid var(--al-brand); + outline-offset: 2px; } -/* Disabled state for child blocks */ -#aludra_main_section input[type="checkbox"]:disabled { - opacity: 0.5; +.aludra-settings .aludra-toggle input:disabled { cursor: not-allowed; } -/* Success message styling */ +.aludra-settings .aludra-toggle input:disabled + .aludra-track { + opacity: .45; +} + +/* ---- Save bar ---- */ +.aludra-settings .aludra-save { + display: flex; + align-items: center; + gap: 16px; + margin-top: 40px; + padding-top: 22px; + border-top: 1px solid var(--al-border); +} + +.aludra-settings .aludra-save .hint { + font-size: 12.5px; + color: var(--al-muted); +} + +/* Success message spacing */ .notice.settings-error { margin-top: 15px; } + +@media screen and (max-width: 782px) { + .aludra-settings .aludra-head { + align-items: flex-start; + } + + .aludra-settings .aludra-summary { + flex-wrap: wrap; + } +} diff --git a/assets/admin/admin-settings.js b/assets/admin/admin-settings.js index 40f77b9..16915d6 100644 --- a/assets/admin/admin-settings.js +++ b/assets/admin/admin-settings.js @@ -1,7 +1,8 @@ /** * Admin Settings Page JavaScript * - * Handles bulk actions and parent-child block dependencies. + * Handles bulk actions, the live enabled counter, card state, and + * parent-child block dependencies. * * @package Aludra */ @@ -10,59 +11,77 @@ 'use strict'; $(document).ready(function () { - // Tag child-block rows so CSS can indent them; the Settings API - // renders data-parent on the , not the . - $('.aludra-block-checkbox[data-parent]').each(function () { - $(this).closest('tr').addClass('aludra-child-row'); - }); + const $checkboxes = $('.aludra-block-checkbox'); - // Handle Enable All button. - $('#aludra-enable-all').on('click', function (e) { - e.preventDefault(); - $('.aludra-block-checkbox').prop('checked', true); - handleDependencies(); - }); + // Sync a card's on/off styling to its checkbox. + function syncCard($checkbox) { + const $card = $checkbox.closest('.aludra-card'); + const on = $checkbox.prop('checked'); + $card.toggleClass('is-on', on).toggleClass('is-off', !on); + } - // Handle Disable All button. - $('#aludra-disable-all').on('click', function (e) { - e.preventDefault(); - $('.aludra-block-checkbox').prop('checked', false); - handleDependencies(); - }); + // Update the "N / total enabled" counter in the header. + function updateCount() { + const enabled = $checkboxes.filter(':checked').length; + $('.aludra-count-num').text(enabled); + } // Handle parent-child dependencies. function handleDependencies() { // Carousel -> Slide dependency. - const carouselCheckbox = $('#aludra_carousel'); - const slideCheckbox = $('#aludra_slide'); + const carousel = $('#aludra_carousel'); + const slide = $('#aludra_slide'); - if (carouselCheckbox.length && slideCheckbox.length) { - if (!carouselCheckbox.prop('checked')) { - slideCheckbox.prop('checked', false).prop('disabled', true); + if (carousel.length && slide.length) { + if (!carousel.prop('checked')) { + slide.prop('checked', false).prop('disabled', true); } else { - slideCheckbox.prop('disabled', false); + slide.prop('disabled', false); } + syncCard(slide); } // FAQ Tabs -> FAQ Tab Answer dependency. - const faqTabsCheckbox = $('#aludra_faq-tabs'); - const faqTabAnswerCheckbox = $('#aludra_faq-tab-answer'); + const faqTabs = $('#aludra_faq-tabs'); + const faqAnswer = $('#aludra_faq-tab-answer'); - if (faqTabsCheckbox.length && faqTabAnswerCheckbox.length) { - if (!faqTabsCheckbox.prop('checked')) { - faqTabAnswerCheckbox.prop('checked', false).prop('disabled', true); + if (faqTabs.length && faqAnswer.length) { + if (!faqTabs.prop('checked')) { + faqAnswer.prop('checked', false).prop('disabled', true); } else { - faqTabAnswerCheckbox.prop('disabled', false); + faqAnswer.prop('disabled', false); } + syncCard(faqAnswer); } } - // Run on page load. - handleDependencies(); - - // Run when checkboxes change. - $('.aludra-block-checkbox').on('change', function () { + // Refresh everything derived from checkbox state. + function refresh() { handleDependencies(); + $checkboxes.each(function () { + syncCard($(this)); + }); + updateCount(); + } + + // Bulk: Enable all. + $('#aludra-enable-all').on('click', function (e) { + e.preventDefault(); + $checkboxes.prop('checked', true); + refresh(); + }); + + // Bulk: Disable all. + $('#aludra-disable-all').on('click', function (e) { + e.preventDefault(); + $checkboxes.prop('checked', false); + refresh(); + }); + + // React to individual toggles. + $checkboxes.on('change', function () { + syncCard($(this)); + refresh(); }); // Warn before disabling parent blocks with dependent children. @@ -85,9 +104,12 @@ if (!confirm(message)) { $(this).prop('checked', true); - handleDependencies(); } + refresh(); } }); + + // Initial sync on page load. + refresh(); }); })(jQuery); diff --git a/designs/settings-page.html b/designs/settings-page.html new file mode 100644 index 0000000..9a8d734 --- /dev/null +++ b/designs/settings-page.html @@ -0,0 +1,446 @@ + + + + + +Aludra Settings — Design Mockup + + + +
+ + +
+
+
+ + +
+
+ +
+

Aludra

+ Block library · 13 blocks for Imagewize themes +
+
+ +
+
+ + 12/ 13 + enabled +
+
+ + +
+
+
+ + +
+
+ + + Carousel + + + 2 blocks +
+
+ +
+
+ +
+

Carousel

+ aludra/carousel +
+ +
+

Create responsive image and content carousels with Slick Carousel.

+
+ +
+
+ +
+

Slide

+ aludra/slide +
+ +
+

Individual slides placed inside a Carousel block.

+ Requires Carousel +
+ +
+
+ + +
+
+ + + Interactive + + + 4 blocks +
+
+ +
+
+ +
+

Mega Menu

+ aludra/mega-menu +
+ +
+

Add expandable mega menus to a navigation block.

+
+ +
+
+ +
+

FAQ Tabs

+ aludra/faq-tabs +
+ +
+

Interactive FAQ with vertical tabs and content panels.

+
+ +
+
+ +
+

FAQ Tab Answer

+ aludra/faq-tab-answer +
+ +
+

A single question and answer inside FAQ Tabs.

+ Requires FAQ Tabs +
+ +
+
+ +
+

Search Overlay Trigger

+ aludra/search-overlay-trigger +
+ +
+

A search icon that opens a full-screen search overlay.

+
+ +
+
+ + +
+
+ + + Marketing & Content + + + 7 blocks +
+
+ +
+
+ +
+

Feature Cards

+ aludra/feature-cards +
+ +
+

Responsive grid of feature highlight cards with icons.

+
+ +
+
+ +
+

Icon Grid

+ aludra/icon-grid +
+ +
+

Auto-fit grid of icon and text items with a section header.

+
+ +
+
+ +
+

Trust Bar

+ aludra/trust-bar +
+ +
+

Inline bar of trust-signal items with icons.

+
+ +
+
+ +
+

Pricing Tiers

+ aludra/pricing-tiers +
+ +
+

Three-column pricing table with a featured tier.

+
+ +
+
+ +
+

Testimonial Grid

+ aludra/testimonial-grid +
+ +
+

Customer testimonials with metrics; carousels on larger sets.

+
+ +
+
+ +
+

CTA Columns

+ aludra/cta-columns +
+ +
+

Dual call-to-action cards with headings, text, and buttons.

+
+ +
+
+ +
+

Feature List Grid

+ aludra/feature-list-grid +
+ +
+

Two-column grid of features with checkmarks and hover effects.

+
+ +
+
+ + +
+ + Disabled blocks are hidden from the inserter and their assets stop loading. +
+ +
+
+
+ + diff --git a/includes/admin/settings-page.php b/includes/admin/settings-page.php index 257d2db..4fd0d24 100644 --- a/includes/admin/settings-page.php +++ b/includes/admin/settings-page.php @@ -2,7 +2,8 @@ /** * Admin Settings Page for Aludra * - * Provides an admin interface to selectively enable/disable individual blocks. + * Provides an admin interface to selectively enable/disable individual blocks, + * rendered as a categorized grid of block cards. * * @package Aludra */ @@ -27,7 +28,11 @@ function aludra_add_settings_page() { add_action( 'admin_menu', 'aludra_add_settings_page' ); /** - * Register settings with WordPress Settings API. + * Register the setting with the WordPress Settings API. + * + * The page renders its own fields (see aludra_settings_page_html), so only the + * option itself is registered here — that is what allows options.php to accept + * and sanitize the submitted `aludra_enabled` array. */ function aludra_register_settings() { register_setting( @@ -39,32 +44,6 @@ function aludra_register_settings() { 'default' => aludra_get_default_settings(), ) ); - - add_settings_section( - 'aludra_main_section', - __( 'Block Management', 'aludra' ), - 'aludra_settings_section_cb', - 'aludra' - ); - - // Get all available blocks. - $blocks = aludra_get_available_blocks(); - - foreach ( $blocks as $block_slug => $block_data ) { - add_settings_field( - 'aludra_' . $block_slug, - $block_data['label'], - 'aludra_settings_field_cb', - 'aludra', - 'aludra_main_section', - array( - 'slug' => $block_slug, - 'label' => $block_data['label'], - 'description' => $block_data['description'], - 'parent' => $block_data['parent'] ?? null, - ) - ); - } } add_action( 'admin_init', 'aludra_register_settings' ); @@ -91,66 +70,92 @@ function aludra_get_default_settings() { ); } +/** + * Get the ordered list of block categories. + * + * @return array Category slug => label. + */ +function aludra_get_block_categories() { + return array( + 'carousel' => __( 'Carousel', 'aludra' ), + 'interactive' => __( 'Interactive', 'aludra' ), + 'marketing' => __( 'Marketing & Content', 'aludra' ), + ); +} + /** * Get available blocks with metadata. * - * @return array Block configuration data. + * @return array Block configuration data keyed by block slug. */ function aludra_get_available_blocks() { return array( 'carousel' => array( - 'label' => __( 'Carousel Block', 'aludra' ), - 'description' => __( 'Create responsive image/content carousels with Slick Carousel', 'aludra' ), + 'label' => __( 'Carousel', 'aludra' ), + 'description' => __( 'Create responsive image and content carousels with Slick Carousel.', 'aludra' ), + 'category' => 'carousel', ), 'slide' => array( - 'label' => __( 'Slide Block', 'aludra' ), - 'description' => __( 'Individual slides for Carousel block', 'aludra' ), + 'label' => __( 'Slide', 'aludra' ), + 'description' => __( 'Individual slides placed inside a Carousel block.', 'aludra' ), + 'category' => 'carousel', 'parent' => 'carousel', ), 'mega-menu' => array( - 'label' => __( 'Mega Menu Block', 'aludra' ), - 'description' => __( 'Add expandable mega menus to navigation', 'aludra' ), + 'label' => __( 'Mega Menu', 'aludra' ), + 'description' => __( 'Add expandable mega menus to a navigation block.', 'aludra' ), + 'category' => 'interactive', ), 'faq-tabs' => array( - 'label' => __( 'FAQ Tabs Block', 'aludra' ), - 'description' => __( 'Interactive FAQ with vertical tabs and content panels', 'aludra' ), + 'label' => __( 'FAQ Tabs', 'aludra' ), + 'description' => __( 'Interactive FAQ with vertical tabs and content panels.', 'aludra' ), + 'category' => 'interactive', ), 'faq-tab-answer' => array( - 'label' => __( 'FAQ Tab Answer Block', 'aludra' ), - 'description' => __( 'Individual FAQ answers', 'aludra' ), + 'label' => __( 'FAQ Tab Answer', 'aludra' ), + 'description' => __( 'A single question and answer inside FAQ Tabs.', 'aludra' ), + 'category' => 'interactive', 'parent' => 'faq-tabs', ), 'search-overlay-trigger' => array( - 'label' => __( 'Search Overlay Trigger Block', 'aludra' ), - 'description' => __( 'Full-screen search overlay with custom styling', 'aludra' ), + 'label' => __( 'Search Overlay Trigger', 'aludra' ), + 'description' => __( 'A search icon that opens a full-screen search overlay.', 'aludra' ), + 'category' => 'interactive', ), 'feature-cards' => array( - 'label' => __( 'Feature Cards Block', 'aludra' ), - 'description' => __( 'Responsive grid of feature highlight cards with icons', 'aludra' ), + 'label' => __( 'Feature Cards', 'aludra' ), + 'description' => __( 'Responsive grid of feature highlight cards with icons.', 'aludra' ), + 'category' => 'marketing', ), 'icon-grid' => array( - 'label' => __( 'Icon Grid Block', 'aludra' ), - 'description' => __( 'Auto-fit grid of icon + text items with section header', 'aludra' ), + 'label' => __( 'Icon Grid', 'aludra' ), + 'description' => __( 'Auto-fit grid of icon and text items with a section header.', 'aludra' ), + 'category' => 'marketing', ), 'trust-bar' => array( - 'label' => __( 'Trust Bar Block', 'aludra' ), - 'description' => __( 'Inline bar of trust-signal items with icons', 'aludra' ), + 'label' => __( 'Trust Bar', 'aludra' ), + 'description' => __( 'Inline bar of trust-signal items with icons.', 'aludra' ), + 'category' => 'marketing', ), 'pricing-tiers' => array( - 'label' => __( 'Pricing Tiers Block', 'aludra' ), - 'description' => __( 'Three-column pricing comparison table with featured tier highlighting', 'aludra' ), + 'label' => __( 'Pricing Tiers', 'aludra' ), + 'description' => __( 'Three-column pricing table with a featured tier.', 'aludra' ), + 'category' => 'marketing', ), 'testimonial-grid' => array( - 'label' => __( 'Testimonial Grid Block', 'aludra' ), - 'description' => __( 'Customer testimonial grid with metrics, using Slick Carousel on larger sets', 'aludra' ), + 'label' => __( 'Testimonial Grid', 'aludra' ), + 'description' => __( 'Customer testimonials with metrics; carousels on larger sets.', 'aludra' ), + 'category' => 'marketing', ), 'cta-columns' => array( - 'label' => __( 'CTA Columns Block', 'aludra' ), - 'description' => __( 'Dual call-to-action cards with headings, descriptions, and buttons', 'aludra' ), + 'label' => __( 'CTA Columns', 'aludra' ), + 'description' => __( 'Dual call-to-action cards with headings, text, and buttons.', 'aludra' ), + 'category' => 'marketing', ), 'feature-list-grid' => array( - 'label' => __( 'Feature List Grid Block', 'aludra' ), - 'description' => __( 'Two-column grid of features with checkmarks and hover effects', 'aludra' ), + 'label' => __( 'Feature List Grid', 'aludra' ), + 'description' => __( 'Two-column grid of features with checkmarks and hover effects.', 'aludra' ), + 'category' => 'marketing', ), ); } @@ -197,49 +202,99 @@ function aludra_validate_dependencies( $settings ) { } /** - * Settings section callback. + * Return the inline SVG glyph for a block, keyed by slug. + * + * Glyphs are decorative; each is a simple line mark hinting at the block layout. + * + * @param string $slug Block slug. + * @return string SVG markup (already safe, hard-coded). */ -function aludra_settings_section_cb() { - echo '

' . esc_html__( 'Enable or disable individual blocks. Disabled blocks will not appear in the block inserter.', 'aludra' ) . '

'; +function aludra_get_block_glyph( $slug ) { + $glyphs = array( + 'carousel' => '', + 'slide' => '', + 'mega-menu' => '', + 'faq-tabs' => '', + 'faq-tab-answer' => '', + 'search-overlay-trigger' => '', + 'feature-cards' => '', + 'icon-grid' => '', + 'trust-bar' => '', + 'pricing-tiers' => '', + 'testimonial-grid' => '', + 'cta-columns' => '', + 'feature-list-grid' => '', + ); + + $path = isset( $glyphs[ $slug ] ) ? $glyphs[ $slug ] : ''; + + return ''; } /** - * Settings field callback for each block checkbox. + * Render the four-point "spark" star mark used in the header and category ticks. * - * @param array $args Field arguments. + * @param string $css_class CSS class for the SVG element. + * @return string SVG markup. */ -function aludra_settings_field_cb( $args ) { - $enabled_blocks = get_option( 'aludra_enabled', aludra_get_default_settings() ); - $slug = $args['slug']; - $checked = ! empty( $enabled_blocks[ $slug ] ); - $parent = $args['parent'] ?? null; - - echo ''; - - if ( ! empty( $args['description'] ) ) { - echo '

' . esc_html( $args['description'] ); - if ( $parent ) { - echo '
' . esc_html__( 'Note:', 'aludra' ) . ' '; - /* translators: %s: parent block name */ - printf( +function aludra_star_svg( $css_class ) { + return ''; +} + +/** + * Render a single block card. + * + * @param string $slug Block slug. + * @param array $block Block metadata. + * @param bool $enabled Whether the block is currently enabled. + * @param array $enabled_blocks Full enabled-state map (used to resolve parent state). + */ +function aludra_render_block_card( $slug, $block, $enabled, $enabled_blocks ) { + $parent = isset( $block['parent'] ) ? $block['parent'] : null; + $parent_disabled = $parent && empty( $enabled_blocks[ $parent ] ); + $state_class = $enabled ? 'is-on' : 'is-off'; + $checkbox_id = 'aludra_' . $slug; + ?> +

+
+ +
+

+ aludra/ +
+ +
+

+ + + + + '; - } + printf( esc_html__( 'Requires %s', 'aludra' ), esc_html( $blocks[ $parent ]['label'] ) ); + ?> + + +
+ $block ) { + if ( ! empty( $enabled_blocks[ $slug ] ) ) { + ++$enabled_count; + } + } ?> -
-

+
-
- - -
- - +
+
+ +
+

+ + + +
+
+ +
+
+ + + / + +
+
+ + +
+
- + + + + $cat_label ) : ?> + +
+
+ + + + + + + + +
+
+ $block ) { + aludra_render_block_card( $slug, $block, ! empty( $enabled_blocks[ $slug ] ), $enabled_blocks ); + } + ?> +
+
+ + +
+ + +