Config

The config.json file defines the global configuration of your Prodyflow template, including styles, SCSS, JS, and dynamic blocks.

Below is an example and explanation of each section.

---

📄 Example config.json

{
  "settings": {
    "style": [
      { "type": "color", "name": "Primary color", "var":"primary" },
      { "type": "color", "name": "Hover color", "var":"hover" },
      { "type": "color", "name": "Seconder color #1", "var":"grey" },
      { "type": "color", "name": "Seconder color #2", "var":"light_grey" },
      { "type": "color", "name": "Seconder color #3", "var":"lighter_grey" },
      { "type": "color", "name": "Background", "var":"background" },
      { "type": "color", "name": "Color", "var":"font_color" },
      { "type": "font",  "name": "Font family", "var":"font_family" }
    ]
  },
  "global_dynamic_blocks": {
    "content_for_infobox": {
      "name": "Infobox"
    }
  },
  "scss": [
    {
      "input": "app.scss",
      "output": "app.css",
      "variables_file": "variables.scss",
      "include_paths": ["vendor", "vendor/swiper", "vanilla-cookieconsent/dist", "basic", "components","layout","pages","parts"]
    },
    {
      "input": "critical.scss",
      "output": "critical.css",
      "include_paths": ["vendor", "vendor/swiper", "vanilla-cookieconsent/dist", "basic", "components","layout","pages","parts","critical"]
    }
  ],
  "js": [
    {
      "input": ["app.js"],
      "output": "app.js"
    }
  ],
  "post_minify_css": true
}

⚙️ Settings

The settings object allows you to define global style and font variables that will be available throughout the template.

• type: The type of variable (color, number, or font)
• name: User-friendly display name
• var: Variable name used in SCSS (variables.scss)

Example:

 {"type": "color", "name": "Primary color", "var":"primary" }

$primary: #023c89 !default;

This defines a primary color variable for your template SCSS.

Gobal Dynamic Blocks

The global_dynamic_blocks section defines reusable content blocks available across all pages. Those blocks can be edited by the block editor, so it is a good fit for sidebars, info-boxes and other blocks that visible in all pages but you want them to be editable by the block editor.

Example:

{
  "content_for_infobox": {
    "name": "Infobox"
  }
}

{{ content_for_infobox | raw }}

This creates a dynamic block called Infobox.

💻 SCSS Compilation

The scss array defines input and output SCSS files, variable files, and include paths.

input: SCSS source file

output: compiled CSS file

variables_file: optional variables file to include

include_paths: folders to resolve @import paths

Example:

{
"input": "app.scss",
"output": "app.css",
"variables_file": "variables.scss",
"include_paths": ["vendor", "components", "layout"]
}

🟢 JS Compilation

The js array defines JavaScript entry files and their output.

Example:

{
"input": ["app.js"],
"output": "app.js"
}

⚡ Post Processing

post_minify_css: true → automatically minifies your CSS after compilation for faster loading.

This file is the central configuration for your template. Adjust it to change theme colors, include/exclude SCSS or JS files, or define new dynamic blocks.