Flexible Content – WYSIWYG Fields organized in TABs strips paragraphs

• thad

• May 13, 2015 at 1:50 am

Hey all,

I believe I’ve discovered a bug.

I have a Flexible Content field set up called ‘Columns’ where I can use a select box to pick the number of columns in each row added (1-4). Each column’s content is using a standard WYSIWYG field.

To organize things better, I thought I would break up each column with tabs using the Tab field.

Fine and dandy, but whenever I add paragraph content to the WYSIWYG fields, the paragraph tags get stripped! I found that removing the TAB field resolved this issue.

I’m quite sure that this may be a bug, feel free to correct me if I’m wrong!

Here is an export of my fields:

if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array (
	'key' => 'group_54d4e39469d5f',
	'title' => 'Custom Layout',
	'fields' => array (
		array (
			'key' => 'field_55391cd3892fa',
			'label' => 'Sidebar',
			'name' => 'sidebar',
			'type' => 'radio',
			'instructions' => '',
			'required' => 1,
			'conditional_logic' => 0,
			'wrapper' => array (
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'choices' => array (
				'yes' => 'Yes',
				'no' => 'No',
			),
			'other_choice' => 0,
			'save_other_choice' => 0,
			'default_value' => 'yes',
			'layout' => 'horizontal',
		),
		array (
			'key' => 'field_54d4e3bfd66a7',
			'label' => 'Content',
			'name' => 'content_area',
			'type' => 'flexible_content',
			'instructions' => '',
			'required' => 1,
			'conditional_logic' => 0,
			'wrapper' => array (
				'width' => '',
				'class' => '',
				'id' => '',
			),
			'button_label' => 'Add Row',
			'min' => '',
			'max' => '',
			'layouts' => array (
				array (
					'key' => '54d4e3c40f79f',
					'name' => 'columns',
					'label' => 'Columns',
					'display' => 'block',
					'sub_fields' => array (
						array (
							'key' => 'field_54d4e3d5d66a8',
							'label' => 'Number of Columns',
							'name' => 'number_of_columns',
							'type' => 'select',
							'instructions' => 'Select the number of columns that you want to add.',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'choices' => array (
								1 => 1,
								2 => 2,
								3 => 3,
								4 => 4,
							),
							'default_value' => array (
								'one' => 'one',
							),
							'allow_null' => 0,
							'multiple' => 0,
							'ui' => 0,
							'ajax' => 0,
							'placeholder' => '',
							'disabled' => 0,
							'readonly' => 0,
						),
						array (
							'key' => 'field_55522032b9b4a',
							'label' => 'Column One',
							'name' => '',
							'type' => 'tab',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => 0,
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'placement' => 'top',
						),
						array (
							'key' => 'field_54d4e4d9d66a9',
							'label' => 'Column One',
							'name' => 'column_one',
							'type' => 'wysiwyg',
							'instructions' => '',
							'required' => 1,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '1',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '2',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '3',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'tabs' => 'all',
							'toolbar' => 'full',
							'media_upload' => 1,
						),
						array (
							'key' => 'field_54ede727c3b98',
							'label' => 'Column Two',
							'name' => 'column_two',
							'type' => 'tab',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '2',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '3',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'placement' => 'top',
						),
						array (
							'key' => 'field_54d4e4f0d66aa',
							'label' => 'Column Two',
							'name' => 'column_two',
							'type' => 'wysiwyg',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '2',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '3',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'tabs' => 'all',
							'toolbar' => 'full',
							'media_upload' => 1,
						),
						array (
							'key' => 'field_54ede738c3b99',
							'label' => 'Column Three',
							'name' => 'column_three',
							'type' => 'tab',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '3',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'placement' => 'top',
						),
						array (
							'key' => 'field_54d4e4f7d66ab',
							'label' => 'Column Three',
							'name' => 'column_three',
							'type' => 'wysiwyg',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '3',
									),
								),
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'tabs' => 'all',
							'toolbar' => 'full',
							'media_upload' => 1,
						),
						array (
							'key' => 'field_54ede747c3b9a',
							'label' => 'Column Four',
							'name' => 'column_four',
							'type' => 'tab',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'placement' => 'top',
						),
						array (
							'key' => 'field_54d4e4fed66ac',
							'label' => 'Column Four',
							'name' => 'column_four',
							'type' => 'wysiwyg',
							'instructions' => '',
							'required' => 0,
							'conditional_logic' => array (
								array (
									array (
										'field' => 'field_54d4e3d5d66a8',
										'operator' => '==',
										'value' => '4',
									),
								),
							),
							'wrapper' => array (
								'width' => '',
								'class' => '',
								'id' => '',
							),
							'default_value' => '',
							'tabs' => 'all',
							'toolbar' => 'full',
							'media_upload' => 1,
						),
					),
					'min' => '',
					'max' => '',
				),
			),
		),
	),
	'location' => array (
		array (
			array (
				'param' => 'page_template',
				'operator' => '==',
				'value' => 'page-varied-layout.php',
			),
		),
	),
	'menu_order' => 0,
	'position' => 'normal',
	'style' => 'default',
	'label_placement' => 'top',
	'instruction_placement' => 'label',
	'hide_on_screen' => array (
		0 => 'the_content',
		1 => 'excerpt',
		2 => 'custom_fields',
		3 => 'discussion',
		4 => 'comments',
		5 => 'slug',
		6 => 'format',
		7 => 'featured_image',
		8 => 'categories',
		9 => 'tags',
		10 => 'send-trackbacks',
	),
));

endif;

• John Huebner

• June 13, 2015 at 3:33 pm

To be honest, I don’t know why it’s not stripping the <p> tags of when they aren’t in tabs. Does the same thing for me but this is the default operation of the WP WYSIWYG editor.

I use TinyMCE Advanded on all my sites, one of its features is to stop this from happening.

• BigFish99

• October 14, 2015 at 9:58 pm

I have the same thing happening to me on version 5.3.1

The problem
When having a WYSIWYG field under a tab in a Flexible Content layout, the output of the_sub_field() stripped the content of its tags. Shortcodes did not work either.

The solution
Moving the WYSIWYG field to the top of the Flexible Content (meaning not under a tab field). This worked for me and it formats shortcodes and tags again.

I could also place the field back under the tab now, and it worked just fine.