TTI Resources Plugin

Creates a "Resource" custom post type with Gutenberg blocks for display and filtering.

Version

2.3.0

Features

• Custom "Resource" post type with format and topic taxonomies
• Three Gutenberg blocks for page-builder flexibility:
  • Resource List — Format-grouped cards with collapsible accordion headers
  • Resource Filters — Topic filter buttons and dual-range year slider
  • Featured Resources — Grid of resources tagged as featured
• Cross-block communication via vanilla JS event bus
• Topic icons uploaded per term in the admin
• Kadence theme integration (CSS custom properties with hardcoded fallbacks)
• WCAG 2.1 AA accessible (focus-visible, aria attributes, 44px touch targets, live regions)

Dependencies

• WordPress 6.0+
• ACF (Advanced Custom Fields) — Required for resource fields
• Kadence theme (recommended) or any WordPress theme

Installation

1. Upload to /wp-content/plugins/tti-resources/
2. Activate through WordPress Plugins menu
3. Install and activate ACF plugin
4. Go to ACF → Tools → Sync to import field groups
5. Add the Resource List, Resource Filters, and/or Featured Resources blocks to any page

Settings

Available under Resources → Settings in the admin:

• Disable Archive Page — hides the default /resources/ archive so a block page can be used instead

Development

Requirements

• Node.js
• npm

Setup

cd /wp-content/plugins/tti-resources
npm install

Build Commands

• npm run build — Build blocks (development)
• npm run prod — Build blocks (production)
• npm run start — Watch mode with hot reload

File Structure

• blocks/resource-list/ — Resource List block (edit.js, render.php, style.scss, editor.scss, block.json)
• blocks/resource-filters/ — Resource Filters block
• blocks/featured-resources/ — Featured Resources block
• blocks/shared/ — Shared SCSS variables/mixins and vanilla JS view script
• build/ — Compiled output (do not edit directly)
• includes/ — PHP: post types, blocks registration, template functions
• admin/ — Admin class, ACF field JSON, term icon uploader

Styling

• Only edit SCSS files in blocks/*/ — never edit compiled CSS in build/
• Plugin CSS provides layout only; fonts, colors, and backgrounds come from the theme via Kadence CSS custom properties

Deploy

Uses GitHub Actions for automatic deployment on push to main branch. See .github/workflows/main.yml