Add featured image to Bricks Builder page settings

featured-image.php

<?php

/********************************************************
 * Custom implementation of Featured Image in the builder
 ********************************************************/

// Add the featured image selector to the page settings
add_filter('builder/settings/page/controls_data', function ($data) {
	$data['controlGroups']['featured-image-options'] = array(
		'title' => 'Featured image',
	);

	$data['controls']['featured_image'] = [
		'group'       => 'featured-image-options',
		'type'        => 'image',
		'label'       => esc_html__('Featured Image', 'bricks'),
		'description' => esc_html__('Upload a featured image for this page.', 'bricks'),
		'hasDynamicData' => false,
	];

	return $data;
});

/**
 * Check if current request is from Gutenberg
 * @return bool 
 */
function __is_gutenberg_save()
{
	return defined('REST_REQUEST') && REST_REQUEST;
}

/**
 * Get Post Types using Bricks
 * @return array 
 */
function __bricks_post_types()
{
	// Get Bricks settings
	$settings = get_option('bricks_global_settings');

	return isset($settings['postTypes']) ? $settings['postTypes'] : [];
}

/**
 * Synchronize featured image from Bricks to (Gutenberg and Classic) 
 * @return void 
 */
function __sync_featured_image_bricks_to_post()
{
	$post = get_post($_POST['postId']);

	if (!$post || !isset($_POST['pageSettings']))
		return;

	$meta = json_decode(stripslashes($_POST['pageSettings']), true);

	if (!isset($meta['featured_image'])) {
		delete_post_thumbnail($post);
	} else {
		set_post_thumbnail($post, $meta['featured_image']['id']);
	}
}

/**
 * Synchronize featured image from post (Gutenberg and Classic) to Bricks
 * @param mixed $post 
 * @return void 
 */
function __sync_featured_image_post_to_bricks($post)
{
	// The post ID
	$post_id = $post->ID;

	// Exit if current post isn't using Bricks
	if (get_post_meta($post_id, '_bricks_editor_mode', true) != 'bricks')
		return;

	// The thumbnail ID
	$thumbnail_id = get_post_meta($post_id, '_thumbnail_id', true);

	// The post meta
	$meta = get_post_meta($post_id, '_bricks_page_settings', true) ? get_post_meta($post_id, '_bricks_page_settings', true) : [];

	if ($thumbnail_id) {

		$thumbnail_url = wp_get_attachment_url($thumbnail_id);

		$meta['featured_image'] = [
			'id' => $thumbnail_id,
			'filename' => basename($thumbnail_url),
			'size' => 'full', // You can adjust this based on the size needed
			'full' => $thumbnail_url,
			'url' => $thumbnail_url
		];
	} else {
		unset($meta['featured_image']);
	}


	// Save the '_bricks_page_settings' meta
	if (empty($meta)) {
		delete_post_meta($post_id, '_bricks_page_settings');
	} else {
		update_post_meta($post_id, '_bricks_page_settings', $meta);
	}
};

// Handle Save post (Bricks)
add_action('wp_ajax_bricks_save_post', '__sync_featured_image_bricks_to_post');

// Handle Save post (Classic Editor)
add_action('save_post', function ($post_id, $post) {
	if (!__is_gutenberg_save() && in_array($post->post_type, __bricks_post_types())) {
		__sync_featured_image_post_to_bricks($post);
	}
}, 10, 2);

// Handle Save post (Gutenberg)
foreach (__bricks_post_types() as $post_type) {
	add_action('rest_after_insert_' . $post_type, '__sync_featured_image_post_to_bricks', 10, 3);
}


/**
 * Add custom CSS to hide the URL and Size fields in the page settings
 */
add_action('wp_head', function () {
	if (is_user_logged_in())
		echo '<style id="bricks-editor-featured-image-css">[data-control-group="featured-image-options"] { .external-url, .image-sizes { display: none !important; } }</style>';
});