Hi James, thanks for looking into this. On further investigation it seems to be a conflict with Woocommerce. The bug does not appear without Woocommerce installed and active, so the steps to reproduce are…
1) install fresh WordPress
2) install ACF Pro
3) install Woocommerce
4) add ACF wysiwyg field to pages
5) add an embeddable youtube video URL to the wysiwyg field on a page (video appears)
6) Save page
Now when you navigate away you get “Changes you made may not be saved.”. Sometimes you have to click on the page (say, to close the ‘page updated’ message) to get the ‘unsaved changes’ message when navigating away, but other times it appears just by reloading via browser address bar.
Disable woocomemrce and the problem goes away. Add the youtube URL to the main content rather than the ACF wysiwyg and the problem does not occur (this only occurs with auto embed URLs in the ACF wysiwyg).
My issue is as follows. I am creating a shortcode which outputs the ACF form with a custom field group. Some of those fields will update the corresponding user fields. I want to have users update their profiles using ACF and custom fields like apartment number and phone(s)
1. First problem is that the ACF form outputted by the shortcode is going outside of the WYSIWYG editor and the container. You can see that in Screenshot A. B. and C.
2. My other problem is that I want the email to not update if it already exists. So if the user enters an email already taken by another user I’d like it to show an error at the top of the page and not submit any values. Actually it would be even better if it showed as an error. See Screenshot G. But what happens is it posts and then the error is just on a page with nothing else. See screenshot D. The email is also updated anyway – see screenshot E. Although the ACF is updated but not the WordPress user which makes sense because it must be unique. See screenshot F.
Screenshots
ACF form generated from field group. Email, first name, lastname, meant to update the corresponding user fields.
https://zorahosting.com/user form.png
Here is the container showing a custom class ‘form-update-container’. This is the container of the shortcode
A. https://zorahosting.com/form-update-container.png
This is the shortcode in the WYSIWYG WordPress editor
B. https://zorahosting.com/userupdate-shortcode.png
Shortcode is not showing up in the container but outside of it
C. https://zorahosting.com/outside-of-container.png
Error: ‘the email already exists’ shows up on a new page. I’d like the error to show up somewhere else. either at top or bottom of form. In the #message part above the form.
D. https://zorahosting.com/email-exists-in-window.png
Email is updated even though it exists. Although the ACF email is allowed to update. It has not updated the user because WordPress won’t allow to of the same email.
E. https://zorahosting.com/email-updated-anyway.png
ACF email updated not user from email that existed on form submit
F. https://zorahosting.com/acf-updated-not-user.png
Red error box generated by regular expression ( this is not an email )
G. http://zorahosting.com/red-error-box.png
Here below is my code
The shortcode outputting the form:
– – – – – – – – – – – – – – – – – – – – – – –
function zUpdate( $atts, $content = null ) {
$current_id = get_current_user_id();
$user_id = 'user_' . $current_id;
$options = array(
'post_id' => $user_id,
/* my field group grabs unit, home phone, and cell phone acf */
'field_groups' => array('3307', ),
'submit_value' => 'Update'
);
$form = acf_form( $options );
return $form;
}
The shortcode updating the form with ACF data updating the WP user data
function my_acf_save_post( $post_id ) {
if( empty($_POST['acf']) ) {
return;
}
if( is_admin() ) {
return;
}
//get current email before change
$current_email = get_the_author_meta('user_email', $wp_user_id);
if( $_POST['post_id'] != 'new' ) {
$emailField = $_POST['acf']['field_5ae7a967009de'];
$wp_user_id = str_replace("user_", "", $post_id);
if (isset($emailField)) {
if (email_exists( $emailField )) {
echo "<p>Email already exists</p>";
update_field('field_5ae7a967009de', $current_email, $post_id);
} else {
$args = array(
'ID' => $wp_user_id,
'user_email' => esc_attr( $emailField )
);
wp_update_user( $args );
}
}
$first_name = $_POST['acf']['field_5ae7a4b8e5948'];
$last_name = $_POST['acf']['field_5ae7a8cf8e3e0'];
$user_data = wp_update_user( array( 'ID' => $wp_user_id, 'first_name' => $first_name, 'last_name' => $last_name ) );
}
return $post_id;
}
both are called at the end of course:
– – – – – – – – – – – – – – – – – – – – – – –
add_action('acf/save_post', 'my_acf_save_post', 1);
add_shortcode('userupdate', 'zUpdate');
I would like to report that I’m experiencing the same issue. A front end ACF form is used to create a pending CPT and contains image fields. The uploaded images show up in the List view in Media Library but not in the Grid view. So they are successfully uploaded and for the most part very much the same as any other image – I’ve not been able to pinpoint the difference by looking in the database so far.
Unfortunately switching the uploader to the ‘WordPress’ media uploader isn’t a good solution for this site because we don’t want the users to be able to browse and select images that are already in the Media Library.
My client noticed it out for the same reason as OP’s client – they needed to add the image to another field. WordPress uses the Grid View for the Media Library that pops up when attaching images to fields or adding them to the WYSIWYG, so the images can’t be added to any other fields.
@danielgc, Your simple style solution within the action admin_head
, was all I needed. You can take things further by tracking down specific iframes on your posts and pages like so…
add_action('admin_head', 'admin_styles');
function admin_styles() {
?>
<style>
iframe[id^='wysiwyg-acf-field-favicon_'] {
min-height:40px;
}
</style>
<?php
}
?>
In my case, I’m targeting only the favicon fields on my WP admin pages, to have a height adjustment.
Hello! I have problem with Wysiwyg Editor when I’m using WordPress 4.9.5 + ACF PRO (Version 5.6.10) + qTranslate-X (Version 3.4.6.8) + Advanced Custom Fields: qTranslate (Version 1.7.23).
If I choose tabs Visual $ Text in field settings:
On post/page edit page in Wysiwyg Editor I see the only tabs and not formatted text in text area, and no toolbars.
If I click on any tab, visual or text in Wysiwyg Editor the toolbars become visible.
If I choose single tab Visual OR Text in field settings:
On post/page edit page in Wysiwyg Editor I see the only not formatted text in text area, and no toolbars.
And if I’m trying to click somewhere on Wysiwyg Editor the toolbars are not appear.
I can send screen video 🙂
I solved this with acf/render_field_settings/type=wysiwyg and acf/render_field/type=wysiwyg, like this: https://gist.github.com/stianandreassen/6dc87c88c43b2bc43d0ea1a94bd5cd1e
With this I get a number
field on each WYSIWYG where I can define the desired height for the Editor.
Yes, you can just change a textarea to a wysiwyg field and the content in the db will not be lost. The only difference is in formatting. wysiwyg fields follow the rules of wysiwyg fields and are formatted using “the_content” filters while textarea fields are only formatted using whatever options you’ve got set for that textarea. There may be some differences in the display of the content on the front of the site.
I just realised that the default taxonomy description is also a wysiwyg editor (never realised this. I never use it).
Have you tried that as well ?
Forget that last part (for now).
I just did a test. I added a wysiwyg field to my taxonomy and added my shortcode, which is [home_url].
When I var_dumped this field as follows:
var_dump(get_field('content','{taxonomy}_{term_id}')); exit;
it gives me my home_url.
If I then echo it on my page it produces the same value.
And I didn’t apply any filter or do something extra. This is straight out of the box. So my first guess now is you have something activated (like a filter or so) which stops this shortcode from outputting.
Have you tested this with all plugins deactivated and on a default WP theme ?
Hi Beee,
Thanks for response, yes the shortcode registered. If I am using the standard WP WYSIWYG it worked. Any suggestions?
Thanks
I have copied content-product_cat.php to my theme Woocommerce folder and tried this answer
/**
* woocommerce_after_subcategory hook.
*
* @hooked woocommerce_template_loop_category_link_close - 10
*/
do_action( 'woocommerce_after_subcategory', $category ); ?>
<?php
$queried_object = get_queried_object();
$taxonomy = $queried_object->taxonomy;
$term_id = $queried_object->term_id;
$thumbnail = get_field('productdesc', $queried_object);
$thumbnail = get_field('productdesc', $taxonomy . '_' . $term_id);
?>
<?php the_field( 'productdesc', $queried_object ); ?>
But it doesnt help. Any help please!
I would add a post object field to your flexible content field that returns the page ID. It provides a page link. When you loop through the flexible content field you can add logic: if the post object field = the page you want the content to appear, echo the WYSIWYG field. I can guide you through this if you are unfamiliar.
What type of field is your project_total_prints field? I’m assuming it is a WYSIWYG field. And are you trying to get the number of media (pictures) that have been uploaded to this field?
change
function remove_empty_tags_around_shortcodes_acf_wysiwyg( $value, $post_id, $field ) {
to
function remove_empty_tags_around_shortcodes_acf_wysiwyg( $value ) {
and
add_filter('acf/load_value/type=wysiwyg', 'remove_empty_tags_around_shortcodes_acf_wysiwyg', 10, 1);
to
add_filter('acf_the_content', 'remove_empty_tags_around_shortcodes_acf_wysiwyg', 10, 1);
See the notes here https://www.advancedcustomfields.com/resources/wysiwyg-editor/
I was able to solve the problem of birthdays by calculating age through this tip.:
doitwithwp
And put to work in the taxonomy with adataption of the display:
$rows = get_field('ocupacao', $taxonomy . '_' . $term_id);
After I just needed to create a wysiwyg field it could be just text and put the shortcode and the magic happens =)! I hope to help others who have doubts =).
[show-my-age birthday="02/13/1985"]
.
This is supposedly solved but I’m still having a problem. This does not work:
remove_filter ('acf_the_content', 'wpautop');
First, my WYSIWYG fields are in a repeater, if that makes a difference.
Second, my fields contain shortcodes. If I output my fields like this:
the_sub_field('wysiwyg_field', false, false);
The extra line breaks and p tags are gone, but shortcodes are not executed.
update: guy_b’s solution did solve the issue.
Should be admin option on the field(s) itself see https://www.advancedcustomfields.com/resources/wysiwyg-editor/
I understand the UX reasoning, but we have the wysiwyg field where primarily if not always links being added would and should be external. To be clear, i am just looking to make the insert link option for open in a new tab be selected by default. We can still unselect it when appropriate.
Hi. As with others on the forum, with multiple ACF wysiwyg fields on a post, I am not able to access the Visual mode. The content displays only in Text mode.
I don’t see any errors in Javascript Console.
The only plugins I have installed are ACF Pro, jQuery UI Widgets, Updraft Plus, and Ninja Forms.
The problem goes away when I deactivate Ninja Forms 3.2.16.
Separately, I would like to request changing the text from “Click to initialize TinyMCE” to something more user-friendly. As a developer, I understand what this means, but as a user, my clients don’t necessarily know what TinyMCE is and the text is not intuitive. Perhaps something like “Click in the box to edit the content”.
(Lastly, when I tried to start a new topic on this issue using John Huebner’s link above, I got an error “Failed to send” without any explanation.)
Is there any way to debug these specifically? I am having a similar issue on my live site, cant reproduce it on my local site. Presumably an offending plugin should be something that uses tiny-mce i.e. has a WYSIWYG editor on the edit page?
My error code:
tinymce.min.js?ver=4607-20180123:14 Uncaught TypeError: Cannot read property 'onpageload' of undefined
at e (tinymce.min.js?ver=4607-20180123:14)
at k (tinymce.min.js?ver=4607-20180123:14)
at h.l.bind (tinymce.min.js?ver=4607-20180123:1)
at o.bind (tinymce.min.js?ver=4607-20180123:3)
at Object.init (tinymce.min.js?ver=4607-20180123:14)
at e (load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,thickbox,jquery-ui-tabs,wp-mediaelement,heartbeat,autosave,suggest,wp-ajax-response,jquery-color,wp&load[]=-lists,postbox,jquery-ui-menu,wp-a11y,jquery-ui-autocomplete,tags-suggest,tags-box,underscore,word-count,post,editor-expand,shor&load[]=tcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,im&load[]=gareaselect,image-edit,svg-painter,wp-auth-check,media-upload,jquery-ui-button,editor,quicktags,wplink,wp-embed&ver=4.9.4:670)
at HTMLDocument.<anonymous> (load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,thickbox,jquery-ui-tabs,wp-mediaelement,heartbeat,autosave,suggest,wp-ajax-response,jquery-color,wp&load[]=-lists,postbox,jquery-ui-menu,wp-a11y,jquery-ui-autocomplete,tags-suggest,tags-box,underscore,word-count,post,editor-expand,shor&load[]=tcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,im&load[]=gareaselect,image-edit,svg-painter,wp-auth-check,media-upload,jquery-ui-button,editor,quicktags,wplink,wp-embed&ver=4.9.4:670)
at a (tinymce.min.js?ver=4607-20180123:1)
at HTMLDocument.p (tinymce.min.js?ver=4607-20180123:1)
e @ tinymce.min.js?ver=4607-20180123:14
k @ tinymce.min.js?ver=4607-20180123:14
l.bind @ tinymce.min.js?ver=4607-20180123:1
bind @ tinymce.min.js?ver=4607-20180123:3
init @ tinymce.min.js?ver=4607-20180123:14
e @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,thickbox,jquery-ui-tabs,wp-mediaelement,heartbeat,autosave,suggest,wp-ajax-response,jquery-color,wp&load[]=-lists,postbox,jquery-ui-menu,wp-a11y,jquery-ui-autocomplete,tags-suggest,tags-box,underscore,word-count,post,editor-expand,shor&load[]=tcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,im&load[]=gareaselect,image-edit,svg-painter,wp-auth-check,media-upload,jquery-ui-button,editor,quicktags,wplink,wp-embed&ver=4.9.4:670
(anonymous) @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,thickbox,jquery-ui-tabs,wp-mediaelement,heartbeat,autosave,suggest,wp-ajax-response,jquery-color,wp&load[]=-lists,postbox,jquery-ui-menu,wp-a11y,jquery-ui-autocomplete,tags-suggest,tags-box,underscore,word-count,post,editor-expand,shor&load[]=tcode,backbone,wp-util,wp-backbone,media-models,wp-plupload,wp-api-request,media-views,media-editor,media-audiovideo,mce-view,im&load[]=gareaselect,image-edit,svg-painter,wp-auth-check,media-upload,jquery-ui-button,editor,quicktags,wplink,wp-embed&ver=4.9.4:670
a @ tinymce.min.js?ver=4607-20180123:1
p @ tinymce.min.js?ver=4607-20180123:1
I’ve imported an existing WordPress install and the ACF fields appear on the pages and posts but all of the WYSIWYGs are not showing even though the Content Editor checkbox is unchecked in all of the field groups… how do I figure out what’s going on?
Please ignore I found the problem on another thread, it needs to be a WYSIWYG in order for them to work.
You could make use of remove_filter() and have your field call like this:
the_field('wysiwyg_field', false, false);
If that is stripping away what you need, try this:
the_field('wysiwyg_field', true, true);
If that still doesn’t generate what you want, in the WYSIWYG field settings, change the editor mode to ‘Text’ which will retain all of your HTML tags. You won’t get a WYSIWYG preview on edit screens but your formatting will remain intact.
See this thread for more info: https://support.advancedcustomfields.com/forums/topic/disable-auto-p-tags-in-wysiwyg-editor/
If you want to insert shortcode and have it show on the front end, use a Text field and then use this in your template:
<?php $shortcode = get_field( 'your_text_field' ); ?>
<?php echo do_shortcode( $shortcode ); ?>
That’s how I do it. The WYSIWYG field will strip out shortcodes.
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.