Default Colors Panel to a List instead of Grid in Bricks Builder with a Snippet

Changing the Default Colors Panel to a List instead of Grid in Bricks Builder enhances your design workflow by providing a clearer view of color names right off the bat. This quick tweak is for those who, like me, prefer a more detailed overview of their color options without having to hover over each color swatch to see its name. Unfortunately, Bricks Builder doesn’t offer a built-in setting to make this preference default. Luckily, with a simple code snippet and the use of WP Code Box, we can achieve this customization effortlessly.

Prerequisites

Please make sure you have the following installed and activated:

• Bricks Builder
• WP Code Box (or similar code snippet plugins)

The Advantages of List View for Color Selection

Opting for a list view over a grid in the Default Colors Panel within Bricks Builder comes with several practical advantages that can significantly improve your design workflow. Here are a few key reasons why a list view is handy:

• Enhanced Visibility
  With a list view, each color is accompanied by its name, providing immediate clarity. This eliminates the need to hover over each color to see its name, speeding up the selection process.
• Improved Accessibility
  For designers who rely on specific color names and codes as part of their design strategy, a list view ensures that all necessary information is visible at a glance, making it easier to maintain consistency across projects.
• Streamlined Workflow
  By defaulting to a list view, you reduce the number of clicks needed to find the right color, streamlining your workflow and saving time.
• Personal Preference
  Catering to individual workflow preferences is crucial for productivity. A list view might align better with how some users mentally organize their work, leading to a more comfortable and efficient design process.
• Error Reduction
  Having color names visible by default can reduce errors in color selection, especially in complex projects with a large palette or similar shades.

Instructions to Default Colors Panel to a List instead of Grid in Bricks Builder

1. Navigate to WP Code Box > Add New Code Snippet. Give it a title for easy identification, such as “Default to Colors List”.
   
2. Copy the PHP code below and paste the copied code into the WP Code Box code editor area:
   

   <?php 
   
   add_action('get_footer', function(){
   
       if (!class_exists('Bricks\Capabilities')) {
               return;
           }
       if( !bricks_is_builder() ) return;
   
       ?>
   <script>
   ;(()=>{
   
       function maybeSetColorsToList(element) {
           const trigger = element.querySelector('ul');
           const isTarget = trigger.classList.contains("color-palette") && trigger.classList.contains("grid");
           if(!isTarget){ return }
   
           /* Is in Grid mode click the switch */
           const mode_switch = element.querySelector('.label-actions > *:last-child');
           mode_switch.click();     
       }
       
       window.addEventListener('load', ()=>{
           const targetElement = document.querySelector('.bricks-panel');
           
           const observer = new MutationObserver((mutationsList, observer) => {
            /*console.log(mutationsList);*/
               for (const mutation of mutationsList) {
                   if (mutation.type === 'childList') {
                       for (const addedNode of mutation.addedNodes) {
                           if (addedNode.classList && addedNode.classList.contains('bricks-control-popup')) {
                               maybeSetColorsToList(addedNode);
                           }
                       }
                   }
               }
           });
   
           if(targetElement){
               observer.observe(targetElement, { attributes: true, childList: true, subtree: true });
           }
           
       })
   })();
   </script>
       <?php
   });

   Source: WPEasy

3. Save and enable the snippet.
   
4. Refresh your Bricks Builder page, and verify that the Default Colors Panel now presents colors in a list format by default.
   

Official Documentation

• Bricks Builder Documentation
• WP Code Box Documentation

Default Colors Panel to a List instead of Grid – Conclusion

With this simple yet effective customization, you can tailor the Bricks Builder interface to better suit your workflow preferences. By changing the Default Colors Panel to a list, you gain immediate visibility of color names, making your design process more efficient and enjoyable. This tweak exemplifies the flexibility of WordPress and its ecosystem, allowing for personalized adjustments even when default options are limited.