Use Bricks Colours in ACF for Admin

How To
1

Having set up some radio buttons using ACF that reference values of the theme colours we set, I then set about working out how to reference these colours in the page editor for the ACF fields. Hook used was post.php, so it’s available for all editing pages.

Code used was set in the functions file:

function add_acf_color_swatch_admin_css() {
  echo '<style>
        /* Hide the default radio buttons */
       /* .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 is the class for the section I wanted this to work on, rather than all radio buttons in the editor */
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list input[type="radio"] {
          display: none;
      }
      /* Keep the label and color swatch visible */
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label {
          cursor: pointer;
      }
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[type="radio"]):before {
          border: 3px solid #e1e1e1;
      }          
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list li{
        line-height:33px;
      }
      /* Highlight the selected option */
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[type="radio"]:checked):before {
          border-color: #000; 
      }          
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list li label.selected{
        font-weight: bold;
      }    
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label {
          position: relative;
          padding-left: 30px;
      }

      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:before {
          content: "";
          width: 20px;
          height: 20px;
          border-radius: 50%; 
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          border: 1px solid #ccc;
      }

      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-acujpy)"]):before {
        background-color: var(--bricks-color-acujpy);
      }
    .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-fzujyl)"]):before {
          background-color: var(--bricks-color-fzujyl);
      }
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-jmnqbc)"]):before {
          background-color: var(--bricks-color-jmnqbc);
      }
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-addcbq)"]):before {
          background-color: var(--bricks-color-addcbq);
      }
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-rkmfov)"]):before {
          background-color: var(--bricks-color-rkmfov);
      }
      .acf-field.acf-field-radio.acf-field-66d5d0016b1d6 .acf-radio-list label:has(input[value="var(--bricks-color-pwykft)"]):before {
          background-color: var(--bricks-color-pwykft);
      }
  </style>';
}
add_action('acf/input/admin_head', 'add_acf_color_swatch_admin_css');

function my_admin_enqueue($hook_suffix) {
  // Check if the current page is the post.php (edit post or edit custom post type)
  if ($hook_suffix == 'post.php') {
      // Load the Bricks Builder frontend stylesheet into the admin area
      wp_enqueue_style('bricks-color-palettes', content_url('/uploads/bricks/css/color-palettes.min.css'));
    }
}
add_action('admin_enqueue_scripts', 'my_admin_enqueue');

Just to add, this how it looks in the admin area with my theme colours set:
Screenshot 2024-09-05 at 09.59.04

1 Like