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}"
      }
    }
  ]
}

Hey @philipp,

I’m so sorry for late response. I was on a vacation and only now fully back.

Thanks for the component export. I checked it, and the Heading property connection is saved correctly.

The condition is currently set to “is empty”, which shows the Heading when its property is empty. To hide an empty Heading, change it to “is not empty.”

Sorry for the confusion in my earlier reply (and if I misunderstood it now too). Could you try that and let us know whether it works on the frontend after saving? Because for me, it works perfectly.

If it’s still not working, can you please record a video of the bug?

Thanks,
Matej

Hi @Matej ,

welcome back, hope you had a good vacation :slight_smile:

Thanks for checking in on my problem - yeah you are right with “is not empty” however this does not solve my problem, there seems to be an issue.

I made a video to show you my component in action:
My condition does not seem to work with H Heading Elements, the TOC still takes the empty heading and shows an empty navigation jumpmark even when deleting its content.

Watch Video

Any idea if this is a bug, or am I doing something wrong?

Thanks
Philipp

It was great, thank you! :slight_smile:

As for the bug, I’m still unable to replicate it. I’ve tested again in the Gutenberg editor and in the Bricks, but the Heading was not outputted.
Can you try on Bricks 2.4.1, just in case if it’s fixed here? If not, can you send me the temporary login credentials to your site (ideally a staging one) so I can check it?

Thank you,
Matej