WIP: Rich-text Properties can't be selected in Conditions (Dynamic Data)

Environment:

  • Bricks 2.3.11

  • Component Properties panel

Steps to reproduce:

  1. Create a component with a Rich-text property and connect it with a rich text.

  2. Go to Conditions → add condition → Dynamic Data → try to select the Rich-text property → operator “is not empty”.

  3. Compare with the same setup using a Basic-text property instead.

Expected behavior:
Rich-text properties should be selectable in Conditions via Dynamic Data, the same way Basic-text properties are, so their value can be checked (e.g. “is not empty”).

Actual behavior:
Rich-text properties don’t show up / can’t be selected as a Dynamic Data source in Conditions. Basic-text properties work without issue in the exact same setup.

Use case:
I want to conditionally render an element (e.g. a rich text element) only if the client has actually filled in content for it — i.e. only show the text in frontend if its Rich-text property is not empty. This works fine with Basic-text properties but isn’t possible with Rich-text ones.

Hi @philipp,

Thanks for the report. While I’m not sure if this is more of a feature request rather then a bug, I’ve opened internal task anyway and we will improve this.
Once ready, we will update this topic.

Thank you,
Matej

Thank you for opening the task :slight_smile:

We’ve addressed this in Bricks 2.3.12, now available as a one-click update in your WordPress Dashboard.

Rich Text component properties can now be selected in Conditions for Dynamic Data checks such as “is not empty.”

Please read the changelog entry before updating, and let us know if you experience any issues.

Follow-up on this: the Rich-text case appears fixed in the current version — I can select a Rich-text property in Conditions now. But the same issue still exists for Heading properties, which I noticed just now.

Steps: component with a Heading property → select any element → Conditions → Dynamic Data → pick the Heading property → “is not empty” → save.

The condition looks set in the UI, but nothing is stored. Exporting the component shows the condition saved without a source:

json

"_conditions":[[{"id":"dnvumu","key":"dynamic_data","compare":"empty_not"}]]

No field reference, so the condition never evaluates and the element always renders. Basic-text properties save correctly in the same setup.

Real-world impact: I use this to hide an empty heading inside a component. Without the condition an empty <h3> is output, which then shows up as a blank entry in the table of contents.

Could you adress this bug in the next version as well? :slight_smile: :heart:

Hey there,

I’ve reopened a task, and we will implement this as well :slight_smile:

Matej

Thanks, this is great news <3

Hi @Matej ,

here is my component if this helps:

{"content":[{"id":"kbgvgc","name":"container","parent":"0","children":["nqjfql","oiehrh"],"settings":{"_cssGlobalClasses":["fpabju"],"taxonomies":["category","post_tag"],"extrasCustomQueryCode":"<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>","_gb_show_hide_default":"true","_gb_enable_variant":"true","_gb_variant_name":"blue_gradient","_gb_variant_label":"Gradient Blue","_gradient":{"angle":"50"}},"label":"Highlight Box"},{"id":"nqjfql","name":"heading","parent":"kbgvgc","settings":{"text":"<p>Ich bin eine Überschrift</p>","_gb_show_hide_default":"true","_gb_binding_name":"highlight_box_heading","_gb_enable_show_hide":"true","_gb_show_hide_label":"Zeige Überschrift","_gb_enable_native_editor":"true","_gb_native_editor_label":"Überschrift","_gb_native_editor_group":"Highlight Box","_conditions":[[{"id":"xsyvxc","key":"dynamic_data","compare":"empty","value":"empty"}]]}},{"id":"oiehrh","name":"text","parent":"kbgvgc","settings":{"_gb_show_hide_default":"true","_gb_binding_name":"highlight_box_body","_gb_enable_show_hide":"true","_gb_show_hide_label":"Zeige Fließtext","_gb_enable_native_editor":"true","_gb_native_editor_label":"Beschreibung","_gb_native_editor_group":"Highlight Box","text":"<p>Lorem Ipsum dolor sit amet</p>"}}],"source":"bricksCopiedElements","sourceUrl":"https://example.myrdbx.io","version":"2.4-beta3","globalClasses":[{"id":"fpabju","name":"highlight-box-gutenbricks","settings":{"_padding":{"top":"var(--section-space-s)","right":"var(--section-space-s)","bottom":"var(--section-space-s)","left":"var(--section-space-s)"},"_border":{"radius":{"top":"var(--fr-card-radius)","right":"var(--fr-card-radius)","bottom":"var(--fr-card-radius)","left":"var(--fr-card-radius)"}},"_rowGap":"var(--content-gap)","_alignItems":"center","_margin":{"top":"var(--space-xs)","bottom":"var(--space-xs)"}}}]}

The thing that is not working is the condition on the heading (“überschrift”):

If you have questions feel free to ask :slight_smile:

Hey @philipp,

sadly, this is not a component - only content of it. Can you export it or copy component instance?

Thanks,
Matej

Oh @Matej you are right, here ist the correct component export:

{
  "components": [
    {
      "id": "kbgvgc",
      "category": "",
      "desc": "",
      "elements": [
        {
          "id": "kbgvgc",
          "name": "container",
          "parent": "0",
          "children": [
            "nqjfql",
            "oiehrh"
          ],
          "settings": {
            "_cssGlobalClasses": [
              "fpabju"
            ],
            "taxonomies": [
              "category",
              "post_tag"
            ],
            "extrasCustomQueryCode": "<style>\nh1.my-heading {\n  color: crimson;\n}\n</style>\n\n<h1 class='my-heading'>Just some custom HTML</h1>",
            "_gb_show_hide_default": "true",
            "_gb_enable_variant": "true",
            "_gb_variant_name": "blue_gradient",
            "_gb_variant_label": "Gradient Blue",
            "_gradient": {
              "angle": "50"
            }
          },
          "label": "Highlight Box"
        },
        {
          "id": "nqjfql",
          "name": "heading",
          "parent": "kbgvgc",
          "settings": {
            "text": "<p>Ich bin eine Überschrift</p>",
            "_gb_show_hide_default": "true",
            "_gb_binding_name": "highlight_box_heading",
            "_gb_enable_show_hide": "true",
            "_gb_show_hide_label": "Zeige Überschrift",
            "_gb_enable_native_editor": "true",
            "_gb_native_editor_label": "Überschrift",
            "_gb_native_editor_group": "Highlight Box",
            "_conditions": [
              [
                {
                  "id": "xsyvxc",
                  "key": "dynamic_data",
                  "compare": "empty",
                  "value": "empty"
                }
              ]
            ]
          }
        },
        {
          "id": "oiehrh",
          "name": "text",
          "parent": "kbgvgc",
          "settings": {
            "_gb_show_hide_default": "true",
            "_gb_binding_name": "highlight_box_body",
            "_gb_enable_show_hide": "true",
            "_gb_show_hide_label": "Zeige Fließtext",
            "_gb_enable_native_editor": "true",
            "_gb_native_editor_label": "Beschreibung",
            "_gb_native_editor_group": "Highlight Box",
            "text": "<p>Lorem Ipsum dolor sit amet</p>"
          }
        }
      ],
      "properties": [
        {
          "label": "Überschrift",
          "type": "text",
          "id": "xycclg",
          "connections": {
            "nqjfql": [
              "text",
              "_conditions|xsyvxc|dynamic_data"
            ]
          }
        },
        {
          "label": "Text",
          "type": "editor",
          "id": "bdaems",
          "connections": {
            "oiehrh": [
              "text"
            ]
          }
        },
        {
          "label": "Hintergrund",
          "type": "class",
          "default": [
            "yepfno"
          ],
          "id": "kcnxvm",
          "connections": {
            "kbgvgc": [
              "_cssGlobalClasses"
            ]
          },
          "options": [
            {
              "id": "yepfno",
              "label": "Blau",
              "value": [
                "rpytow"
              ]
            },
            {
              "id": "tfsazw",
              "label": "Rot",
              "value": [
                "gddhal"
              ]
            },
            {
              "id": "poxajd",
              "label": "Grün",
              "value": [
                "qbkeiz"
              ]
            },
            {
              "id": "ehetfm",
              "label": "Gelb",
              "value": [
                "qhaxcf"
              ]
            }
          ]
        }
      ],
      "_created": "1786453732",
      "_user_id": "33",
      "_version": "2.2",
      "blockEditor": "1",
      "blockIcon": {
        "library": "svg",
        "svg": {
          "id": 31768,
          "filename": "mark-pen-fill.svg",
          "url": "https://bvfi98im.myrdbx.io/wp-content/uploads/mark-pen-fill.svg"
        }
      },
      "propertyGroups": [
        {
          "id": "lbsnro",
          "name": "Farben"
        }
      ],
      "labelVariantBase": "Blue"
    }
  ],
  "globalClasses": [
    {
      "id": "fpabju",
      "name": "highlight-box-gutenbricks",
      "settings": {
        "_padding": {
          "top": "var(--section-space-s)",
          "right": "var(--section-space-s)",
          "bottom": "var(--section-space-s)",
          "left": "var(--section-space-s)"
        },
        "_border": {
          "radius": {
            "top": "var(--fr-card-radius)",
            "right": "var(--fr-card-radius)",
            "bottom": "var(--fr-card-radius)",
            "left": "var(--fr-card-radius)"
          }
        },
        "_rowGap": "var(--content-gap)",
        "_alignItems": "center",
        "_margin": {
          "top": "var(--space-xs)",
          "bottom": "var(--space-xs)"
        }
      }
    },
    {
      "id": "rpytow",
      "name": "gradient-1--trans-50",
      "settings": {
        "_cssCustom": ".gradient-1--trans-50 {\nbackground: linear-gradient(90deg, rgba(129,181,240,0.5) 0%, rgba(158,30,111,0.5) 50%);   \n}\n"
      }
    },
    {
      "id": "gddhal",
      "name": "gradient-2--trans-50",
      "settings": {
        "_cssCustom": ".gradient-2--trans-50{ \n \n background: linear-gradient(90deg, rgba(231,42,77,0.5) 0%, rgba(241,135,43,0.5) 50%); \n \n}"
      }
    },
    {
      "id": "qbkeiz",
      "name": "gradient-3--trans-50",
      "settings": {
        "_cssCustom": ".gradient-3--trans-50 {  \n background: linear-gradient(90deg, rgba(36,162,140,0.5) 0%, rgba(183,210,110,0.5) 50%);  \n}"
      },
      "modified": 1786617920,
      "user_id": 33
    },
    {
      "id": "qhaxcf",
      "name": "gradient-4--trans-30",
      "settings": {
        "_cssCustom": ".gradient-4--trans-30 {\nbackground: linear-gradient(90deg, rgba(245,233,104,0.6) 0%, rgba(249,176,000,0.2) 50%);\n}"
      }
    }
  ]
}