### Custom Activation Handler Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
An example of how to hook into the 'kadence_blocks_activated' action to perform custom setup after activation, such as adding plugin settings.
```php
// Custom activation handler
add_action( 'kadence_blocks_activated', function() {
// Setup custom options
add_option( 'my_plugin_setting', 'default_value' );
} );
```
--------------------------------
### Get Library Patterns Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Fetch available block patterns from the prebuilt library by specifying library and pattern type. Requires user capability to edit posts.
```javascript
fetch( '/wp-json/kadence-blocks/v1/library/patterns?library=kadence&pattern_type=section' )
.then( res => res.json() )
.then( patterns => console.log( patterns ) );
```
--------------------------------
### CSS Generation Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Includes over 40 examples demonstrating the CSS generation system within Kadence Blocks.
```CSS
40+ CSS generation examples
```
--------------------------------
### Install Composer Dependencies
Source: https://github.com/stellarwp/kadence-blocks/wiki/Development-Setup
Run this command after cloning the repository to install PHP dependencies.
```bash
composer install
```
--------------------------------
### Action Hook Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Showcases examples for action hooks, with over 10 action hooks documented.
```PHP
10+ action hooks documented
```
--------------------------------
### Form Handling Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Provides 15 examples related to form handling and field types within Kadence Blocks.
```PHP
15+ Form handling examples
```
--------------------------------
### Install npm Dependencies
Source: https://github.com/stellarwp/kadence-blocks/wiki/Development-Setup
Run this command after cloning the repository to install JavaScript dependencies.
```bash
npm install
```
--------------------------------
### Debugging Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Contains 10+ examples focused on debugging techniques and error handling patterns within Kadence Blocks.
```Text
10+ Debugging examples
```
--------------------------------
### JavaScript/React Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Features 10+ examples written in JavaScript or React, likely for editor interactions or frontend components.
```JavaScript
10+ JavaScript/React examples
```
--------------------------------
### PHP Class Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Includes examples for core PHP classes such as App, Container, Abstract_Block, CSS, Editor_Assets, Frontend, Prebuilt_Library, and Form_Block.
```PHP
KadenceWP\KadenceBlocks\App
```
```PHP
KadenceWP\KadenceBlocks\Container
```
```PHP
Kadence_Blocks_Abstract_Block
```
```PHP
Kadence_Blocks_CSS
```
```PHP
KadenceWP\KadenceBlocks\Editor_Assets
```
```PHP
Kadence_Blocks_Frontend
```
```PHP
Kadence_Blocks_Prebuilt_Library
```
```PHP
Kadence_Blocks_Form_Block
```
--------------------------------
### Text Input Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a basic text input field configuration, including label, name, placeholder, and a required flag.
```php
[
'type' => 'text',
'label' => 'Your Name',
'name' => 'full_name',
'placeholder' => 'John Doe',
'required' => true,
]
```
--------------------------------
### Time Input Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a time input field, including its type, label, and name.
```php
[
'type' => 'time',
'label' => 'Time',
'name' => 'meeting_time',
]
```
--------------------------------
### Pexels Image Integration Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Example of image data structure when integrating with Pexels. Images are automatically downloaded and stored.
```php
// Images from Pexels API
// Automatically downloaded and stored
$image_data = [
'url' => 'https://pexels.com/photo/...,
'credit' => 'Photo by John Doe',
'license'=> 'Free for commercial use',
];
```
--------------------------------
### Filter Hook Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Demonstrates the usage of filter hooks for customizing plugin behavior. Over 50 filter hooks are documented with examples.
```PHP
50+ filter hooks documented with examples
```
--------------------------------
### REST API: Get Patterns Query Parameters
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Example query parameters for filtering patterns via the REST API.
```http
?library=kadence&pattern_type=section&category=hero
```
--------------------------------
### Run Local Tests
Source: https://github.com/stellarwp/kadence-blocks/wiki/Testing-Locally
Execute this command to start the local test runner.
```bash
slic run
```
--------------------------------
### Data Type Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Examples illustrating various data structures used within the plugin, including block attributes, REST request/response types, and form data.
```JSON
Block Attributes
```
```JSON
REST Request/Response types
```
```JSON
CSS Generation objects
```
```JSON
Form data structures
```
```JSON
License and cache formats
```
--------------------------------
### Singleton Access
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Get the singleton instance of the CSS generator class to start building CSS rules.
```APIDOC
## Singleton Access
Get the singleton instance of the CSS generator class.
```php
$css = Kadence_Blocks_CSS::get_instance();
```
```
--------------------------------
### Select Dropdown Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a select dropdown field, including its type, label, name, required status, and an array of options with labels and values.
```php
[
'type' => 'select',
'label' => 'Choose Option',
'name' => 'category',
'required' => true,
'options' => [
[ 'label' => 'Option 1', 'value' => 'opt1' ],
[ 'label' => 'Option 2', 'value' => 'opt2' ],
],
]
```
--------------------------------
### REST API Endpoints Examples
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Illustrates examples for various REST API endpoints, including post queries, taxonomy selection, image picking, and form submissions.
```HTTP
POST /kbp/v1/post-query
```
```HTTP
GET /kbp/v1/taxonomies-select
```
```HTTP
GET /kbp/v1/term-select
```
```HTTP
POST /kadence-blocks/v1/image-picker
```
```HTTP
GET /kadence-blocks/v1/library/patterns
```
```HTTP
POST /kadence-blocks/v1/library/import
```
```HTTP
GET /kadence-blocks/v1/library/categories
```
```HTTP
POST /kadence-blocks/v1/library/images
```
```HTTP
POST /kadence-blocks/v1/form-submit
```
```HTTP
POST /kadence-blocks/v1/upload-lottie
```
--------------------------------
### Register Custom Blocks
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/helper-functions.md
Example of registering custom block classes using the 'init' action hook.
```php
add_action( 'init', function() {
// Register custom block classes
$my_block = new My_Custom_Block();
} );
```
--------------------------------
### Number Input Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a number input field, including its type, label, name, default value, and number validation.
```php
[
'type' => 'number',
'label' => 'Quantity',
'name' => 'quantity',
'value' => 1,
'validation' => 'number',
]
```
--------------------------------
### App::instance
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/app-and-container.md
Get or create the singleton instance of the application. This method is crucial for bootstrapping the application and accessing its services.
```APIDOC
## App::instance
### Description
Get or create the singleton instance of the application. This method is crucial for bootstrapping the application and accessing its services.
### Method
`public static function instance( ?Container $container = null ): App`
### Parameters
#### Path Parameters
- **container** (Container | null) - Optional - DI container instance; required on first call
### Response
#### Success Response (App)
- Returns the application singleton instance.
### Throws
- `InvalidArgumentException` - If no container is provided on the first call.
### Example
```php
use KadenceWP\KadenceBlocks\App;
use KadenceWP\KadenceBlocks\StellarWP\ProphecyMonorepo\Container\ContainerAdapter;
// Bootstrap the application
$container = new ContainerAdapter( new \KadenceWP\KadenceBlocks\lucatume\DI52\Container() );
$app = App::instance( $container );
// Access the container from the app
$container = $app->container();
```
```
--------------------------------
### CAPTCHA Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a CAPTCHA field configuration, specifying type, CAPTCHA provider, size, and the site key.
```php
[
'type' => 'captcha',
'captchaType' => 'recaptcha',
'captchaSize' => 'normal',
'siteKey' => 'your_site_key',
]
```
--------------------------------
### Example: Automatic CSS Generation
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/frontend.md
Illustrates the automatic CSS generation process for Kadence blocks like row-layout and column, with CSS outputted directly in the head.
```php
// Called automatically
// Finds all blocks: kadence/row-layout, kadence/column, etc.
// Generates CSS for each and outputs in head
```
--------------------------------
### Start Media Query
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Begins a media query context. Subsequent rules will be added within this query. Use stop_media_query() to end the context.
```php
public function start_media_query( $value )
```
```php
$css->set_selector( '.kb-block' );
$css->add_rule( 'font-size', '16px' );
$css->start_media_query( '(max-width: 768px)' );
$css->add_rule( 'font-size', '14px' );
$css->stop_media_query();
```
--------------------------------
### Lottie Animation Upload Response Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
This is an example of the JSON response received after successfully uploading a Lottie animation file. It includes the animation's ID, URL, and name.
```json
{
"id": "animation-123",
"url": "/path/to/animation.json",
"name": "Animation Name"
}
```
--------------------------------
### Date Input Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Configuration for a date input field, specifying its type, label, and name.
```php
[
'type' => 'date',
'label' => 'Date',
'name' => 'event_date',
]
```
--------------------------------
### File Upload Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a file upload field, including type, label, name, accepted file types, maximum size, and required status.
```php
[
'type' => 'file',
'label' => 'Upload File',
'name' => 'document',
'accept' => '.pdf,.doc,.docx',
'maxSize' => 5242880, // 5MB in bytes
'required' => false,
]
```
--------------------------------
### Get Prebuilt Patterns
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/README.md
Retrieves prebuilt patterns from the Kadence library. You can specify which library to fetch patterns from.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/patterns
### Description
Retrieves prebuilt patterns from the Kadence library.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/patterns
### Parameters
#### Query Parameters
- **library** (string) - Optional - Specifies the library to fetch patterns from (e.g., 'kadence'). Defaults to 'kadence' if not provided.
### Request Example
```javascript
const patterns = await fetch(
'/wp-json/kadence-blocks/v1/library/patterns?library=kadence'
).then( r => r.json() );
```
### Response
#### Success Response (200)
- **patterns** (array) - An array of prebuilt pattern objects.
#### Response Example
```json
{
"patterns": [
{
"name": "Hero Section",
"content": "..."
}
]
}
```
```
--------------------------------
### Block Data Structure Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/types.md
Illustrates the structure of a parsed block object returned by the WordPress block parser. Shows a detailed example of a Row Layout block with a nested Column block.
```php
$block = [
'blockName' => string, // Full block name: "kadence/row-layout"
'attrs' => array, // Block attributes with user values
'innerBlocks' => array, // Child blocks (recursive structure)
'innerHTML' => string, // Block's inner HTML content
'innerContent' => array, // Array of content and block placeholders
'namespace' => string, // Block namespace: "kadence"
];
// Example:
$block = [
'blockName' => 'kadence/row-layout',
'attrs' => [
'uniqueID' => 'kb-row-abc123',
'columns' => 2,
'gutter' => [ 'desktop' => '20px', 'tablet' => '15px', 'mobile' => '10px' ],
'backgroundColor' => '#ffffff',
],
'innerBlocks' => [
[
'blockName' => 'kadence/column',
'attrs' => [
'uniqueID' => 'kb-col-abc123',
'columnWidth' => [ 'desktop' => '50', 'tablet' => '50', 'mobile' => '100' ],
],
'innerBlocks' => [],
'innerHTML' => '...
',
'innerContent' => [ '...
' ],
],
],
'innerHTML' => '...
',
'innerContent' => [
'',
null, // Block index 0 (column)
'
',
],
];
```
--------------------------------
### GET /wp-json/kadence-blocks/v1/library/categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieves a list of available pattern categories from the prebuilt library.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/categories
### Description
Get available pattern categories.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/categories
```
--------------------------------
### Block Development
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Guides and references for developing custom blocks with Kadence Blocks, including the abstract block class, CSS generation, and helper functions.
```APIDOC
## Block Development
### Description
This section outlines the resources for developing custom blocks using the Kadence Blocks framework. It covers the core abstract block class, tools for CSS generation, and utility helper functions.
### Key Resources
- **Abstract Block Class**: `api-reference/abstract-block.md` - Provides the base class for creating new blocks, including over 25 public methods.
- **CSS Generator**: `api-reference/css-generator.md` - Details on generating dynamic CSS for blocks, with over 40 methods for styling.
- **Helper Functions**: `api-reference/helper-functions.md` - A collection of over 15 utility functions to assist in block development.
- **Block Attributes**: `types.md#block-attributes` - Documentation on defining block attribute schemas.
### Getting Started
1. Read the `Abstract Block` documentation, focusing on the Block Registration and Block Implementation Example sections.
2. Utilize `Helper Functions` as needed for common tasks.
3. Test your custom block by creating a `block.json` file and a render callback.
```
--------------------------------
### Get Pattern Styles
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Retrieves a list of all available pattern styles.
```php
public function get_pattern_styles()
```
--------------------------------
### Start Development Watcher
Source: https://github.com/stellarwp/kadence-blocks/wiki/Development-Setup
Executes the development script to watch for changes in JS and style files and automatically update them.
```bash
npm run start
```
--------------------------------
### Global Utility Functions
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Provides examples of global utility functions available in the plugin, such as asset retrieval, environment checks, and data manipulation.
```PHP
kadence_blocks_get_asset_file()
```
```PHP
kadence_blocks_is_not_amp()
```
```PHP
kadence_blocks_is_rest()
```
```PHP
kadence_blocks_hex2rgba()
```
```PHP
kadence_blocks_is_number()
```
```PHP
kadence_blocks_wc_clean()
```
```PHP
kadence_apply_aos_wrapper_args()
```
```PHP
kadence_blocks_get_post_types()
```
--------------------------------
### Complete Form Configuration Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
This PHP array defines the structure and behavior of a complete contact form, including fields, submission settings, and messages.
```php
$form_attributes = [
'uniqueID' => 'contact-form-1',
'formFields' => [
[
'id' => 'field_1',
'type' => 'text',
'label' => 'Your Name',
'name' => 'name',
'required' => true,
'width' => '100%',
],
[
'id' => 'field_2',
'type' => 'email',
'label' => 'Email Address',
'name' => 'email',
'required' => true,
'width' => '100%',
],
[
'id' => 'field_3',
'type' => 'select',
'label' => 'Subject',
'name' => 'subject',
'required' => true,
'width' => '100%',
'options' => [
[ 'label' => 'Sales', 'value' => 'sales' ],
[ 'label' => 'Support', 'value' => 'support' ],
],
],
[
'id' => 'field_4',
'type' => 'textarea',
'label' => 'Message',
'name' => 'message',
'required' => true,
'width' => '100%',
'rows' => 5,
],
[
'id' => 'field_5',
'type' => 'captcha',
'captchaType' => 'recaptcha',
],
],
'submitText' => 'Send Message',
'successMessage' => 'Thank you! We will be in touch soon.',
'emailTo' => 'contact@example.com',
'emailSubject' => 'New Contact Form Submission',
'redirectURL' => '/thank-you/',
];
```
--------------------------------
### Checkbox Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Configuration for a checkbox field, specifying its type, label, name, and default value.
```php
[
'type' => 'checkbox',
'label' => 'I agree to terms',
'name' => 'agree_terms',
'value' => 'yes',
]
```
--------------------------------
### Get Media Queries for Device
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Retrieves an array of media query rules for a specified device breakpoint like 'tablet' or 'mobile'.
```php
public function get_media_queries( $device )
```
--------------------------------
### FluentCRM Integration Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
PHP code showing data structure for adding a contact to FluentCRM. Integration is handled automatically via form settings.
```php
// Add contact to FluentCRM
$contact_data = [
'email' => $_POST['email'],
'first_name' => $_POST['first_name'],
'last_name' => $_POST['last_name'],
'phone' => $_POST['phone'] ?? '',
'custom_data' => $_POST['custom_fields'] ?? [],
];
// Automatically integrated via form settings
```
--------------------------------
### Get Multisite Options
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
Retrieve options for the current site or network-wide settings in a multisite environment. Use get_option for the current site and get_site_option for network-wide.
```php
// Get option from current site
$option = get_option( 'kadence_blocks_settings' );
// Get network-wide option
$option = get_site_option( 'kadence_blocks_settings' );
// Activate plugin per site
add_action( 'kadence_blocks_activated', function() {
if ( is_multisite() ) {
// Per-site initialization
}
} );
```
--------------------------------
### Textarea Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Configuration for a textarea field, specifying type, label, name, placeholder, required status, and the number of rows.
```php
[
'type' => 'textarea',
'label' => 'Message',
'name' => 'message',
'placeholder' => 'Your message here...',
'required' => true,
'rows' => 5,
]
```
--------------------------------
### Complete CSS Generation Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Demonstrates the full workflow of using the Kadence Blocks CSS Generator to add base styles, hover states, and responsive media queries, then outputting the final CSS.
```php
$css = Kadence_Blocks_CSS::get_instance();
$css->set_style_id( 'kb-custom-block-abc' );
// Base styles
$css->set_selector( '.kb-custom-block-abc' );
$css->add_properties( [
'background-color' => '#f5f5f5',
'padding' => '20px',
'border-radius' => '4px',
] );
// Hover state
$css->add_selector_state( 'hover' );
$css->add_rule( 'background-color', '#e0e0e0' );
$css->add_rule( 'transform', 'scale(1.02)' );
// Tablet media query
$css->start_media_query( '(max-width: 768px)' );
$css->change_selector( '.kb-custom-block-abc' );
$css->add_rule( 'padding', '15px' );
$css->add_rule( 'font-size', '14px' );
$css->stop_media_query();
// Get the final CSS
$final_css = $css->output();
// Output inline in content
echo '';
```
--------------------------------
### Query Posts Taxonomy Endpoint Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieve taxonomy terms for filtering posts. Specify the post type and taxonomy to get a list of available terms.
```javascript
fetch( '/wp-json/kadence-blocks/v1/query-posts-taxonomies', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify( {
type: 'post',
taxonomy: 'category',
} ),
} )
.then( res => res.json() )
.then( terms => console.log( terms ) );
```
--------------------------------
### GET /kadence-blocks/v1/library/patterns
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Retrieves a list of available pre-built patterns from the Kadence Blocks library, enabling users to insert them into their content.
```APIDOC
## GET /kadence-blocks/v1/library/patterns
### Description
Retrieves a list of available pre-built patterns from the Kadence Blocks library, enabling users to insert them into their content.
### Method
GET
### Endpoint
/kadence-blocks/v1/library/patterns
### Response
#### Success Response (200)
- **patterns** (array) - An array of pattern objects, each containing details like name, description, and content.
#### Response Example
{
"example": "{\"patterns\": [{\"name\": \"Hero Section\", \"description\": \"A modern hero section pattern.\"}]}"
}
```
--------------------------------
### Register Service Provider
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
Extend Kadence Blocks functionality by registering a custom service provider. This example shows how to bind a custom service to the container.
```php
namespace MyPlugin;
use KadenceWP\KadenceBlocks\StellarWP\ProphecyMonorepo\Container\Contracts\Providable;
class My_Provider implements Providable {
public function register( $container ) {
$container->bind( 'my_service', MyService::class );
}
public function boot( $container ) {
// Run after all services are registered
}
}
// Register provider
add_action( 'init', function() {
$app = \KadenceWP\KadenceBlocks\App::instance();
$app->container()->register( My_Provider::class );
}, 15 );
```
--------------------------------
### Get Prebuilt Patterns via REST API
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/README.md
Retrieves prebuilt patterns from the Kadence Blocks library. Specify the desired library (e.g., 'kadence').
```javascript
const patterns = await fetch(
'/wp-json/kadence-blocks/v1/library/patterns?library=kadence'
).then( r => r.json() );
```
--------------------------------
### Custom Block Implementation
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/abstract-block.md
Example of extending the Kadence_Blocks_Abstract_Block to create a custom block. Ensure to set the namespace, block name, and whether styles or scripts are required.
```php
class Kadence_Blocks_Custom_Block extends Kadence_Blocks_Abstract_Block {
protected $namespace = 'kadence';
protected $block_name = 'custom-block';
protected $has_style = true;
protected $has_script = true;
public function __construct() {
parent::__construct();
}
}
$block = new Kadence_Blocks_Custom_Block();
```
--------------------------------
### Nonce Generation and Fetch Request
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Example of how to generate a nonce in the WordPress editor and use it to make a authenticated fetch request to an API endpoint.
```javascript
const nonce = window.kadenceBlocksParams?.nonce;
fetch( '/wp-json/kadence-blocks/v1/query-posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-WP-Nonce': nonce,
},
body: JSON.stringify( { /* ... */ } ),
} );
```
--------------------------------
### Get Kadence Blocks Settings
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
Retrieve the current global settings for Kadence Blocks using `get_option`. This is useful for inspecting or modifying settings.
```php
// Get settings
$settings = get_option( 'kadence_blocks_settings' );
```
--------------------------------
### Email Input Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Configuration for an email input field, specifying type, label, name, placeholder, required status, and email validation.
```php
[
'type' => 'email',
'label' => 'Email Address',
'name' => 'email',
'placeholder' => 'your@email.com',
'required' => true,
'validation' => 'email',
]
```
--------------------------------
### Build Project Assets
Source: https://github.com/stellarwp/kadence-blocks/wiki/Testing-Locally
Run this command to build the necessary assets for the project.
```bash
slic cc build
```
--------------------------------
### Mailerlite Integration Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
PHP code showing data structure for subscribing a user to a Mailerlite list. Integration is handled automatically via form settings.
```php
// Subscribe to Mailerlite list
$subscriber = [
'email' => $_POST['email'],
'name' => $_POST['name'],
'list_id' => 'your_list_id',
'fields' => [ /* custom fields */ ],
];
// Automatically integrated via form settings
```
--------------------------------
### Conditional Block Registration
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/abstract-block.md
Override the 'should_register' method to conditionally enable blocks. This example demonstrates registering a block only if the Kadence Pro version is active.
```php
protected function should_register() {
// Only register if Pro version is active
return class_exists( 'Kadence_Pro' );
}
```
--------------------------------
### Bootstrap Kadence Blocks App
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/app-and-container.md
Bootstrap the Kadence Blocks application by creating a container instance and then getting the application singleton. You can then access the container from the app instance.
```php
use KadenceWP\KadenceBlocks\App;
use KadenceWP\KadenceBlocks\StellarWP\ProphecyMonorepo\Container\ContainerAdapter;
// Bootstrap the application
$container = new ContainerAdapter( new \KadenceWP\KadenceBlocks\lucatume\DI52\Container() );
$app = App::instance( $container );
// Access the container from the app
$container = $app->container();
```
--------------------------------
### Example: Iterating Through Post Blocks
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/frontend.md
Demonstrates how to fetch blocks for the current post and loop through them, displaying each block's name and attributes. Requires the post ID to be known.
```php
$post_id = get_the_ID();
$blocks = $frontend->get_post_blocks( $post_id );
foreach ( $blocks as $block ) {
echo 'Block: ' . $block['blockName'];
echo 'Attributes: ' . json_encode( $block['attrs'] );
}
```
--------------------------------
### GET /wp-json/kadence-blocks/v1/library/patterns
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieves available block patterns from the prebuilt library. Supports filtering by library, pattern type, style, search term, and category.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/patterns
### Description
Get available block patterns from the prebuilt library.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/patterns
### Parameters
#### Query Parameters
- **library** (string) - Library slug
- **pattern_type** (string) - Pattern type filter
- **pattern_style** (string) - Pattern style filter
- **search** (string) - Search term
- **category** (string) - Category filter
### Response
#### Success Response
Returns array of patterns with metadata:
- `id` (string) - Pattern ID
- `title` (string) - Pattern title
- `thumbnail` (string) - Thumbnail URL
- `blocks` (JSON) - Block structure (JSON)
- `category` (string) - Pattern category
- `content` (string) - Pattern HTML
### Request Example
```javascript
fetch( '/wp-json/kadence-blocks/v1/library/patterns?library=kadence&pattern_type=section' )
.then( res => res.json() )
.then( patterns => console.log( patterns ) );
```
```
--------------------------------
### Generate Dynamic CSS - Steps
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Steps for generating dynamic CSS, including reading the overview, learning to set selectors and add rules, referencing the build_css() method, and exploring advanced features like media queries.
```markdown
1. Read: CSS Generator -> Overview
2. Learn: CSS Generator -> Set Selector and Add Rules
3. Example: Abstract Block -> build_css() method
4. Advanced: CSS Generator -> Media Queries
```
--------------------------------
### Kadence_Blocks_Frontend::on_init
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/frontend.md
Initializes frontend rendering by setting up REST API routes, script/style registrations, and CSS generation hooks. This method is called on the 'init' hook.
```APIDOC
## Kadence_Blocks_Frontend::on_init
### Description
Initializes frontend rendering. Called on `init` hook.
Sets up REST API routes for frontend, script and style registrations, and CSS generation hooks.
### Method
`public function on_init(): void`
```
--------------------------------
### Radio Button Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Example of a radio button group, including type, label, name, and an array of options with labels and values.
```php
[
'type' => 'radio',
'label' => 'Select One',
'name' => 'choice',
'options' => [
[ 'label' => 'Yes', 'value' => 'yes' ],
[ 'label' => 'No', 'value' => 'no' ],
],
]
```
--------------------------------
### Using Kadence Blocks Constants
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/helper-functions.md
Demonstrates how to use Kadence Blocks constants for accessing plugin path, URL, version, and basename.
```php
// Using constants
$script_path = KADENCE_BLOCKS_PATH . 'dist/blocks/row-layout/index.js';
$stylesheet_url = KADENCE_BLOCKS_URL . 'dist/blocks/row-layout/style.css';
echo 'Version: ' . KADENCE_BLOCKS_VERSION;
// Output: Version: 3.7.5
```
--------------------------------
### start_media_query
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Begins a media query context. All CSS rules added after this call will be placed within the specified media query.
```APIDOC
## start_media_query
### Description
Starts a media query context. All subsequent rules are added to the media query.
### Method
`start_media_query(string $value): void`
### Parameters
#### Path Parameters
- **value** (string) - Required - Media query string (e.g., '(max-width: 768px)')
### Request Example
```php
$css->set_selector( '.kb-block' );
$css->add_rule( 'font-size', '16px' );
$css->start_media_query( '(max-width: 768px)' );
$css->add_rule( 'font-size', '14px' );
$css->stop_media_query();
```
```
--------------------------------
### Create a Custom Block - Steps
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Steps to create a custom block, referencing relevant sections for block registration, implementation, helper functions, and testing.
```markdown
1. Read: Abstract Block -> Block Registration section
2. See: Abstract Block -> Block Implementation Example
3. Add: Helper Functions if needed
4. Test: Create block.json and render callback
```
--------------------------------
### Kadence Blocks Attribute Schema Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/README.md
An example of a block attribute schema as defined in `block.json`, following WordPress block API standards. This defines the structure and default values for block attributes.
```json
{
"attributes": {
"uniqueID": { "type": "string" },
"columns": { "type": "number", "default": 1 },
"color": { "type": "string" }
}
}
```
--------------------------------
### Call the REST API - Steps
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Steps for interacting with the REST API, covering listing endpoint documentation, reviewing examples, understanding authentication, and debugging REST API errors.
```markdown
1. List: Endpoints -> all endpoint documentation
2. Examples: Endpoints -> at end of each section
3. Auth: Configuration -> REST API integration
4. Debug: Errors -> REST API Errors
```
--------------------------------
### Get Pattern Styles
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieves available pattern styles from the library.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/styles
### Description
Get available pattern styles.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/styles
```
--------------------------------
### Initialize Frontend Rendering
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/frontend.md
Initializes frontend rendering by setting up REST API routes, script/style registrations, and CSS generation hooks. This method is called automatically on the 'init' hook.
```php
public function on_init(): void
```
--------------------------------
### Get Pattern Categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Retrieves a list of all available pattern categories.
```php
public function get_pattern_categories()
```
--------------------------------
### Main Plugin Initialization Hook
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
The `kadence_blocks_init` action hook is the primary hook for plugin initialization. It allows you to access the plugin's application instance.
```php
add_action( 'kadence_blocks_init', function() {
// Plugin is initialized
$app = \KadenceWP\KadenceBlocks\App::instance();
} );
```
--------------------------------
### Get Industries
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieves a list of available industry categories for filtering images.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/industries
### Description
Get available industry categories for image filtering.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/industries
### Response
Returns array of industries:
- `id` — Industry ID
- `name` — Industry name
```
--------------------------------
### Get Categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Retrieves an array of categories with their ID, name, and pattern count.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/categories
### Description
Returns array of categories with:
- `id` — Category ID
- `name` — Category name
- `count` — Pattern count
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/categories
```
--------------------------------
### Kadence Blocks License Helper Functions
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/helper-functions.md
Provides helper functions for checking license status, retrieving license keys, domains, and authorization tokens.
```php
use function KadenceWP\KadenceBlocks\StellarWP\Uplink\get_authorization_token;
use function KadenceWP\KadenceBlocks\StellarWP\Uplink\get_license_key;
use function KadenceWP\KadenceBlocks\StellarWP\Uplink\is_authorized;
use function KadenceWP\KadenceBlocks\StellarWP\Uplink\get_license_domain;
// Check if site is authorized
if ( is_authorized() ) {
// License is active
}
// Get license key
$key = get_license_key();
// Get license domain
$domain = get_license_domain();
// Get auth token
$token = get_authorization_token();
```
--------------------------------
### Switch to Kadence Blocks Project
Source: https://github.com/stellarwp/kadence-blocks/wiki/Testing-Locally
Use this command to switch your Slic environment to the Kadence Blocks project.
```bash
slic use kadence-blocks
```
--------------------------------
### Handle Form Submissions - Steps
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Steps for handling form submissions with Kadence Blocks, including reviewing the form submission endpoint specification, understanding field types, utilizing form hooks, and examining integration examples.
```markdown
1. Spec: Forms -> Form Submission Endpoint
2. Fields: Forms -> Field Types (10+ types)
3. Hooks: Forms -> Form Hooks
4. Examples: Forms -> Integration examples
```
--------------------------------
### Get Current Media Query
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Retrieves the string value of the current media query.
```php
public function get_media_query()
```
--------------------------------
### Get CSS Generator Instance
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Access the singleton instance of the CSS generator class.
```php
$css = Kadence_Blocks_CSS::get_instance();
```
--------------------------------
### REST API: Get Pattern Categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Endpoint to retrieve available pattern categories.
```http
GET /wp-json/kadence-blocks/v1/library/categories
```
--------------------------------
### Get Image Industries
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Retrieves a list of industries available for filtering images in the image library.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/industries
### Description
Retrieves a list of industries available for filtering images in the image library.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/industries
### Response
#### Success Response (200)
- **industries** (array) - An array of industry slugs or names.
```
--------------------------------
### Configuration and Hooks
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/INDEX.md
Information on customizing Kadence Blocks behavior through hooks, filters, and configuration settings.
```APIDOC
## Configuration and Hooks
### Description
This section details how to customize and extend Kadence Blocks using its extensive system of hooks, filters, and configuration options.
### Key Areas
- **Initialization Hooks**: `configuration.md#initialization-hooks` - Understand the plugin lifecycle and hook into its initialization process.
- **Filters and Actions**: `configuration.md` - Explore over 50 available filters and actions for modifying plugin behavior.
- **REST API Integration**: `configuration.md#registering-custom-rest-routes` - Learn how to register custom REST API routes.
- **Custom Fonts**: `configuration.md#kadence_blocks_add_custom_fonts` - Specific hooks and helpers for adding custom font support.
### Usage
Refer to the `configuration.md` file for a comprehensive list of hooks and their usage examples. The `README.md` also provides examples for custom initialization.
```
--------------------------------
### Get Pattern Categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Retrieves a list of all available pattern categories, which can be used for filtering patterns.
```APIDOC
## GET /wp-json/kadence-blocks/v1/library/categories
### Description
Retrieves a list of all available pattern categories, which can be used for filtering patterns.
### Method
GET
### Endpoint
/wp-json/kadence-blocks/v1/library/categories
### Response
#### Success Response (200)
- **categories** (array) - An array of category objects, each with a name and count.
```
--------------------------------
### REST API: Get Image Industries
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Endpoint to retrieve available image industries for filtering.
```http
GET /wp-json/kadence-blocks/v1/library/industries
```
--------------------------------
### Using Kadence Components in a Block
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/editor-assets.md
Demonstrates how to import and use Kadence UI components like KadenceColorPicker and KadenceButton within a WordPress block's edit function. Ensure 'kadence-components' is a dependency.
```javascript
import {
KadenceButton,
KadenceColorPicker,
KadenceMediaUpload
} from 'kadence-components';
function MyBlockEdit( { attributes, setAttributes } ) {
return (
setAttributes( { color } ) }
/>
Click me
);
}
```
--------------------------------
### Common Kadence Blocks Settings Structure
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/configuration.md
An example structure of common settings available for Kadence Blocks. This includes options for enabling/disabling blocks and configuring layout defaults.
```php
$settings = [
'enabled_blocks' => [], // Block whitelist
'disabled_blocks' => [], // Block blacklist
'container_width' => '1200px',
'grid_columns' => 12,
'inline_css' => true,
'minify_css' => true,
'lazy_load_images' => true,
];
```
--------------------------------
### Hidden Field Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/forms.md
Configuration for a hidden input field, specifying its type, name, and a default value.
```php
[
'type' => 'hidden',
'name' => 'tracking_id',
'value' => 'abc123',
]
```
--------------------------------
### Check License Configuration and Authorization
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/errors.md
Verify if a license key is configured and if the license is authorized for the current domain.
```php
// Check license is set
if ( empty( get_license_key() ) ) {
// License not configured
}
// Check license is authorized
if ( ! is_authorized() ) {
// License exists but not valid for this domain
}
```
--------------------------------
### Enable Image Download Debugging
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/prebuilt-library.md
Enable debug logging for image downloads by filtering `kadence_blocks_debug_image_download` and returning `true`. This helps in troubleshooting image download issues.
```php
// Enable debug logging
add_filter( 'kadence_blocks_debug_image_download', '__return_true' );
// Check image download logs
error_log( 'Attempted to download: ' . $image_url );
```
--------------------------------
### GET /kadence-blocks/v1/library/categories
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/SUMMARY.txt
Retrieves a list of categories for organizing patterns and blocks within the Kadence Blocks library.
```APIDOC
## GET /kadence-blocks/v1/library/categories
### Description
Retrieves a list of categories for organizing patterns and blocks within the Kadence Blocks library.
### Method
GET
### Endpoint
/kadence-blocks/v1/library/categories
### Response
#### Success Response (200)
- **categories** (array) - An array of category objects, each containing 'id' and 'name'.
#### Response Example
{
"example": "{\"categories\": [{\"id\": 1, \"name\": \"Sections\"}]}"
}
```
--------------------------------
### App::container
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/app-and-container.md
Get the service container instance from the application. This allows for resolving services registered within the container.
```APIDOC
## App::container
### Description
Get the service container instance from the application. This allows for resolving services registered within the container.
### Method
`public function container(): Container`
### Response
#### Success Response (Container)
- Returns the DI container instance for service resolution.
### Example
```php
$app = App::instance();
$container = $app->container();
// Resolve services
$service = $container->get( 'service_id' );
```
```
--------------------------------
### Set CSS Selector and Add Rules
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Define a CSS selector and add multiple rules to it. This example demonstrates setting a background color and padding for a specific selector.
```php
$css->set_selector( '.kb-row-123' );
$css->add_rule( 'background-color', '#fff' );
$css->add_rule( 'padding', '20px' );
```
--------------------------------
### Query Posts Endpoint Example
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/endpoints.md
Use this endpoint to query and filter posts for the Posts block. It requires user login with read access to the requested post types.
```javascript
fetch( '/wp-json/kadence-blocks/v1/query-posts', {
method: 'POST',
credentials: 'same-origin',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify( {
type_array: [ 'post', 'page' ],
order_by: 'date',
order: 'DESC',
per_page: 10,
} ),
} )
.then( res => res.json() )
.then( posts => console.log( posts ) );
```
--------------------------------
### Get Formatted Font Size
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Retrieves a font size formatted with its unit. Useful for consistent style application.
```php
public function get_font_size( $size, $unit )
```
--------------------------------
### Handle Storage NotFoundException
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/errors.md
Catch the NotFoundException when attempting to retrieve a non-existent item from storage.
```php
use KadenceWP\KadenceBlocks\StellarWP\ProphecyMonorepo\Storage\Exceptions\NotFoundException;
try {
$storage->get( 'missing_key' );
} catch ( NotFoundException $e ) {
// Handle missing storage
}
```
--------------------------------
### Get Current Media Query State
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/api-reference/css-generator.md
Retrieves the current media query state. This is typically used internally.
```php
public function get_media_state()
```
--------------------------------
### Safely Resolve Services
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/errors.md
Use the try_resolve function to attempt to get a service, throwing an exception if it's not found.
```php
use function KadenceWP\KadenceBlocks\StellarWP\ProphecyMonorepo\try_resolve;
try {
$service = try_resolve( 'my_service' );
if ( ! $service ) {
throw new Exception( 'Service not found' );
}
$service->process();
} catch ( Exception $e ) {
error_log( 'Processing failed: ' . $e->getMessage() );
}
```
--------------------------------
### Handling Runtime Exception in DI Container
Source: https://github.com/stellarwp/kadence-blocks/blob/master/_autodocs/errors.md
Shows how to catch a RuntimeException when the DI container fails to resolve an undefined service. Logs the error message.
```php
use RuntimeException;
try {
$container->get( 'undefined_service' );
} catch ( RuntimeException $e ) {
error_log( $e->getMessage() );
}
```