post_grid_layout_element_option_{id} used to render options output for each element on layout editor, where {id} should replace with element id, like title, excerpt, and etc
Sample code for excerpt
add_action('post_grid_layout_element_option_excerpt','post_grid_layout_element_option_excerpt');
function post_grid_layout_element_option_excerpt($parameters){
$settings_tabs_field = new settings_tabs_field();
$input_name = isset($parameters['input_name']) ? $parameters['input_name'] : '{input_name}';
$element_data = isset($parameters['element_data']) ? $parameters['element_data'] : array();
$element_index = isset($parameters['index']) ? $parameters['index'] : '';
$char_limit = isset($element_data['char_limit']) ? $element_data['char_limit'] : 0;
$css = isset($element_data['css']) ? $element_data['css'] : '';
$css_hover = isset($element_data['css_hover']) ? $element_data['css_hover'] : '';
?>
<div class="item">
<div class="element-title header ">
<span class="remove" onclick="jQuery(this).parent().parent().remove()"><i class="fas fa-times"></i></span>
<span class="sort"><i class="fas fa-sort"></i></span>
<span class="expand"><?php echo __('Post excerpt','post-grid'); ?></span>
</div>
<div class="element-options options">
<?php
$args = array(
'id' => 'char_limit',
'css_id' => $element_index.'_char_limit',
'parent' => $input_name.'[excerpt]',
'title' => __('Word limit','post-grid'),
'details' => __('Set word limit.','post-grid'),
'type' => 'text',
'value' => $char_limit,
'default' => '',
'placeholder' => '20',
);
$settings_tabs_field->generate_field($args);
$args = array(
'id' => 'css',
'css_id' => $element_index.'_css',
'parent' => $input_name.'[excerpt]',
'title' => __('Custom CSS','post-grid'),
'details' => __('Set csutom CSS.','post-grid'),
'type' => 'textarea',
'value' => $css,
'default' => '',
'placeholder' => '',
);
$settings_tabs_field->generate_field($args);
$args = array(
'id' => 'css_hover',
'css_id' => $element_index.'_css_hover',
'parent' => $input_name.'[excerpt]',
'title' => __('Hover CSS','post-grid'),
'details' => __('Set hover custom CSS.','post-grid'),
'type' => 'textarea',
'value' => $css_hover,
'default' => '',
'placeholder' => '',
);
$settings_tabs_field->generate_field($args);
ob_start();
?>
<textarea readonly type="text" onclick="this.select();">.element_<?php echo $element_index?>{}
.element_<?php echo $element_index?> a{}</textarea>
<?php
$html = ob_get_clean();
$args = array(
'id' => 'use_css',
'title' => __('Use of CSS','post-grid'),
'details' => __('Use following class selector to add custom CSS for this element.','post-grid'),
'type' => 'custom_html',
'html' => $html,
);
$settings_tabs_field->generate_field($args);
?>
</div>
</div>
<?php
}
Screenshot
Also, check
https://pickplugins.com/documentation/post-grid/filter-hooks/post_grid_layout_elements/
