### Element Interaction Schema Example

Source: https://academy.bricksbuilder.io/developer/schema/elements/common/interactions

This JSON structure demonstrates how to define element interactions. It includes examples for starting an animation on click and showing an element when it enters the viewport, with options for running once and setting root margins.

```json
{
  "_interactions": [
    {
      "id": "abc123",
      "trigger": "click",
      "action": "startAnimation",
      "target": "self",
      "animationType": "fadeIn",
      "animationDuration": "500"
    },
    {
      "id": "def456",
      "trigger": "enterView",
      "action": "show",
      "target": "self",
      "rootMargin": "0px 0px -100px 0px",
      "runOnce": true
    }
  ]
}
```

--------------------------------

### Enqueueing Scripts Example

Source: https://academy.bricksbuilder.io/developer/elements/create-your-own-elements

Demonstrates how to enqueue a custom JavaScript file for your element. This script will be loaded on pages where the element is used, improving performance.

```php
<?php
// element-test.php

if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

class Prefix_Element_Test extends \Bricks\Element {
  // Element properties
  public $category     = '';
  public $name         = '';
  public $icon         = '';
  public $css_selector = '';
  public $scripts      = [];
  public $nestable     = false; // true || @since 1.5

  // Methods: Builder-specific
  public function get_label() {}
  public function get_keywords() {}
  public function set_control_groups() {}
  public function set_controls() {}

  // Methods: Frontend-specific
  public function enqueue_scripts() {
    wp_enqueue_script( 'prefix-element-test', get_template_directory_uri() . '/js/custom.js', ['jquery'], '1.0', true );
  }
  public function render() {}
}

```

--------------------------------

### Webhook Headers Example

Source: https://academy.bricksbuilder.io/builder/elements/general/form

Example of custom HTTP headers in JSON format for a webhook, such as for authorization.

```json
{ "Authorization": "Bearer token" }
```

--------------------------------

### Example Array for Query Loop

Source: https://academy.bricksbuilder.io/builder/dynamic-content/query-loop

This is an example array structure that can be used with a query loop in Bricks Builder.

```php
[
  ['name' => 'John', 'age' => 30],
  ['name' => 'Alan', 'age' => 25],
  ['name' => 'Pony', 'age' => 66]
]
```

--------------------------------

### Dimensions Control Example

Source: https://academy.bricksbuilder.io/developer/controls/dimensions-control

Example of how to implement the dimensions control in a custom Bricks element. This control is used for CSS properties like padding and supports custom directions.

```php
class Prefix_Element_Dimensions extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleDimensions'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Title padding', 'bricks' ),
      'type' => 'dimensions',
      'css' => [
        [
          'property' => 'padding',
          'selector' => '.prefix-element-dimensions-title',
        ]
      ],
      'default' => [
        'top' => '30px',
        'right' => 0,
        'bottom' => '10em',
        'left' => 0,
      ],
      // 'unitless' => false, // false by default
      // Custom directions
      // 'directions' => [
        // 'offsetX' => esc_html__( 'Offset X', 'bricks' ),
        // 'offsetY' => esc_html__( 'Offset Y', 'bricks' ),
        // 'spread'  => esc_html__( 'Spread', 'bricks' ),
        // 'blur'    => esc_html__( 'Offset Y', 'bricks' ),
      // ],
    ];
  }

  // Render element HTML
  public function render() {
    echo '<h5 class="prefix-element-dimensions-title">' . get_bloginfo( 'name' ) . '</h5>';
  }
}
```

--------------------------------

### Bricks Page Settings Structure

Source: https://academy.bricksbuilder.io/developer/schema

Example of per-page configuration settings in Bricks, controlling aspects like header visibility and scroll behavior.

```json
{
  "headerDisabled": true,
  "scrollSnapType": "y proximity"
}
```

--------------------------------

### Handle Bricks AJAX Start Event

Source: https://academy.bricksbuilder.io/builder/features/interactions

Execute custom JavaScript when a Bricks AJAX request starts. This snippet shows how to get the query ID and perform actions.

```javascript
document.addEventListener('bricks/ajax/start', (event) => {
  // Get the queryId from the event
  const queryId = event.detail.queryId || false

  if (!queryId) {
    return
  }

  // Do your magic here
})
```

--------------------------------

### Page Structure Example

Source: https://academy.bricksbuilder.io/getting-started/interface-tour

Illustrates the hierarchical structure of elements on a page, showing how sections contain containers, which in turn hold headings, text, and buttons.

```text
Section
  └─ Container
      ├─ Heading
      ├─ Text
      └─ Button
```

--------------------------------

### Example HTML with Custom ARIA Attributes

Source: https://academy.bricksbuilder.io/builder/features/custom-attributes

Demonstrates how custom ARIA role and label attributes are applied to a container element for accessibility purposes.

```html
<div id="bricks-element-sfglik" class="bricks-element-sfglik bricks-container" role="img" aria-label="Description of the overall image">
... Container elements ...
</div>
```

--------------------------------

### Start Animation on Click

Source: https://academy.bricksbuilder.io/builder/features/interactions

This interaction applies a 'jello' animation to an element when it is clicked.

```N/A
Action: Start animation
Animation: jello
Trigger: Click
```

--------------------------------

### Listen for Bricks AJAX Start Event

Source: https://academy.bricksbuilder.io/developer/guides/custom-javascript-events-in-bricks

Use this event to execute custom logic before a Bricks AJAX call begins. It provides the queryId for the specific AJAX request.

```javascript
document.addEventListener('bricks/ajax/start', (event) => {
  // Get the queryId from the event
  const queryId = event.detail.queryId || false;

  if (!queryId) {
    return;
  }

  // Your custom logic here
  // For example, initiate a loader or update UI to indicate AJAX request start
});
```

--------------------------------

### Popup Animation Handling

Source: https://academy.bricksbuilder.io/builder/features/interactions

For popups, using an 'In' or 'Out' animation in the 'Start animation' action automatically handles opening or closing the popup after the animation ends.

```N/A
Action: Start animation
Animation: *In or *Out animation
(Automatically opens/closes popup)
```

--------------------------------

### Element Display Conditions Schema Example

Source: https://academy.bricksbuilder.io/developer/schema/elements/common/conditions

Demonstrates the OR-of-AND data structure for element display conditions. The element renders if any OR group is true, and an OR group is true when all its AND items are true.

```json
{
  "_conditions": [
    [
      { "id": "abc123", "key": "user_logged_in", "compare": "==", "value": true },
      { "id": "def456", "key": "user_role", "compare": "==", "value": "administrator" }
    ],
    [
      { "id": "ghi789", "key": "dynamic_data", "compare": "contains", "value": "sale", "dynamic_data": "{post_title}" }
    ]
  ]
}
```

--------------------------------

### Solution: Bricks Cascade Layer Structure

Source: https://academy.bricksbuilder.io/builder/styling/cascade-layer

Demonstrates the structure of Bricks' cascade layers, showing how default styles are placed within the `bricks` layer, making them easier to override.

```css
@layer bricks.reset;

@layer bricks {
    [class*="brxe-"] {
        max-width: 100%;
    }
    /* Other default Bricks styles */
}
```

--------------------------------

### Modify Query Result Start Index

Source: https://academy.bricksbuilder.io/developer/hooks/filters/bricks-query-result_start

Use this filter to adjust the starting index of query results. It's particularly useful for implementing custom offsets or pagination. The example shows how to add 1 to the start index for a query with a specific ID.

```php
add_filter( 'bricks/query/result_start', function( $start, $query ) {
    // Example: Offset results by 1 for a specific query ID
    if ( $query->id === 'my_offset_query' ) {
        return $start + 1;
    }

    return $start;
}, 10, 2 );
```

--------------------------------

### Number Control Example

Source: https://academy.bricksbuilder.io/developer/controls/number-control

Demonstrates how to define and use the number control within a custom Bricks element. It shows setting basic properties like label, type, min, step, and default values, as well as how to render the input value.

```php
class Prefix_Element_Number extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleNumber'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Number', 'bricks' ),
      'type' => 'number',
      'min' => 0,
      'step' => '0.1', // Default: 1
      'inline' => true,
      'default' => 123,
    ];

    $this->controls['examplePadding'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Padding in px', 'bricks' ),
      'type' => 'number',
      'unit' => 'px',
      'inline' => true,
      'css' => [
        [
          'property' => 'padding',
        ],
      ],
      'default' => 33,
    ];
  }

  // Render element HTML
  public function render() {
    if ( isset( $this->settings['exampleNumber'] ) ) {
      echo esc_html__( 'Number: ', 'bricks' ) . $this->settings['exampleNumber'];
    } else {
      esc_html_e( 'No number provided.', 'bricks' );
    }
  }
}
```

--------------------------------

### Icon Control Setup and Rendering

Source: https://academy.bricksbuilder.io/developer/controls/icon-control

This PHP snippet demonstrates how to define an icon control for a custom element in Bricks Builder and how to render the selected icon. It includes setting the default icon library and class, and using the `Helpers::render_control_icon` function.

```php
class Prefix_Element_Icon extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleIcon'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Icon', 'bricks' ),
      'type' => 'icon',
      'default' => [
        'library' => 'themify', // fontawesome/ionicons/themify
        'icon' => 'ti-star',    // Example: Themify icon class
      ],
      'css' => [
        [
          'selector' => '.icon-svg', // Use to target SVG file
        ],
      ],
    ];
  }

  // Render element HTML
  public function render() {
    // Set icon 'class' attribute
    if ( isset( $this->settings['exampleIcon'] ) ) {
      Helpers::render_control_icon( $settings['exampleIcon'], ['test-class', 'test-class-2'] );
    }
  }
}
```

--------------------------------

### Allow Function Execution Based on Custom Logic

Source: https://academy.bricksbuilder.io/developer/hooks/filters/filter-bricks-code-echo_function_names

Implement custom logic to determine if a function should be allowed. This example permits functions only if their name starts with 'custom_'. Return true to allow, false to deny.

```php
add_filter('bricks/code/echo_function_names', function($function_name) {
  // Only allow functions that start with "custom_"
  return strpos($function_name, 'custom_') === 0;
});
```

--------------------------------

### Checkbox Control Example

Source: https://academy.bricksbuilder.io/developer/controls/checkbox-control

Demonstrates how to implement a checkbox control in a custom Bricks element. This control can be used to conditionally show or hide other content settings based on its checked state.

```php
class Prefix_Element_Checkbox extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleCheckbox'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Show site title', 'bricks' ),
      'type' => 'checkbox',
      'inline' => true,
      'small' => true,
      'default' => true, // Default: false
    ];
  }

  // Render element HTML
  public function render() {
    // Show site title if setting checkbox 'exampleCheckbox' is checked
    if ( isset( $this->settings['exampleCheckbox'] ) ) {
      echo get_bloginfo( 'name' );
    }
  }
}
```

--------------------------------

### Customize Breadcrumbs Home Label

Source: https://academy.bricksbuilder.io/developer/hooks/filters/bricks-breadcrumbs-home_label

Use this filter to change the default "Home" label text in the Breadcrumbs element. The provided example replaces "Home" with "Start".

```php
add_filter( 'bricks/breadcrumbs/home_label', function( $home_label ) {
    return 'Start';
} );
```

--------------------------------

### Background Control with CSS Mapping and Video Support

Source: https://academy.bricksbuilder.io/developer/controls/background-control

This PHP snippet demonstrates how to implement the Bricks background control in a custom element. It includes CSS mapping for the background property and shows how to enable background video functionality by including the 'bricksBackgroundVideoInit' script and using the 'get_element_background_video_wrapper' method.

```php
class Prefix_Element_Background extends \Bricks\Element {
  // Required for background video
  public $scripts = ['bricksBackgroundVideoInit'];

  // Set builder controls
  public function set_controls() {
    $this->controls['exampleBackground'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Background', 'bricks' ),
      'type' => 'background',
      'css' => [
        [
          'property' => 'background',
          'selector' => '.prefix-background-wrapper',
        ],
      ],
      'exclude' => [
        // 'color',
        // 'image',
        // 'parallax',
        // 'attachment',
        // 'position',
        // 'positionX',
        // 'positionY',
        // 'repeat',
        // 'size',
        // 'custom',
        // 'videoUrl',
        // 'videoScale',
      ],
      'inline' => true,
      'small' => true,
      'default' => [
        'color' => [
          'rgb' => 'rgba(255, 255, 255, .5)',
          'hex' => '#ffffff',
        ],
      ],
    ];
  }

  // Render element HTML
  public function render() {
    echo '<div class="prefix-background-wrapper">';

    // Background video
    echo BricksFrontend::get_element_background_video_wrapper(
      ['settings' => $settings],
      'exampleBackground' // Setting key
    );

    echo get_bloginfo( 'name' );

    echo '</div>';
  }
}
```

--------------------------------

### Positioning Grid Item by Line Number

Source: https://academy.bricksbuilder.io/builder/styling/css-grid-layout

Place a grid item by specifying its starting and ending grid line numbers for both columns and rows. This example positions an item to span two columns and two rows.

```css
grid-column: 2 / 4;
grid-row: 1 / 3;
```

--------------------------------

### Basic Custom Action Setup

Source: https://academy.bricksbuilder.io/builder/elements/general/form

This PHP snippet demonstrates how to hook into the 'bricks/form/custom_action' filter to execute custom logic after a form submission. It shows how to access form data and set a result message.

```php
<?php
function my_form_custom_action( $form ) {
  // $fields = $form->get_fields();
  // $formId = $fields['formId'];
  // $postId = $fields['postId'];
  // $settings = $form->get_settings();
  // $files = $form->get_uploaded_files();

  // Perform some logic here...

  // Set result in case it fails
  $form->set_result([
    'action' => 'my_custom_action',
    'type'    => 'success', // or 'error' or 'info'
    'message' => esc_html__('Oh my custom action failed', 'bricks'),
  ]);
}
add_action( 'bricks/form/custom_action', 'my_form_custom_action', 10, 1 );
```

--------------------------------

### Inherited CSS Control: Parallax Start Point

Source: https://academy.bricksbuilder.io/developer/schema/elements/woocommerce-notice

Defines the starting point for parallax effects based on scroll visibility.

```json
{
  "key": "_motionStartVisiblePercent",
  "type": "number",
  "label": "Parallax start point"
}
```

--------------------------------

### PHP Repeater Control Setup and Rendering

Source: https://academy.bricksbuilder.io/developer/controls/repeater-control

This PHP code defines a custom Bricks element with a Repeater control. It shows how to configure the repeater's fields, set default values, and then render the content of each repeater item.

```php
class Prefix_Element_Posts extends \Bricks\Element {
  // Set builder controls
  public function set_controls() {
    $this->controls['exampleRepeater'] = [
      'tab' => 'content',
      'label' => esc_html__( 'Repeater', 'bricks' ),
      'type' => 'repeater',
      'titleProperty' => 'title', // Default 'title'
      'default' => [
        [
          'title' => 'Design',
          'description' => 'Here goes the description for repeater item.',
        ],
        [
          'title' => 'Code',
          'description' => 'Here goes the description for repeater item.',
        ],
        [
          'title' => 'Launch',
          'description' => 'Here goes the description for repeater item.',
        ],
      ],
      'placeholder' => esc_html__( 'Title placeholder', 'bricks' ),
      'fields' => [
        'title' => [
          'label' => esc_html__( 'Title', 'bricks' ),
          'type' => 'text',
        ],
        'description' => [
          'label' => esc_html__( 'Description', 'bricks' ),
          'type' => 'textarea',
        ],
      ],
    ];
  }

  // Render element HTML
  public function render() {
    $items = $this->settings['exampleRepeater'];

    if ( count( $items ) ) {
      foreach ( $items as $item ) {
        echo '<h4>' . $item['title'] . '</h4>';
        echo '<p>' . $item['description'] . '</p>';
      }
    } else {
      esc_html_e( 'No items defined.', 'bricks' );
    }
  }
}
```

--------------------------------

### Webhook Payload Example

Source: https://academy.bricksbuilder.io/builder/elements/general/form

Example of a custom JSON payload for a webhook, using dynamic field tags to include form data.

```php
{ "name": "{{43f295}}", "email": "{{a5c626}}" }
```

--------------------------------

### Bricks Template Settings Structure

Source: https://academy.bricksbuilder.io/developer/schema

Illustrates the structure for template-specific settings in Bricks, including template conditions for applying templates.

```json
{
  "templateConditions": [
    { "id": "iwjjdg", "main": "any" }
  ]
}
```

--------------------------------

### Fallback Text Example

Source: https://academy.bricksbuilder.io/builder/dynamic-content/dynamic-data

Provides fallback text if the dynamic data tag returns no data. Useful for ensuring content is always displayed.

```html
{acf_text_field @fallback:'This is the fallback text!'}
```

--------------------------------

### PHP: Registering a callback for bricks/load_elements/before

Source: https://academy.bricksbuilder.io/developer/hooks/actions/bricks-load_elements-before

Use this hook to execute custom code before Bricks loads its element classes. This is ideal for preparing integration states or initializing necessary data.

```php
add_action( 'bricks/load_elements/before', function() {
    // Prepare state before Bricks loads element classes.
} );
```

--------------------------------

### Passing Arguments to Custom JavaScript Functions

Source: https://academy.bricksbuilder.io/builder/features/interactions

Demonstrates how to pass arguments, including interaction-specific parameters like source and target elements, to custom JavaScript functions using the '%brx%' placeholder.

```javascript
// Play or pause a video element
// Click interaction that runs this custom JavaScript function
function playOrPauseVideo( brxParam, postId ) {
  const target = brxParam?.target || false
  // You can access targets (array) and the source element too
  // const targets = brxParam?.targets || false
  // const source = brxParam?.source || false

  if ( target ) {
    // Find the first video tag from my target node
    const video = target.querySelector('video')
    if ( video && video.play && video.pause ) {
	  // Pause or Play
      if ( !video.paused ){
        video.pause()
      } else {
        video.play()
      }
    }
  }
}
```

--------------------------------

### Modify Element Settings with bricks/element/settings

Source: https://academy.bricksbuilder.io/developer/hooks/filters/filter-bricks-element-settings

Use this filter to alter element settings before rendering. Example shows adding text to headings for logged-in users.

```php
add_filter( 'bricks/element/settings', function( $settings, $element ) {
    // Add "[online]" text to all the headings elements if the visitor is logged in
    if ( $element->name === 'heading' && is_user_logged_in() ) {
        $settings['text'] .= ' [online]';
    }

    return $settings;
}, 10, 2 );
```

--------------------------------

### Increase Webhook Timeout

Source: https://academy.bricksbuilder.io/developer/hooks/filters/bricks-webhook-timeout

Use this filter to increase the webhook request timeout duration. The default is 15 seconds. This example sets it to 30 seconds.

```php
add_filter( 'bricks/webhook/timeout', function( $timeout ) {
    // Increase timeout to 30 seconds
    return 30;
} );
```

--------------------------------

### Product Gallery Controls - Image Sizes

Source: https://academy.bricksbuilder.io/developer/schema/elements/product-gallery

Controls for setting the image sizes for the main product image, thumbnails, and lightbox.

```json
{
  "productImageSize": "select",
  "thumbnailImageSize": "select",
  "lightboxImageSize": "select"
}
```

--------------------------------

### Remove a Template Tag

Source: https://academy.bricksbuilder.io/developer/hooks/filters/bricks-get_template_tags

Use this filter to remove specific template tags from the Bricks template manager. This example demonstrates how to remove the 'dark' tag.

```php
add_filter( 'bricks/get_template_tags', function( $tags ) {
    // Example: Remove the 'dark' tag from the list
    if ( isset( $tags['dark'] ) ) {
        unset( $tags['dark'] );
    }

    return $tags;
} );
```

--------------------------------

### Create Toggle Button with Icons

Source: https://academy.bricksbuilder.io/builder/features/interactions

This example demonstrates creating a toggle button using two icons and class manipulation. It involves adding and removing a class '.is-open' to control the visibility of different icons.

```css
%root% .toggle-close-icon {
  display: none;
}

%root%.is-open .toggle-open-icon {
  display: none;
}

%root%.is-open .toggle-close-icon {
  display: block;
}
```

--------------------------------

### Modify Current Page Type

Source: https://academy.bricksbuilder.io/developer/hooks/filters/bricks-builder-current_page_type

Use this filter to change the detected page type. For example, you can treat a custom query endpoint as an archive page.

```php
add_filter( 'bricks/builder/current_page_type', function( $page_type ) {
    // Example: Treat a custom endpoint as an archive
    if ( get_query_var( 'my_custom_archive' ) ) {
        return 'archive';
    }

    return $page_type;
} );
```

--------------------------------

### PHP - Execute custom logic before popup content rendering

Source: https://academy.bricksbuilder.io/developer/hooks/actions/bricks-render_popup_content-start

Use this action to hook into the start of the popup content rendering process. Access and modify request data, or implement custom logic like language switching for multilingual sites.

```php
add_action( 'bricks/render_popup_content/start', function( $request_data ) {
    // Access request data
    // $post_id = $request_data['postId'] ?? 0;
    
    // Example: Switch language for multilingual plugins (Polylang/WPML integration uses this)
    // if ( isset( $request_data['lang'] ) ) {
    //     // Switch language logic
    // }
} );
```

--------------------------------

### Fallback Image Example

Source: https://academy.bricksbuilder.io/builder/dynamic-content/dynamic-data

Specifies a fallback image using either an attachment ID or a URL when the primary image dynamic data tag is unavailable.

```html
{acf_image @fallback-image:554}
```

```html
{acf_image @fallback-image:'https://example.com/placeholder.png'}
```

--------------------------------

### Basic bricks/element/render Filter Setup

Source: https://academy.bricksbuilder.io/developer/hooks/filters/filter-bricks-element-render

This is the basic structure for the `bricks/element/render` filter. You can add your conditional logic within this function. The filter expects a boolean return value: `true` to render, `false` to prevent rendering.

```php
add_filter( 'bricks/element/render', function( $render, $element ) {
  // Conditional display logic goes here:
  // $render = true to render the element
  // $render = false to skip the element render

  return $render;
}, 10, 2 );
```

--------------------------------

### Order Posts by Multiple Fields

Source: https://academy.bricksbuilder.io/developer/hooks/filters/filter-bricks-posts-query_vars

Order posts by two different fields, ascending for date and descending for time. This example targets a specific element ID.

```php
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id, $element_name ) {

    // Only target 3b03dd element_id
    if( $element_id !== '3b03dd') return $query_vars;

    // Set meta_query
    $query_vars['meta_query'] = [
        'relation' => 'AND',
        'performance_start_date' => array(
            'key' => 'performance_start_date',
            'compare' => 'EXISTS',
        ),
        'performance_start_time' => array(
            'key' => 'performance_start_time',
            'compare' => 'EXISTS',
        ),
    ];

    // Set orderby
    $query_vars['orderby'] = [
        'performance_start_date' => 'ASC',
        'performance_start_time' => 'DESC'
    ];

    return $query_vars;
}, 10, 4 );
```

--------------------------------

### Server-Side Form Validation

Source: https://academy.bricksbuilder.io/builder/elements/general/form

Implements custom server-side validation for form submissions using the `bricks/form/validate` filter. This example checks if an email address exists in the system.

```php
add_filter( 'bricks/form/validate', function( $errors, $form ) {
  $form_settings = $form->get_settings();
  $form_fields   = $form->get_fields();
  $form_id       = $form_fields['formId'];

  // Skip validation: Form ID is not 'kfbqso'
  if ( $form_id !== 'kfbqso' ) {
    // Early return the $errors array if it's not target form
    return $errors;
  }

  // Get submitted field value of form field ID '7e30aa'
  $email_address = $form->get_field_value( '7e30aa' );

  // Error: Email from registered user (show error message, and don't send email)
  if ( ! email_exists( $email_address ) ) {
    // Add error message to the $errors message array
    $errors[] = esc_html__( 'This email address is not in our system, sorry.', 'bricks' );
  }

  // Make sure to always return the $errors array
  return $errors;
}, 10, 2 );.
```

--------------------------------

### Customize Comment Timestamp

Source: https://academy.bricksbuilder.io/developer/hooks/filters/filter-bricks-comments-timestamp

Use the 'bricks/comments/timestamp' filter to change the comment timestamp format. This example reverts to the default WordPress comment date and time format.

```php
add_filter( 'bricks/comments/timestamp', function( $timestamp, $comment ) {
  // Return the WordPress default comment timestamp
  return sprintf( __( '%1$s at %2$s' ),
    get_comment_date( '', $comment ),
    get_comment_time()
  );
}, 10, 2 );
```