Feedback Components: Component (Data Type)?

Feature Requests / Improvements
1

Hello Bricks team, thanks for the new update about the component, it’s really fantastic.

A question, what is the data type of the components in Bricks Builder?

I’m thinking to use the components within the Flexible Content field type from ACF, an example, i have a few “Components” and “Flexible Content ACF”

Components:
Hero
Overview
Banner
Logos

Flexible Content Field:
Hero
Overview
Banner
Logos

Now, on the page editor, let say i’m adding a Hero row of “Flexible Content ACF”, when i fill the fields and save the page, the front end will showing the Hero Section (from Hero Component of course)

Basically, we can add all of the Components on the page via bricks builder and set the condition each of them based on the fields from each Flexible Content ACF, but what if we have 20 pages and need add all of the components on every single page?
then what happen if we create a new components? we need to add them manually on each pages via bricks builder

So, again, what is the data type of the components in Bricks Builder?
In my opinion, there should be a way to get all of component instances programatically, each of component instances will have an identifier (key?)
in this moment, we can apply it on all pages based on the Flexible Content ACF

in my imagination, a components looks like this

let acf = [
    "Hero",
    "Overview", 
    "Banner", 
    "Logos"
];

let components = [
  {
    name: "Hero",
    key: "hero",
    type: "section",
    data: {
      title: "Welcome to Our Website",
      subtitle: "Discover our amazing services",
      backgroundImage: "hero-bg.jpg",
      buttonText: "Learn More",
      buttonLink: "/about"
    }
  },
  {
    name: "Overview",
    key: "overview",
    type: "section",
    data: {
      title: "Company Overview",
      description: "We are a leading provider of innovative solutions.",
      stats: [
        { label: "Years in Business", value: 10 },
        { label: "Happy Clients", value: 5000 },
        { label: "Projects Completed", value: 1200 }
      ]
    }
  },
  {
    name: "Banner",
    key: "banner",
    type: "section",
    data: {
      image: "banner.jpg",
      title: "Special Offer!",
      description: "Get 50% off for a limited time.",
      buttonText: "Shop Now",
      buttonLink: "/shop"
    }
  },
  {
    name: "Logos",
    key: "logos",
    type: "section",
    data: {
      title: "Our Partners",
      logos: [
        { name: "Brand A", image: "brand-a-logo.png" },
        { name: "Brand B", image: "brand-b-logo.png" },
        { name: "Brand C", image: "brand-c-logo.png" }
      ]
    }
  }
];

so, we can add a components programmatically

acf.forEach(item => {
  let matchedComponent = components.find(component => component.name === item);
  if (matchedComponent) {
    return matchedComponent;
  }
});

I hope it make sense and understandable,
Thanks

2

CC: @Matej

sorry for the mention, but i need to know what is your suggestions about this idea
thanks.

3

Hey @deyril_support,

sorry for the late response. I checked your message multiple times but was never exactly sure what you wanted to achieve, so I postponed the answer. :slight_smile:

Anyway, can you make another, as simple as possible, example of what you would like to achieve? Because for now, I understand that you would like to programmatically fetch all components. If only that’s the case

  • In frontend, you can see a list of components at bricksData.loadData.components
  • On backend, at the very source, you can fetch them from wp_options database table, with bricks_components as a option name.

Best regards,
Matej

4

@Matej hhmmm, let say i want to render “Banner” component, how can we render it on the pages programatically?
it’s not possible to use bricksData.loadData.components, in this moment, for sure we will use fetch from database table, but how we can render it?