logo

Attributes - Conditional Logic

Fields can be shown depending on conditions.

Operators

There are 8 different operators which can be used:

  • == - values are equal
  • != - values are not equal
  • includes - value is included in reference value
  • !includes - value is not included in reference value
  • empty - value is empty
  • !empty - value is not empty
  • < - value is smaller than reference value
  • > - value is bigger than reference value
  • <= - value is smaller than reference value or equal
  • >= - value is bigger than reference value or equal

Global

By default, Blockstudio comes with 4 global conditions: post type, post ID, user role and user ID.

block.json 

            {
      "$schema": "https://app.blockstudio.dev/schema",
      "name": "blockstudio/native",
      "title": "Native Block",
      "category": "text",
      "icon": "star-filled",
      "description": "Native Blockstudio block.",
      "supports": {
        "align": true
      },
      "blockstudio": {
        "attributes": [
          {
            "id": "message",
            "type": "text",
            "label": "My message",
            "conditions": [
              [
                {
                  "type": "postId",
                  "operator": "==",
                  "value": "1386"
                },
                {
                  "type": "postType",
                  "operator": "==",
                  "value": "post"
                }
              ]
            ]
          }
        ]
      }
    }

      
Copy

In the example above, the text attribute will only show in the editor if the post ID is 1386 and the post type is post. Please note that the camelCase convention is being used for the type keys. (postType, postId, userRole, userId)

If you want to create or conditions instead, simply move the conditions into their own array:

block.json 

            {
      "blockstudio": {
        "attributes": [
          {
            "id": "message",
            "type": "text",
            "label": "My message",
            "conditions": [
              [
                {
                  "type": "postId",
                  "operator": "==",
                  "value": "1386"
                },
                {
                  "type": "postType",
                  "operator": "==",
                  "value": "post"
                }
              ],
              [
                {
                  "type": "postType",
                  "operator": "==",
                  "value": "jobs"
                }
              ]
            ]
          }
        ]
      }
    }

      
Copy

In the example above, the text attribute will only show in the editor if the post ID is 1386 and the post type is post or the post type is jobs.

Custom

Custom conditions can be added using the blockstudio/blocks/conditions filter:

functions.php 

            add_filter('blockstudio/blocks/conditions', function ($conditions) {
      $conditions['purchasedProduct'] = serHasPurchasedProduct();

      return $conditions;
    });

      
Copy
block.json 

            {
      "blockstudio": {
        "attributes": [
          {
            "id": "message",
            "type": "text",
            "label": "My message",
            "conditions": [
              [
                {
                  "type": "purchasedProduct",
                  "operator": "==",
                  "value": "1"
                }
              ]
            ]
          }
        ]
      }
    }

      
Copy

Block

It is also possible to set conditions that work between attributes. Instead of setting a type key, simply set the id of the attribute you want to check against.

block.json 

            {
      "blockstudio": {
        "attributes": [
          {
            "type": "toggle",
            "id": "copyButton",
            "label": "Copy Button"
          },
          {
            "type": "text",
            "id": "copyButtonText",
            "label": "Copy Button Text",
            "default": "Copy",
            "conditions": [
              [
                {
                  "id": "copyButton",
                  "operator": "==",
                  "value": true
                }
              ]
            ]
          }
        ]
      }
    }

      
Copy

You can combine global conditions with block condition as you please.

Repeater

By default, conditions for attributes inside repeaters depend on the attributes of the currently repeated element.

block.json 

            {
      "blockstudio": {
        "attributes": [
          {
            "type": "toggle",
            "id": "toggle",
            "label": "Toggle"
          },
          {
            "type": "repeater",
            "id": "repeater",
            "label": "Repeater",
            "attributes": [
              {
                "type": "toggle",
                "id": "toggle",
                "label": "Toggle"
              },
              {
                "type": "text",
                "id": "text",
                "label": "Text",
                "conditions": [
                  [
                    {
                      "id": "toggle",
                      "operator": "==",
                      "value": true
                    }
                  ]
                ]
              }
            ]
          }
        ]
      }
    }

      
Copy

Since attribute IDs are scoped to the current repeater element, the text attribute inside the repeater will only show if the toggle inside the repeater is set to true.

If you want to check against the toggle outside the repeater, you can apply "context": "main" to the condition, and it will show the text attribute if the toggle outside the repeater is set to true.

block.json 

            {
      "blockstudio": {
        "attributes": [
          {
            "type": "toggle",
            "id": "toggle",
            "label": "Toggle"
          },
          {
            "type": "repeater",
            "id": "repeater",
            "label": "Repeater",
            "attributes": [
              {
                "type": "toggle",
                "id": "toggle",
                "label": "Toggle"
              },
              {
                "type": "text",
                "id": "text",
                "label": "Text",
                "conditions": [
                  [
                    {
                      "id": "toggle",
                      "operator": "==",
                      "value": true,
                      "context": "main"
                    }
                  ]
                ]
              }
            ]
          }
        ]
      }
    }

      
Copy