Skip to main content Home Creators petenelson wp-rest-api-log ignite-wp
ignite-wp Build with Ignite WP, 10up's modular WordPress block-based UI kit. Covers 50+ Gutenberg blocks, plugin APIs, Interactivity API stores, theme.json configuration, CSS patterns, and design system tokens. Use when working with tenup/* blocks, Ignite plugins, or projects using the Ignite theme.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/petenelson/wp-rest-api-log --skill ignite-wpThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository Create and modify Gutenberg blocks following 10up engineering standards. Covers block.json metadata, dynamic rendering with PHP, attributes, deprecations, editor components, and the useBlockProps pattern. Use when creating new blocks, fixing block errors, or modifying existing block code.
Extend core WordPress blocks with custom attributes and controls using the 10up block extension pattern. Alternative to block styles when multiple controls are needed. Use when adding functionality to existing blocks rather than creating new ones.
Create reusable block patterns and synced patterns following 10up standards. Covers PHP file-based registration, pattern metadata, categories, and the block bindings API. Use when creating reusable layout components or content templates.
Related occupations SOC
Based on SOC occupation classification
name ignite-wp description Build with Ignite WP, 10up's modular WordPress block-based UI kit. Covers 50+ Gutenberg blocks, plugin APIs, Interactivity API stores, theme.json configuration, CSS patterns, and design system tokens. Use when working with tenup/* blocks, Ignite plugins, or projects using the Ignite theme. license MIT compatibility WordPress 6.6+, PHP 8.2+, Node.js 20+ globs ["**/ignite-wp-*/**","**/tenup/**","**/wp-block-tenup-*","**/theme.json","**/view-module.js","**/is-style-surface-*","**/is-typography-preset-*"] metadata {"author":"10up","version":"2.0"}
Ignite WP Development
Ignite WP is 10up's modular WordPress block-based UI kit providing 50+ enterprise-grade Gutenberg blocks across 18 plugins. Built on four pillars: Block-First , Accessible (WCAG 2.1 AA), Performant , and Extensible .
When to Use
Working with any tenup/* block (accordion, carousel, tabs, modal, etc.)
Configuring Ignite plugins via theme.json
Creating custom blocks that integrate with Ignite components
Extending or customizing Ignite block behavior via filters/hooks
Building a theme using Ignite design system tokens
Implementing frontend interactivity with Ignite stores
Installing or managing Ignite plugins via CLI or Composer
Styling blocks using section styles or typography presets
Applying CSS patterns that integrate with Ignite design tokens
Core Concepts
Block Namespace All Ignite blocks use the tenup/ namespace prefix:
tenup/accordion, tenup/accordion-group, tenup/accordion-header, tenup/accordion-contenttenup/carousel, tenup/carousel-itemtenup/modal, tenup/icon, tenup/tabstenup/site-header, tenup/navigation, tenup/navigation-megamenu
Plugin Architecture Each plugin follows a consistent structure:
ignite-wp-[name]/
├── ignite-wp-[name].php # Main plugin file
├── blocks/ # Gutenberg blocks
│ └── block-name/
│ ├── block.json # Block metadata
│ ├── index.js # Editor entry
│ ├── edit.js # Editor component
│ ├── markup.php # Server-side render
│ └── view-module.js # Interactivity API
├── src/ # PHP classes
│ ├── PluginCore.php # Main class
│ └── Blocks.php # Block registration
└── package.json # Build config (10up-toolkit)
Interactivity API Stores Ignite uses WordPress Interactivity API for frontend behavior:
Store Plugin Purpose tenup/accordionAccordion Expand/collapse panels tenup/carouselCarousel Slide navigation, SplideJS tenup/modalModal Dialog show/hide, a11y-dialog tenup/site-headerNavigation Header state, regions, Headroom tenup/query-filterQuery Filter AJAX filtering, load more tenup/statsStats Count animation on scroll
Procedure
Step 1: Identify the Plugin Determine which Ignite plugin handles the block or feature:
Block Pattern Plugin tenup/accordion*ignite-wp-accordion tenup/carousel*ignite-wp-carousel tenup/modalignite-wp-modal tenup/tabsignite-wp-tabs tenup/iconignite-wp-icons tenup/timeline*ignite-wp-timeline tenup/site-header, tenup/navigation*ignite-wp-navigation tenup/post-picker, tenup/time-to-readignite-wp-post-picker tenup/query-*-filter, tenup/query-load-moreignite-wp-query-filter tenup/post-meta*ignite-wp-post-meta-blocks tenup/statsignite-wp-stats tenup/copyrightignite-wp-copyright
Step 2: Configure via theme.json Most Ignite blocks are customized through theme.json, not code:
{
"settings" : {
"blocks" : {
"tenup/accordion-header" : {
"custom" : {
"tenup" : {
"icon" : { "iconSet" : "ignite-wp" , "iconName" : "chevron-down" } ,
":expanded" : {
"icon" : { "iconSet" : "ignite-wp" , "iconName" : "chevron-up" }
} ,
"iconPosition" : "right"
}
}
}
}
}
}
Step 3: Extend with PHP Filters Customize block output and behavior using WordPress filters:
add_filter ('render_block_tenup/carousel' , function($content ) {
$carousel_state = wp_interactivity_state ('tenup/carousel' );
$carousel_state ['default' ]['perPage' ] = 2 ;
wp_interactivity_state ('tenup/carousel' , $carousel_state );
return $content ;
});
add_filter ('tenup_modal_supported_blocks' , function($blocks ) {
$blocks [] = 'namespace/custom-block' ;
return $blocks ;
});
Step 4: Extend with JavaScript Filters For editor-side customization:
import { addFilter } from '@wordpress/hooks' ;
addFilter ('tenup.carousel.allowedBlocks' , 'namespace/filter' , (blocks ) => {
return [...blocks, 'namespace/custom-slide' ];
});
addFilter ('tenup.carousel.template' , 'namespace/filter' , () => {
return [['tenup/carousel-item' ], ['tenup/carousel-item' ]];
});
Step 5: Use Interactivity API For frontend behavior, extend existing stores:
import { store, getContext } from '@wordpress/interactivity' ;
store ('tenup/modal' , {
actions : {
onShow (console .log ('Modal opened' );
},
onHide (console .log ('Modal closed' );
}
}
});
Plugin Quick Reference
Ignite Core (Required) Foundation plugin providing shared utilities:
use function IgniteWPCore \Helpers \register_icons ;
use function IgniteWPCore \Helpers \render_icon ;
use function IgniteWPCore \Helpers \get_fluid_clamp_value ;
register_icons ([
'name' => 'my-icons' ,
'label' => 'My Icons' ,
'icons' => $icons ,
]);
render_icon ('ignite-wp' , 'chevron-down' , ['class' => 'my-class' ]);
$clamp = get_fluid_clamp_value (16 , 24 , 375 , 1440 , 'rem' );
Default Icons: check, chevron-down/left/right/up, close, menu, minus, plus, search, pause, play, facebook, github, instagram, linkedin, twitter, youtube
Accordion {
"settings" : {
"blocks" : {
"tenup/accordion-header" : {
"custom" : {
"tenup" : {
"icon" : { "iconSet" : "ignite-wp" , "iconName" : "plus" } ,
":expanded" : { "icon" : { "iconSet" : "ignite-wp" , "iconName" : "minus" } } ,
"iconPosition" : "right"
}
}
}
}
}
}
Carousel (SplideJS) {
"settings" : {
"blocks" : {
"tenup/carousel" : {
"custom" : {
"tenup" : {
"showDots" : true ,
"showArrows" : true ,
"perPage" : 1 ,
"slideType" : "slide" ,
"icons" : {
"arrowNext" : { "iconSet" : "ignite-wp" , "iconName" : "chevron-right" } ,
"arrowPrevious" : { "iconSet" : "ignite-wp" , "iconName" : "chevron-left" }
}
}
}
}
}
}
}
Modal (a11y-dialog) {
"settings" : {
"blocks" : {
"tenup/modal" : {
"custom" : {
"tenup" : {
"supportsOverlayColorPalette" : true }
}
}
}
}
}
add_filter ('tenup_modal_supported_blocks' , fn($blocks ) => [...$blocks , 'my/block' ]);
add_filter ('tenup_modal_inner_block_template' , fn() => [
['core/heading' ],
['core/embed' ]
]);
Navigation {
"settings" : {
"blocks" : {
"tenup/site-header" : {
"custom" : {
"tenup" : {
"enableBackdrop" : true ,
"navigationBreakpoint" : "768px" ,
"enableHeadroom" : true }
}
}
}
}
}
Interactivity Store State:
const { state } = store ('tenup/site-header' );
CSS Patterns
Core Philosophy
theme.json is for tokens - Define design tokens, palettes, spacing scalesCSS is for styling - Implement visual presentation, hover states, responsive behavior
Specificity Pattern Use :root prefix with [class] to override WordPress defaults:
:root .wp-block-button__link [class] {
background-color : var (--wp--custom--color--accent);
transition : all var (--wp--custom--transition--duration-normal);
}
:root .wp-block-button__link [class] :hover {
background-color : var (--wp--custom--color--accent-hover);
}
Section Styles Never set backgroundColor/textColor directly on Group/Columns. Use section styles:
Style Class Use Case Surface Inverted is-style-surface-invertedLight bg with dark text Surface Accent is-style-surface-accentAccent bg with accent borders Surface Primary is-style-surface-primaryPrimary color scheme
Typography Presets Bundle font-size, weight, line-height together:
<h1 class ="is-typography-preset-display-lg" > Title</h1 >
Available: display-lg, display-md, heading-1/2/3/4, body-lg, body-base, body-sm, code
Block Class Convention .wp-block-tenup- [plugin-name]
.wp-block-tenup- [plugin-name] __element
.wp-block-tenup- [plugin-name] --modifier
Design System Tokens Always use theme.json design tokens:
var (--wp--custom--spacing--1 )
var (--wp--custom--spacing--4 )
var (--wp--custom--spacing--8 )
var (--wp--custom--color--surface )
var (--wp--custom--color--text--primary )
var (--wp--custom--color--border )
var (--wp--custom--color--accent )
var (--wp--custom--radius--sm )
var (--wp--custom--radius--md )
var (--wp--custom--transition--duration-normal )
var (--wp--custom--transition--ease-out )
Responsive Breakpoint
@media (min-width : 768px ) {
}
Reduced Motion @media (prefers-reduced-motion : reduce) {
.animated-element {
animation : none;
transition : none;
}
}
Installation
Ignite CLI (Recommended)
npx @10up/ignite-cli install
npx @10up/ignite-cli install accordion carousel icons
npx @10up/ignite-cli download accordion
Eject for Customization npx @10up/ignite-cli eject accordion
Verification
Build assets: pnpm build (from wp-content root)Check console: No JavaScript errorsTest editor: Block appears and functions correctlyTest frontend: Interactivity works (accordion opens, carousel slides)Mobile test: Responsive at 375px, 768px, 1024pxAccessibility: Keyboard navigation, focus indicators, ARIADark/light mode: Both work correctlyReduced motion: Respects user preference
Failure Modes
Check if ignite-wp-core is active (required dependency)
Verify plugin is activated
Check browser console for JS errors
Interactivity not working:
Ensure data-wp-interactive attribute is on wrapper
Check store name matches (e.g., tenup/accordion)
Verify view-module.js is built and enqueued
theme.json config not applying:
JSON syntax error - validate with JSONLint
Wrong nesting path (must be under settings.blocks.tenup/block-name.custom.tenup)
Cache - clear browser and WordPress cache
Icon set not registered (use Ignite Core's register_icons)
Wrong iconSet/iconName combination
Check available icons in Ignite Core
SplideJS not loaded - check for script errors
perPage attribute mismatch between editor and frontend
Check wp_interactivity_state() in render filter
Reference Files
Escalation
Need to add a new block type to an Ignite plugin
Custom interactivity behavior beyond extending existing stores
Performance issues with Query Filter on large datasets
Complex megamenu layouts with multiple template parts
Editorial workflow customization beyond standard statuses
GitHub authentication issues during installation
Need to offboard plugins for client handoff
