[Resolved] HTML tags disappear in textarea fields in custom cells

[Author]

Posts

[abraS]

I am trying to edit custom cells content in textarea and input fields. After "save", all html tags were cropped. It is happening after the last Layouts upgrade to version 2.3. Can you look at it?

[Nigel]

Yes, sure, I will have a look. I still have your site credentials from the other thread.

What should I be looking at?

Which Layout? Where are the custom cells defined?

[abraS]

It is same in all layouts and all custom sections. I made a "Test page" on url /test-page (Post ID 12264), with one custom cell. All HTML tags are cropped after save. Thanks in advance.

[Nigel]

I can't see the code you used to create your custom cells and I don't have FTP access.

I'm guessing you added the code to your theme's functions.php, yes?

Could you paste here the code you used just to create the custom cell used in the Content Layout on the test page you set up?

I think it is "Sekce text 30-63"

[abraS]

Custom cells are placed in folder /dd-layouts-cells not in functions.php

This is example:

<?php

function register_section_text_3063_init() {

	register_dd_layout_cell_type ('section-text-3063',
		array (
			'name' => __('Sekce text 30-63', 'abra_software'),
                        'cell-image-url' => get_template_directory_uri().'/dd-layouts-cells/images/section-text-3063.png',
			'description' => __('Buňka pro Sekci text 30-63', 'abra_software'),
			'category' => __('ABRA buňky', 'abra_software'),
			'button-text' => __('Vložit Sekci text 30-63', 'abra_software'),
			'dialog-title-create' => __('Vytvořit novou buňku Sekce text 30-63', 'abra_software'),
			'dialog-title-edit' => __('Upravit buňku Sekce text 30-63', 'abra_software'),
			'dialog-template-callback' => 'section_text_3063_dialog_template_callback',
			'cell-content-callback' => 'section_text_3063_content_callback',
			'cell-template-callback' => 'section_text_3063_template_callback',
			'cell-class' => 'abcell',
                        'translatable_fields'      => array(
                            'text1' => array('title' => 'Text 1', 'type' => 'VISUAL'),
                            'text1' => array('title' => 'Text 1', 'type' => 'VISUAL')
                        )
		)
	);
}
add_action( 'init', 'register_section_text_3063_init' );
 
function section_text_3063_dialog_template_callback() {
        ob_start();
	?>
        <h3>
            <?php _e('Sekce text 30-63', 'abra_software' ); ?>
        </h3>

        <div class="ddl-form">
            
            <p>
                <label for="<?php the_ddl_name_attr('text1'); ?>"><?php _e('Text 1', 'abra_software' ); ?></label>                
                <textarea name="<?php the_ddl_name_attr('text1'); ?>" rows="3"></textarea>
            </p>
            <p>
                <label for="<?php the_ddl_name_attr('text2'); ?>"><?php _e('Text 2', 'abra_software' ); ?></label>
                <textarea name="<?php the_ddl_name_attr('text2'); ?>" rows="3"></textarea>
            </p>
        </div>

	<?php
	return ob_get_clean();
       
}

// Callback function for displaying the cell in the editor.
function section_text_3063_template_callback() {
ob_start();?> 

     <div class="cell-content">
        <p class="cell-name">{{ name }}</p>
     </div>
       <?php
    return ob_get_clean();

}

// Callback function for display the cell in the front end.
function section_text_3063_content_callback($cell_settings) {
	ob_start();
	?>
    
    <section class="section">
        <div class="container">

            <div class="grid-text grid-text-30-63 medium-up">
                <div class="grid-text__column grid-text__column--top">

                    <h3 class="intro-text"><?php the_ddl_field('text1');?></h3>

                </div>
                <div class="grid-text__column grid-text__column--top">

                    <p><?php the_ddl_field('text2');?></p>

                </div>
            </div>

        </div>
    </section>

        
	<?php
	return ob_get_clean();
}

[Nigel]

Thanks for that.

I have reproduced the problem with your custom cell, confirming that it worked in Layouts 2.2 and has stopped working in 2.3, the HTML tags are stripped.

I have escalated this now so my colleagues can investigate and I'll get back to you.

[Nigel]

I had a discussion with the Layouts developer about this.

Stripping HTML tags in custom cells was introduced in 2.3 because of security concerns raised by another user.

Now only a content cell can include HTML tags.

With the current version, to be able to use HTML tags you would need to change your cell definition to use name the field as content, something like this:

<textarea name="<?php the_ddl_name_attr('content'); ?>" rows="3"></textarea>

and get it back for rendering like:

<p><?php the_ddl_field('content');?></p>

This allows you to have a text field that accepts HTML tags—but only one.

It wasn't considered that you may need to include more than one in the same cell.

We'll need to update Layouts for that, but it will still involve using content types, each with a name beginning with content, e.g.

<textarea name="<?php the_ddl_name_attr('content_WHATEVER'); ?>" rows="3"></textarea>

If you need this to work now you could edit the Layouts plugin file inc/gui/editor/js/models/abstract/Element.js:144

Change this:

if( 'content' !== key ){
                        val = WPV_Toolset.Utils._strip_tags_and_preserve_text( val );
                    }

to:

if( key.indexOf( 'content') === -1  ){
                        val = WPV_Toolset.Utils._strip_tags_and_preserve_text( val );
                    }

And then you can have as many content_something fields as you need within the same cell where the HTML tags are not stripped.

Obviously such changes would get overwritten. You would need to check the release notes for the next Layouts release to see if this has been updated yet.

Sorry for the inconvenience, your site highlights what was an unanticipated problem with the changes.

[abraS]

Thank you for help, this works, BUT...
We have tons of custom cells a many occurence of these cells in preproduction web. At this moment is not possible to change names of ddl_fields, because it will make values of these fields stored in database inaccessible.
So I made small adjustment, just commented the line in Element.js

val = WPV_Toolset.Utils._strip_tags_and_preserve_text( val )

Hope, there is another solution for this problem.

[Nigel]

I spoke again with the Layouts developer who said they will review this and may even remove that same line you commented out, as the key work is done by the previous line, but in any case whatever they decide won't be in time for the imminent Layouts update, so if you apply that update you will need to edit the same file again, but the subsequent release should fix the issue bearing in mind your feedback.

[abraS]

Was this issue fixed in new Layouts version 2.4? Thanks for information!

[Nigel]

I checked again with the Layouts developer and they weren't able to work on this for Layouts 2.4 so you'll need to keep your 'hack' in place for now.

But I've put it back under his nose so that he can take another look.