Custom Cornerstone Element HTML Markup on Editor Element

Support
#1

Hello Themeco Team,

I’m having problems with creating a custom Elements containing two Editor Elements. I have searched the Forums and found one similar Issue, that I tried but it did not resolve my Problem. This is the Forum thread I’m talking about for reference.

The Problem: On the second Editor Element HTML Markup is escaped, causing styles like

<strong>Example</strong>

to not display as Bold Text. Here is a screenshot of the Text-element:

The first element formats each HTML tag just fine, yet the second element, which is build up almost identical, with the exception of a toggle condition to activate/deactivate it, and a required different name for the element has it’s HTML escaped.

here are the respective code-snippets of said element:

controls.php:

'content' => array(
    'type' => 'editor',
    'context' => 'content',
),
[...]
'content_price' => array(
    'type' => 'editor',
    'context' => 'content',
    'condition' => array(
        'c2_toggle' => true,
    ),
),

defaults.php

return array(
'header' => '',
'subheader' => '',
'content' => '',
'c2_toggle' => true,
'content_price' => '',
'dates' => '',
'swap' => false,
'img' => '',
'price' => '',
'toggle_ab' => false,
'button' => false,
'button_text' => '',
'button_link' => '',
);

shortcode.php

    [...]
    <div class="pauschale">
        <div class="pauschale-image">
            <div class="image-section">
                <div class="image-wrapper" style="background-image: url(<?php echo $img; ?>);"></div>
            </div>
            <div class="text-section">
                <h3 class="title"><?php echo $header; ?></h3>
                <h4 class="subtitle"><?php echo $subheader; ?></h4>
                <div class="dates"><span><?php echo __('Zeitraum:','dp-elements') ?></span><?php echo $dates; ?></div>
                <div class="description"><?php echo do_shortcode(wpautop($content)); ?></div>
            </div>
        </div>
        <div class="preistext">
            <div class="preisliste">
            <?php echo do_shortcode(wpautop($content_price)); ?>
            </div>
            <?php if($price): ?>
                <div class="preis"><?php echo $ab . $price?> €</div>
            <?php endif; ?>
            <?php if($button == true): ?>
                <a href="<?php echo $button_link; ?>" class="button btn x-btn"><?php echo $button_text; ?></a>
            <?php endif; ?>
        </div>
    </div>
    [...]

The only point that I find intriguing is that i noticed only editor elements with the name ‘content’ are parsed and styled as actual HTML, any other name seems to escape said HTML Markup

Could you please help resolve this issue?

#2

Hi there,

I wonder if you turn off the condition and show the second editor without any criteria you get the same HTML escape problem?

Also, there is a new version of Cornerstone which is completely different than the previous one as it uses ember instead of the backbone at its core. For more information:

https://theme.co/changelog/#theme-x-5-2-0

This means that the whole customization system might change in future, kindly give us time to update the system correctly and then give you proper instructions if there are any changes.

Thank you.

#3

I have seen the new Update. The custom elements seem to work fine on another website I am working on at the moment (The issue with a second editor element still persists, though.). I haven’T tried adding new elements yet though.

Regarding the Editor problem:

Even with entirely removing the condition from the custom element the HTML Markup gets escaped, causing the tags to become plain text

Here’s an image with the condition removed:

Swapping the element names causes the HTML escape problem to switch around, causing the first editor element to escape its HTML Tags, while the second editor element applies its styles properly.

At first glance it seems like only editor elements with the name ‘content’ have their HTML properly styled, as i tried it with countless other names, and only ‘content’ seems to apply HTML Tags.

#4

Hi there,

We are sorry for our late reply, we are caught up with the maintenance of the new version of V2 elements which are available in the auto updates.

Thank you for the insight I will inform our development team regarding this and get their guidance for this case to see if it is possible to have 2 sets of editors without the HTML escape and if yes how to implement it.

Thank you.

#5

Thanks! And no problem about the late reply. I figured it would be a rather busy time for you so shortly after a rather major update.

I will be waiting for any news regarding the possibility of having 2+ sets of editor elements.

#6

We don’t have API docs ready for the new element system just yet, but I can shed some light on what you’re experiencing. What makes content special as a attribute key is that it actually ends up as the WordPress shortcode content for example:

[your_shortcode some_text="this gets encoded"]This is "content" and doesn't get encoded[/your_shortcode]

Due to this format, you can only use content once - all other attributes get HTML encoded before being saved because otherwise they would break the shortcode output.

Now for the solution. In your shortcode, you can wrap anything you want decoded in the cs_decode_shortcode_attribute function. For example

$header = cs_decode_shortcode_attribute( $header );

This is a function we introduced to support HTML in other fields for our own elements, along with adding a filter to provide other magic like our ACF integration.

You could also use a native WordPress function. This would work just as well:

$header = wp_specialchars_decode( $header, ENT_QUOTES );

Either way, using this in your shortcode will decode the HTML entities, restoring the true HTML that you want to output.

#7

Thanks! That did the trick! the HTML is now working as expected!

#8

Ok great! Thanks for confirming.