Row background color selection causes error

  • Resolved Kurt

    (@highfxmedia)


    3 years, 3 months ago

    Running Kadence Blocks v 3.0.16

    WordPress v  6.1.1

    Using a child theme of an FSE theme (Frost). The child theme replaces the default color palette of the parent theme.

    Add a KB row block. Select “Style” in the sidebar and then click on the circle for Background Color causes the block to be replaced by this error: This block has encountered an error and cannot be previewed.

    Console error: TypeError: Cannot read properties of undefined (reading ‘replace’)

    This problem does not happen when the parent theme is active or Twenty Twenty Three is active. It also does not happen when the default WordPress Row block is used in the child theme. The WP default row block does allow the background color to be set in the child theme. So this problem appears to be specific to Kadence.

    • This topic was modified 3 years, 3 months ago by Kurt.
    • This topic was modified 3 years, 3 months ago by Kurt.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Kurt

    (@highfxmedia)

    3 years, 3 months ago

    Found an extra colon in the child theme palette color section. Apparently, that was borking Kadence blocks but not default WP blocks.

    Problem resolved.

    Plugin Contributor Ben Ritner – Kadence WP

    (@britner)

    3 years, 3 months ago

    Glad you found the issue, I wonder if you can send me the code, perhaps I can make blocks handle a color error like that with more grace.

    Ben

    Thread Starter Kurt

    (@highfxmedia)

    3 years, 3 months ago

    Here’s the child theme json that was bad. You can see an extra “:” in the slug value for darkblue:

    `

    "settings": {

        "color": {

            "gradients": [

                {

                    "gradient": "linear-gradient(135deg,rgba(0,0,0,1) 50%,var(--wp--preset--color--medblue) 100%)",

                    "name": "Black to Medium Blue",

                    "slug": "black-darkblue"

                },

                {

                    "gradient": "linear-gradient(135deg,rgba(0,0,0,1) 50%,var(--wp--preset--color--lightblue) 100%)",

                    "name": "Black to Light Blue",

                    "slug": "black-secondary"

                },

                {

                    "gradient": "linear-gradient(135deg,rgba(0,0,0,1) 50%,var(--wp--preset--color--medgold) 100%)",

                    "name": "Black to Medium Gold",

                    "slug": "black-medgold"

                }

            ],

            "palette": [

                {

                    "color": "#ffffff",

                    "name": "White",

                    "slug": "white"

                },

                {   "color": "#000000",

                    "name": "Black",

                    "slug": "black"

                },

                {

                    "color": "#081935",

                    "name": "Dark Blue",

                    "slug:": "darkblue"

                },

                {

                    "color": "#1e417b",

                    "name": "Medium Blue",

                    "slug": "medblue"

                },

                {

                    "color": "#1183c2",

                    "name": "Light Blue",

                    "slug": "lightblue"

                },

                {

                    "color": "#eaad1f",

                    "name": "Medium Gold",

                    "slug": "medgold"

                }

            ]

        },

        "layout": {

            "contentSize": "900px",

            "wideSize": "1100px"

        }

    },

    That didn’t cause a problem when setting background color for default WP blocks which made me think the problem was with Kadence and not my own code. Hope this helps.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Row background color selection causes error’ is closed to new replies.