Opens in a new tab
23rd May '22
/
5 comments

How to Exclude Elements from Bricks Editor

Bricks has a handy bricks/builder/elements filter using which the available elements that show up after clicking + (or ⌃/⌘ + ⇧ + E) in the editor can be filtered.

First, we need to get the list of available element names. This can be done by adding the following in child theme’s functions.php or a code snippets manager plugin like WPCodeBox:

/**
 * To show all available Bricks elements on the frontend for admins.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	if ( current_user_can( 'manage_options' ) && ! is_admin() ) {
		print( '<pre>' . print_r( $elements, true ) . '</pre>' );
	}
	return $elements;
} );

Visit any page on the front end (as an admin user) and you should see an array printed like this:

Click here to see the array
Array
(
    [0] => container
    [1] => heading
    [2] => text-basic
    [3] => text
    [4] => button
    [5] => icon
    [6] => image
    [7] => video
    [8] => divider
    [9] => icon-box
    [10] => social-icons
    [11] => list
    [12] => accordion
    [13] => tabs
    [14] => form
    [15] => map
    [16] => alert
    [17] => animated-typing
    [18] => countdown
    [19] => counter
    [20] => pricing-tables
    [21] => progress-bar
    [22] => pie-chart
    [23] => team-members
    [24] => testimonials
    [25] => html
    [26] => code
    [27] => template
    [28] => logo
    [29] => facebook-page
    [30] => image-gallery
    [31] => audio
    [32] => carousel
    [33] => slider
    [34] => svg
    [35] => wordpress
    [36] => posts
    [37] => pagination
    [38] => nav-menu
    [39] => sidebar
    [40] => search
    [41] => shortcode
    [42] => post-title
    [43] => post-excerpt
    [44] => post-meta
    [45] => post-content
    [46] => post-sharing
    [47] => related-posts
    [48] => post-author
    [49] => post-comments
    [50] => post-taxonomy
    [51] => post-navigation
)

Now let’s say you want to exclude a few elements, add this sample code:

/**
 * To exclude the specified elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements_to_exclude = [
		'text-basic',
		'facebook-page'
	];
	return array_diff( $elements, $elements_to_exclude );
} );

Specify the elements you want to exclude in the $elements_to_exclude array.

Alternatively, you could use the following code and comment out the ones you do not want to be included:

/**
 * To exclude the commented elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements = [
                        'section',
                        'block',
			'container',
			'heading',
			'text-basic',
			'text',
			'button',
			'icon',
			'image',
			'video',
			'divider',
			'icon-box',
			'social-icons',
			'list',
			'accordion',
			'tabs',
			'form',
			'map',
			'alert',
			'animated-typing',
			'countdown',
			'counter',
			'pricing-tables',
			'progress-bar',
			'pie-chart',
			'team-members',
			'testimonials',
			'html',
			'code',
			'template',
			'logo',
			'facebook-page',
			'image-gallery',
			'audio',
			'carousel',
			'slider',
			'svg',
			'wordpress',
			'posts',
			'pagination',
			'nav-menu',
			'sidebar',
			'search',
			'shortcode',
			'post-title',
			'post-excerpt',
			'post-meta',
			'post-content',
			'post-sharing',
			'related-posts',
			'post-author',
			'post-comments',
			'post-taxonomy',
			'post-navigation'
	];
	return $elements;
} );
Example
/**
 * To exclude the commented elements from Bricks Builder.
 */
add_filter( 'bricks/builder/elements', function( $elements ) {
	$elements = [
                        'section',
                        'block',
			'container',
			'heading',
			// 'text-basic',
			'text',
			'button',
			'icon',
			'image',
			'video',
			'divider',
			'icon-box',
			'social-icons',
			'list',
			'accordion',
			'tabs',
			'form',
			'map',
			'alert',
			'animated-typing',
			'countdown',
			'counter',
			'pricing-tables',
			'progress-bar',
			'pie-chart',
			'team-members',
			'testimonials',
			'html',
			'code',
			'template',
			'logo',
			// 'facebook-page',
			'image-gallery',
			'audio',
			'carousel',
			'slider',
			'svg',
			'wordpress',
			'posts',
			'pagination',
			'nav-menu',
			'sidebar',
			'search',
			'shortcode',
			'post-title',
			'post-excerpt',
			'post-meta',
			'post-content',
			'post-sharing',
			'related-posts',
			'post-author',
			'post-comments',
			'post-taxonomy',
			'post-navigation'
	];
	return $elements;
} );
Get access to all 633 Bricks code tutorials with BricksLabs Pro

5 comments

  • Keviin Cosmos

    Can i do this for certain post types?

    I've created 5 custom widgets customers will use for single products (instead of ACF flexible content), but i want to hide all others.

    I've tried to use WP codebox to only execute PHP/CSS for product pages, but it does not seems to work. The code does not have any effect, but if i add into chrome (the css) it works.

  • Pavel Janovec

    Hi, hiding elements is great, but could you make a tutorial on hiding the "Styles" tab for regular editors so that they can edit only the basic content of the element?

  • Amanda Lucas

    Sridhar, this is throwing an error on latest version of bricks saying 'PHP class doesnt exist: for section and container'

    • A
      David Browne

      Hi Amanda,

      I updated the tutorial to include 'section' and 'block' elements that didn't exist when this was written.

Leave your comment

 

Related Tutorials..

Filtering Breadcrumbs in Bricks

Filtering Breadcrumbs in Bricks

Using the bricks/breadcrumbs/items filter to modify Bricks' breadcrumbs’ element programmatically.
Categories:
Modifying ACF Field Value Before It Is Output

Modifying ACF Field Value Before It Is Output

Consider the scenario where a Page has a "Page Fields" field group created with ACF Pro like this: Field name: scientific_coordinators (type Repeater)|__ Sub field…
Categories:
Pro
Restrict Content Pro in Bricks

Restrict Content Pro in Bricks

This Pro tutorial provides the steps to restrict Pages and individual elements like Sections in Bricks depending on whether the current user has any active…
Pro
How to Inject a Different Type of Post in Bricks Query Loop

How to Inject a Different Type of Post in Bricks Query Loop

Updated on 26 Aug 2024 A user asks: Hello, I'd like to inject a CPT post card inside of a Bricks query loop of a different CPT…
bricks/posts/merge_query Explained

bricks/posts/merge_query Explained

This short article provides details on Bricks' bricks/posts/merge_query filter. On pages rendered by an archive or search template, secondary queries like the ones used for…
Categories:
Tags:
Pro
Filtering a Bricks Terms query on Term archive pages

Filtering a Bricks Terms query on Term archive pages

On product category archives, how to show product type names but only those that the current product category has.
Pro
How to programmatically add a class to an element in Bricks

How to programmatically add a class to an element in Bricks

This Pro tutorial shows how a dynamic class can be added to a query loop element in Bricks programmatically. Let's take an example where posts…