BricksForge Components

On the left is the usual template and on the right is the component idea

I had this idea for a while and I think BrickForge would be a great place for it. So, you know how you can include a Brick section into a Bricks page. I sometimes use this to reuse a certain section across some templates/pages. The new thing and the reason why I’d call this a component is instead of the regular Bricks template widget we would use a BricksForge component widget. Basically, the same idea, it inserts the template you pick from a list but, it also exposes some fields in the template as sidebar fields. Hence, I’d imagine it to be a regular section template with some magic enabler dropped into it … that in turn would be read by the BrickForge component widget. The enabler is simple. It allows you to pick what properties get exposed to the component side panel. Pick anything like the content or the color or what ever you want to have exposed. The edited information is stored in the components widget and overwritten while rendering the template.

This might be to deep into implementation details already and there might be a better way. The goal to keep in mind and I am suggesting here would be to reuse sections as components, but certain aspects can be tweaked or edited.

PS: I am aware that this very similar to an widget creator. The difference would be that one doesn’t use a code pen approach (CSS/JS/HTML), but a visual built template as the view. I even think the component builder and the widget builder (lite) should coexist in BricksForge if they are ever implemented.


Hi Max!

As always: great suggestion. I have also played with the idea before. What has kept me away from such implementations so far is the missing interface to the Vue (builder) side of Bricks. An implementation would be only possible with 100 workarounds and hacky ways. With every Bricks update there would be the danger that the functionality no longer works.

Currently I tend to wait for the area outside of PHP to be made more appealing to developers at some point. This was mentioned among others here in the Bricks forum: Editor's hook/events/api - Developers - Bricks Community Forum.

Access to the state management and events within the Vue instance would really simplify such implementations.

But I know you as very good developer. If you have clean ways in mind to implement such a functionality without the above things I mentioned, I’m open to advice :slight_smile:

Without opening the entire Vue stack, a lite version of this could possibly be based on the existing template element. Since, version 1.5.7 Bricks switched to rendering the templates using it’s own short code. Hence, it is taking execution context into account and this might be an opertunity for components. Perhaps one could have a custom component short code that accepts custom parameters or injects those into the render context using a function like below. I know this is aiming a bit below feeding the component’s values directly, and would only feed settings that accept dynamic data.

Some dummy code to illustrate how maybe we one could inject temporary values into the render context of a page

// Set up an array to store the metadata values
$metadata_lookup = array();

// Add a filter to modify the metadata returned by get_post_meta()
add_filter( 'get_post_metadata', 'my_filter_get_metadata', 10, 4 );

function my_filter_get_metadata( $metadata, $object_id, $meta_key, $single ) {
	global $metadata_lookup;

	// Check if there is a value in the array for the given meta key and object ID
	if ( isset( $metadata_lookup[ $object_id ][ $meta_key ] ) ) {
		// If there is a value in the array, add it to the metadata
		$metadata[ $meta_key ] = $metadata_lookup[ $object_id ][ $meta_key ];

	// Return the modified metadata
	return $metadata;

// Set a value in the metadata array
function set_metadata_value( $object_id, $meta_key, $meta_value ) {
	global $metadata_lookup;

	// Add the value to the array
	$metadata_lookup[ $object_id ][ $meta_key ] = $meta_value;

That could in theory allow using temporary metadata based on a component ID that is only valid for the current requests and not written to the WordPress meta table, and still could be used in dynamic data requests (in theory).

// Set a value for the 'key' meta key on an object with an ID of 123
set_metadata_value( 123, 'key', 'value' );

// Retrieve the metadata for the object with an ID of 123
$metadata = get_post_meta( 123, 'key', true );

// Output the metadata
echo $metadata; // 'value'

Keep in mind that this approach only works for the current request, and the values in the array will be lost when the request ends. It is based on the idea of injecting dynamic data in a template being rendered.