Hi, i am having the exact same issue, but only in Chrome and IE/Edge, it works fine in Firefox. I have multiple sites with Gutenberg and ACF wysiwyg editor fields, and the problem is present on all of the sites with WP 5.0.3
My clients cant edit links in the wysiwyg fields when the popup link editor just blinks like crazy when you hover over the buttons in the popup.
Has anyone found a fix to this problem?
Going to be honest, right now I don’t feel that the new editor is the right choice for 99% of my clients. It’s buggy as hell and it’s not intuitive to use. Most of my clients could not use it, nor do they want to use it. Maybe in a year or 2 when the get the bugs worked out and do make is so that it’s not a chore for them to use it. My client’s have simple needs that are not met by the new editor. My plans right now are to continue using ACF, if they don’t make gooberbug more user friendly then just to disable it and use ACF wysiwyg fields as a replacement hoping that Elliot will find a way to keep Tiny MCE as a field type choice. But that’s just my nickels worth of opinion.
Thank you for your answer but I think your solution does not help with my problem.
I expressed myself a bit awkwardly…sorry.
I have added a custom field to the file attachments (images) which can be filled out. (like the image alt attribute, description, title…)
The pictures are inserted in the text via the normal WYSIWYG editor. If the image has a description, I get it automatically (in the editor). Now I want the text of my custom field to be printed below the description (this should have an span around it or something).
I suspect I can only solve this via functions.php?
Hello, the bug is present on the latest version of Chrome(72.0.3626.81) and Edge(42.17134.1.0), but not on Firefox and IE11. Yes I did try to remove every other plugins and use the latest default WP Theme (TwentyNineteen), same behavior. The bug is only present on a WYSIWYG inside an ACF field group in a page. Using the classic editor in a Gutenberg block works, and installing the “Classic Editor” plugin removes the issue entirely.
Here is a video showing everything I just said:
https://photos.app.goo.gl/ZFMU7y9qbHtSzqWV7
I also have the same issue, no matter if it’s wrapped in a column or not. Just having a Field Group that shows on a page with only 1 WYSIWYG field. I tried several versions of ACF Pro from 5.7.6 to 5.8.0-b3. The bug goes away if I install the Classic Editor Plugin (to remove Gutenberg) since I’m using WordPress 5.0.3, so the bug is definitely linked to Gutenberg.
Here’s another video of it in action:
https://photos.app.goo.gl/38aQH2MgNEB7T4pg8
I think I have the same problem with Timber and Twig, which is not applying any p tags in my acf wysiwyg field.
I don’t quite unterstand oyyplays solution.
Could you explain a bit more in detail what you mean by that? {{ fn(‘the_field’,’episode_editor’) }}
Or are there any other solutions around?
Thanks everyone
Hi @majorpayne, this forum is for both free and paid users, however, it is not managed by ACF and the regular ACF support does not answer questions here. As @pjeaje says, this forum is for getting help from other users. There are some users that spend more time here than others, like myself, but help is not guaranteed. Sometimes questions do slip by, and in some cases people may not be able to help either because they don’t know or the question is not clear.
As far as your question goes, it is actually not altogether clear what you meant by “Default WP Editor”.
The default editor is not gutenberg. There is nothing in ACF that will allow you to create a custom field that uses this type of editor.
You have a choice between the textarea field or the wysiwyg (tinyMCE) field types. The textarea field will allow users to enter HTML, but does not have any way to add controls. The wysiwyg field as mentioned by @pixelsandthings has controls and has options for the type of controls that will be added. You can also customize the toolbar of these fields using a filter https://www.advancedcustomfields.com/resources/customize-the-wysiwyg-toolbars/
Hi MajorPayne, you have access to the WYSIWIG editor as a Custom Field type, you can rtead more about it here – https://www.advancedcustomfields.com/resources/wysiwyg-editor/ there’s various options in terms of the functionality you want to allow the client to have.
Thanks John,
I’m defining the fields in the php, which I will include below. The taxonomy list is generated from a taxonomy defined on the root site. On subsites, I use the query and results hooks to switch to the root site for the query then back to the originating site after the query. I can also include the php and js hooks I’m using. The fields in question are ‘peopletype_taxonomy_list` which filters ‘people_by_type’.
acf_add_local_field_group(array(
'key' => 'group_59d53ce54567f',
'title' => 'People Group',
'fields' => array(
array(
'key' => 'field_59dd3068b24e6',
'label' => 'Copy',
'name' => 'copy',
'type' => 'wysiwyg',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'default_value' => '',
'tabs' => 'all',
'toolbar' => 'full',
'media_upload' => 1,
'delay' => 0,
),
array(
'key' => 'field_5c27f7a668daf',
'label' => 'Add By Individual',
'name' => 'add_by_individual',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'field_5c27f7d868db0',
'label' => 'Add By People Type',
'name' => 'add_by_people_type',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'field_5c27f7eb68db1',
'label' => 'Add By Site',
'name' => 'add_by_site',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array(
'key' => 'field_59d53cee6770e',
'label' => 'People as Individuals',
'name' => 'people_as_individuals',
'type' => 'repeater',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c27f7a668daf',
'operator' => '==',
'value' => '1',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => '',
'min' => 0,
'max' => 0,
'layout' => 'table',
'button_label' => '',
'sub_fields' => array(
array(
'key' => 'field_59d53d266770f',
'label' => 'Person',
'name' => 'person',
'type' => 'post_object',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'post_type' => array(
0 => 'furman-person',
),
'taxonomy' => '',
'allow_null' => 0,
'multiple' => 0,
'return_format' => 'object',
'ui' => 1,
),
),
),
array(
'key' => 'field_5c2d0d1860d0f',
'label' => 'Select People Type',
'name' => 'peopletype_taxonomy_list',
'type' => 'taxonomy',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c27f7d868db0',
'operator' => '==',
'value' => '1',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'taxonomy' => 'furman-person-type',
'field_type' => 'select',
'allow_null' => 0,
'add_term' => 1,
'save_terms' => 0,
'load_terms' => 0,
'return_format' => 'id',
'multiple' => 0,
),
array(
'key' => 'field_5c27fa0480c21',
'label' => 'People by Type',
'name' => 'people_by_type',
'type' => 'repeater',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c27f7d868db0',
'operator' => '==',
'value' => '1',
),
array(
'field' => 'field_5c2d0d1860d0f',
'operator' => '!=empty',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => '',
'min' => 0,
'max' => 0,
'layout' => 'table',
'button_label' => '',
'sub_fields' => array(
array(
'key' => 'field_5c27fa0480c22',
'label' => 'Person',
'name' => 'person',
'type' => 'post_object',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'post_type' => '',
'taxonomy' => '',
'allow_null' => 0,
'multiple' => 0,
'return_format' => 'object',
'ui' => 1,
),
),
),
array(
'key' => 'field_5c2d0d734763e',
'label' => 'Select Site',
'name' => 'site_taxonomy_list',
'type' => 'taxonomy',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c27f7eb68db1',
'operator' => '==',
'value' => '1',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'taxonomy' => 'furman-site',
'field_type' => 'select',
'allow_null' => 0,
'add_term' => 1,
'save_terms' => 0,
'load_terms' => 0,
'return_format' => 'id',
'multiple' => 0,
),
array(
'key' => 'field_5c28136b1102f',
'label' => 'People by Site',
'name' => 'people_by_site',
'type' => 'repeater',
'instructions' => '',
'required' => 0,
'conditional_logic' => array(
array(
array(
'field' => 'field_5c27f7eb68db1',
'operator' => '==',
'value' => '1',
),
array(
'field' => 'field_5c2d0d734763e',
'operator' => '!=empty',
),
),
),
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'collapsed' => '',
'min' => 0,
'max' => 0,
'layout' => 'table',
'button_label' => '',
'sub_fields' => array(
array(
'key' => 'field_5c28136b11030',
'label' => 'Person',
'name' => 'person',
'type' => 'post_object',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'post_type' => '',
'taxonomy' => '',
'allow_null' => 0,
'multiple' => 0,
'return_format' => 'object',
'ui' => 1,
),
),
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'post',
),
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => 1,
'description' => '',
));
Here are the hooks being used.
/*
* Action hooks to modify query arguments within the People Group module
*/
/*
* Sets query args for Individual People Field
*/
function individualPeopleQuery( $args, $field, $post_id ) {
$args['post_type'] = \Furman\PostTypes\People::POST_TYPE;
return $args;
}
add_filter('acf/fields/post_object/query/key=field_59d53d266770f', 'individualPeopleQuery', 10, 3);
/*
* Ensures that the title is correct when querying from child sites
*/
function individualPeopleResult( $title, $post ) {
if ( strpos( $title, 'no title' ) ) {
$title = $post->post_title;
}
return $title;
}
add_filter('acf/fields/post_object/result/key=field_59d53d266770f', 'individualPeopleResult', 10, 3);
function peopleTypeTaxonomyQuery( $args, $field, $post_id ) {
if ( ! Site::isRoot() ) {
$currentSite = get_current_blog_id();
switch_to_blog( Site::getRootBlogId() );
set_transient( 'peopleTypeTaxonomyQuery', $currentSite );
}
return $args;
}
add_filter('acf/fields/taxonomy/query/key=field_5c2d0d1860d0f', 'peopleTypeTaxonomyQuery', 10, 3);
function peopleTypeTaxonomyResult( $title ) {
$originatingSite = get_transient( 'peopleTypeTaxonomyQuery' );
if ( Site::isRoot() && $originatingSite ) {
delete_transient( 'peopleTypeTaxonomyQuery' );
switch_to_blog( $originatingSite );
}
return $title;
}
add_filter('acf/fields/taxonomy/result/key=field_5c2d0d1860d0f', 'peopleTypeTaxonomyResult', 10, 3);
//add_filter('acf/load_field/key=field_5c2d0d1860d0f', 'peopleType');
/*
* Set up custom query args received from AJAX requests.
*/
function peopleByTypeQuery( $args, $field, $post_id ) {
if ( ! Site::isRoot() ) {
$currentSite = get_current_blog_id();
switch_to_blog( Site::getRootBlogId() );
set_transient( 'peopleByTypeQuery', $currentSite );
}
$args['post_type'] = \Furman\PostTypes\People::POST_TYPE;
if ( isset( $_POST['query-args'] ) ) {
$termId = $_POST['query-args']['term_id'];
$args['tax_query'] = array(
array(
'taxonomy' => \Furman\Taxonomies\PeopleTypes::TAXONOMY,
'field' => 'term_id',
'terms' => $termId
)
);
}
return $args;
}
add_filter('acf/fields/post_object/query/key=field_5c27fa0480c22', 'peopleByTypeQuery', 10, 3);
function peopleByTypeResult($title) {
$originatingSite = get_transient( 'peopleByTypeQuery' );
if ( Site::isRoot() && $originatingSite ) {
delete_transient( 'peopleByTypeQuery' );
switch_to_blog( $originatingSite );
}
return $title;
}
add_filter('acf/fields/post_object/result/key=field_5c27fa0480c22', 'peopleByTypeResult', 10, 3);
function peopleSiteTaxonomyQuery( $args, $field, $post_id ) {
if ( ! Site::isRoot() ) {
$currentSite = get_current_blog_id();
switch_to_blog( Site::getRootBlogId() );
set_transient( 'peopleSiteTaxonomyQuery', $currentSite );
}
return $args;
}
add_filter('acf/fields/taxonomy/query/key=field_5c2d0d734763e', 'peopleSiteTaxonomyQuery', 10, 3);
function peopleSiteTaxonomyResult( $title ) {
$originatingSite = get_transient( 'peopleSiteTaxonomyQuery' );
if ( Site::isRoot() && $originatingSite ) {
delete_transient( 'peopleSiteTaxonomyQuery' );
switch_to_blog( $originatingSite );
}
return $title;
}
add_filter('acf/fields/taxonomy/result/key=field_5c2d0d734763e', 'peopleSiteTaxonomyResult', 10, 3);
function peopleBySiteQuery( $args, $field, $post_id ) {
if ( ! Site::isRoot() ) {
$currentSite = get_current_blog_id();
switch_to_blog( Site::getRootBlogId() );
set_transient( 'peopleBySiteQuery', $currentSite );
}
$args['post_type'] = \Furman\PostTypes\People::POST_TYPE;
if ( isset( $_POST['query-args'] ) ) {
$termId = $_POST['query-args']['term_id'];
$args['tax_query'] = array(
array(
'taxonomy' => \Furman\Taxonomies\Sites::TAXONOMY,
'field' => 'term_id',
'terms' => $termId
)
);
}
return $args;
}
add_filter('acf/fields/post_object/query/key=field_5c28136b11030', 'peopleBySiteQuery', 10, 3);
function peopleBySiteResult($title) {
$originatingSite = get_transient( 'peopleBySiteQuery' );
if ( Site::isRoot() && $originatingSite ) {
delete_transient( 'peopleBySiteQuery' );
switch_to_blog( $originatingSite );
}
return $title;
}
add_filter('acf/fields/post_object/result/key=field_5c27fa0480c22', 'peopleBySiteResult', 10, 3);
Here are the JS API hooks in use
document.addEventListener('DOMContentLoaded', () => {
acf.add_action('select2_init', function( $select, args, settings, field ){
console.log('SELECT2_SELECT:', $select);
console.log('SELECT2_ARGS:', args);
console.log('SELECT2_SETTINGS:', settings);
console.log('SELECT2_FIELD:', field);
// $select (jQuery) select element
// args (object) args given to the select2 function
// settings (object) settings given to the acf.select2 function
// field (object) field instance
});
/*
Uses the ACF JS API. These filters allow the post object fields to be filtered based on a separate acf taxonomy field.
*/
acf.add_filter('select2_ajax_data', function (data, args, $input, field, instance) {
//People Type filter
if (field[0].dataset.key === 'field_5c27fa0480c22') {
let taxonomySelect = $('.acf-field-5c2d0d1860d0f').find('.select2-hidden-accessible').select2('data');
data['query-args'] = {
'taxonomy': 'furman-person-type',
'term_id': taxonomySelect[0].id,
'term_title': taxonomySelect[0].text
};
}
//Site filter
if (field[0].dataset.key === 'field_5c28136b11030') {
let taxonomySelect = $('.acf-field-5c2d0d734763e').find('.select2-hidden-accessible').select2('data');
data['query-args'] = {
'taxonomy': 'furman-site',
'term_id': taxonomySelect[0].id,
'term_title': taxonomySelect[0].text
};
}
// return
return data;
});
});
Thank you for the reply John. It got me thinking, and it turns out the block editor comments were just leftovers from testing the new editor experience before switching to the old and copying some content over to other fields. I assumed these comments were incorrectly being added to all WYSIWYG fields, but it was just me.
Good to know, false alarm, topic solved.
The question is, how did these comments get put into an ACF WYSIWYG field. From what I understand they should only be added to the (now) standard WP editor.
Yes, there are reasons that ACF uses acf_the_content instead of the_content. There are some minor changes in the order that filters are added, but the main reason is that ACF does not run include all the filters for WYSIWYG fields that are included for the main content field because of bugs and other issues. For example it does not include “prepend_attachment” because this causes the attachment image to be prepended for every wysiwyg field. I’m sure there are others I’m not aware of.
I suspect that the reason that the content is not formatted when getting it from the cache is that ACF allows you to get the content of a WYSIWYG field unformattted, so it is not formatted before it’s added to the cache in the way that the main content editor is. You can solve this problem by always getting the unformatted value and then applying acf_the_content to it.
Instead of
the_field('some-wysiwyg-field');
do
$content = get_field('some-wysiwyg-field', false, false);
echo apply_filters('acf_the_content', $content);
This was already suggested to Elliot on Github, and the answer we got back was that this is something he is going to look into later on, once he finishes v5.8 I guess…
Personally, and for the time being, any container needs that I have for, like sections, tabs, etc… are put on hold, except one, called “section”, where I wrap a WYSIWYG field with the container code, and as a compromise for now, I will be using shortcodes that my theme and plugins provide to populate the content of that section. Not an ideal solution, but that’s the best I could do until ACF allows inner blocks, and my guess is that this has to be a new field type that needs to be created…
Anyone else willing to share their solutions regarding this issue, will be greatly appreciated, at least by me…
It seems that underscores in block name isn’t passing though.
So, textarea_block
as a block name is not working, instead use a name without underscores, something like textareablock
.
Try this:
if( function_exists('acf_register_block') ) {
acf_register_block(array(
'name' => 'textareablock',
'key' => 'textarea_block',
'title' => __('textarea'),
'description' => __('A custom pixel block.'),
'render_callback' => 'textarea_block_render_callback',
'category' => 'formatting',
'mode' => 'edit', // 'preview',
'icon' => 'admin-comments',
'keywords' => array( 'flexible', 'quote' ),
));
}
register_field_group(array (
'key' => 'textarea',
'title' => 'Text Area',
'fields' => array(
array(
'key' => 'textarea_title',
'name' => 'textarea_title',
'label' => 'Section Title',
'instructions' => '',
'type' => 'text',
),
array(
'key' => 'textarea_text',
'name' => 'textarea_text',
'label' => 'Text',
'instructions' => '',
'type' => 'wysiwyg',
),
),
'location' => array (
array (
array (
'param' => 'block',
'operator' => '==',
'value' => 'acf/textareablock'
),
),
),
));
P.S. I’ve added 'mode'=> 'edit'
to start ACF block in edit more.
Ah, until your last comment it was not clear that this was on the “Add Term” page.
At least that’s where I’m seeing this bug. For other users in this thread it seems to happen on other pages, too (but not for me).
I suspect this has something to do with WP submitting and reloading the fields on the page through AJAX and scripts needed for the wysiwyg field are not loaded properly, but I don’t know.
I’m pretty sure there’s no problem with WP core code here, because a standard taxonomy does not have a WYSIWYG-field, so there’s no need to handle such scripts.
You should submit a but report on this here
Thanks, will do.
Ah, until your last comment it was not clear that this was on the “Add Term” page. Yes, On this one specific page I am seeing the errors you describe.
I suspect this has something to do with WP submitting and reloading the fields on the page through AJAX and scripts needed for the wysiwyg field are not loaded properly, but I don’t know. You should submit a but report on this here https://www.advancedcustomfields.com/contact/
Deactivated all other plugins and even switched to the standard WP theme Twenty Sixteen, problem still exists.
Here are the steps to reproduce the error:
If you set the “delay” option for the WYSIWYG-field to “yes”, the error is not thrown after a term was added, but when you click on the field to init TinyMCE.
I’m not seeing an issue with wysiwyg fields. The next step would be the standard “Deactivate all other plugins”. There must be a JS conflict. If we know were to look we may be able to figure out a solutions.
Cleared browser cache, problem still exists in 5.7.7.
I’m scratching my head here a bit and brainstorming on how to isolate what field might be causing the issue.
Any WYSIWYG field will produce the error.
It also breaks the ‘append’ action after a new term is added in edit-tags.php, so any code that is relying on that callback is not working. I had to reload the page as an ugly workaround, so a bugfix would be greatly appreciated.
ACF does not call the hook the_content
when formatting a wysiwig field. Instead it uses acf_the_content
. Basically your first filter is never run for the wysiwyg acf field. You’d need to add your code for both hooks.
Thanks for that I can now make that work on its own I now need to combine three subfields a text field an image field and wysiwyg field is there a specific syntax to combining all three
having got the repeater form to work with text and wysiwyg formats I am now trying to add a sub field with an image I have it showing up on the edit page but when previewed I can only see url not the graphic am I needing to add a bit of code ? please excuse my ignorance I am new to coding.
<?php
// check if the repeater field has rows of data
if( have_rows('features') ):
// loop through the rows of data
while ( have_rows('features') ) : the_row();
// display a sub field value
the_sub_field('hero');
the_sub_field('content');
endwhile;
else :
// no rows found
endif;
?>
`
I found out the solution.
Please go to acf-qtranslate\src\acf_5\fields\wysiwyg.php line 32
Change add_action(‘acf/input/admin_footer’, array($this, ‘input_admin_footer’));
TO do_action(‘acf/input/admin_footer’, array($this, ‘input_admin_footer’));
I found out the solution.
Please go to acf-qtranslate\src\acf_5\fields\wysiwyg.php line 32
Change add_action(‘acf/input/admin_footer’, array($this, ‘input_admin_footer’));
TO do_action(‘acf/input/admin_footer’, array($this, ‘input_admin_footer’));
Can confirm same problem.
Custom theme using Timber (Twig engine), if i output default editor – all tags (br, p) are in place. Same output for ACF PRO WYSIWYG field – tags are stripped.
Tried to play with raw twig filter, add_filter autop – nothing.
As SKD mentioned changed function to the_field (in timber\twig case {{ fn(‘the_field’,’episode_editor’) }} ) – everything works as it should!
Note – there is no <p> tags in text editor (they gone if you click visual back) but wordpress rendered them on page.
ACF PRO version 5.7.5, WP 4.9.8
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.