Search Results for 'Wysiwyg'

Hi,

I am using ACF PRO with a WYSIWYG field on my WordPress site. When I paste text into the editor, I can see the line breaks as expected (see attachments), but once the content is published online, all those line breaks are lost, and the text appears without any breaks just paragraphs, merging everything inside the paragraphs together.

I have the following setup:

ACF PRO version (latest)

WordPress site with the AVADA theme (fully updated)

Everything is up to date.

I’ve confirmed the issue persists even with the latest version of ACF PRO and WordPress. For the time being, I am using a static WYSIWYG field from WordPress itself, which works fine and retains the formatting, but I’d prefer to load this content dynamically using ACF.

Would you be able to advise on how to fix this issue? Is there any setting or filter in ACF that could be affecting the line breaks?

Thanks in advance for your help!

Kind regards,
Alejandro

Problem: ACF converts shortcode into HTML, but I want to store it as plain text

Hi everyone!

I’m using an ACF text area field (not a WYSIWYG editor), and I’m adding the following shortcode to it:
[image id="1"]

However, after saving the post, ACF automatically converts the shortcode into an HTML image tag, and what I see in the field is:

<img class="img-fluid" loading="lazy" src="https://test.ru/wp-content/uploads/2023/03/summer-service.jpeg" srcset="..." sizes="..." alt="Employee" />

What is not the problem:
The field saves content correctly — if I add any other text next to the shortcode, it stays.

Output using pre shows that the content is already stored as HTML, not the original shortcode.

The field is a simple textarea, not a rich text editor.

What I want:
I want the shortcode [image id="1"] to be saved as is in the database — not converted into HTML.

What I’ve tried:
1. Rendering with do_shortcode() (works, but doesn’t prevent replacement):

if (!empty($more_advantages)) { echo do_shortcode($more_advantages); // This just renders the shortcode }

2. Trying to allow unsafe HTML output:

add_filter('acf/shortcode/allow_unsafe_html', '__return_true'); add_filter('acf/the_field/allow_unsafe_html', '__return_true');

3. Hooking into the ACF save process to escape the value:

add_filter('acf/update_value/name=your_field_name', 'save_shortcode_as_text', 10, 3);

function save_shortcode_as_text($value, $post_id, $field) {
return esc_textarea($value); // Attempt to escape the value
}

The question:
How can I prevent ACF (or WordPress) from parsing and converting my shortcode to HTML, and instead keep it as raw text?

Any help is appreciated!

If needed, I can also share the [image id="1"] shortcode definition and more info about theme/plugins.

I’ve created an ACF group containing three Wysiwyg fields. One of these three needs to have a custom background color (black) and custom text color (white).

I was able to successfully apply custom styles by using this filter in my functions.php file:

function custom_editor_style ($mceInit) {
  $background_color = '000000';
  $color = 'FFFFFF';
  $styles = '.mce-content-body { background-color: #' . $background_color . '; color: #' . $color . ';}';

  if (!isset($mceInit['content_style'])) {
    $mceInit['content_style'] = $styles . ' ';
  } else {
    $mceInit['content_style'] .= ' ' . $styles . ' ';
  }

  return $mceInit;
} 
add_filter ('tiny_mce_before_init', 'custom_editor_style'); 

I attempted to target a specific editor by adding the ID of the container iframe as a parent, but it didn’t take:

$styles = '#acf-editor-77_ifr .mce-content-body { background-color: #' . $background_color . '; color: #' . $color . ';}';

Is there a way to target a single Wysiwyg instance among others with custom editor styles?

Any help appreciated!

Today, all my WYSIWYG editors on the site lost visual tab and just show default buttons and text view.

Strange thing is, that only happened on local site, but on live site tinymce works normally, with several custom toolbars and dropdowns.

All plugins and settings on the sites are the same, and there are no js errors on either. I tried disabling all plugins that could mess with tinymce (e.g. Advanced Editor Tools) but nothing changed. Removed all my code from functions.php, also nothing changed. Live site still works, local site doesn’t:

I need ideas, where to look, what more can I check to find where’s the issue.

If you have an ACF block with mode => edit and it contains a WYSIWYG Editor field in visual mode, positioned below a newly created paragraph, WordPress incorrectly detects the iframe in WYSIWYG Editor as the new paragraph and scrolls down to it.

🚨 However, if the ACF block is above the new paragraph, the issue does not occur.

### ✅ Quick fix:
Change all blocks from 'mode' => 'edit' to 'auto':

acf_register_block_type([
    'mode' => 'auto',
]);

📌 This will fix the issue, preventing WordPress from scrolling to the WYSIWYG Editor.

I was able to recreate this in a fresh install of WordPress using TwentyTwentyFive theme and modifying the code enough to create two custom ACF Gutenberg Blocks using acf_register_block.

In one of these blocks I apply a WYSIWYG field that is initiated on page load (initiation is not deferred to onclick). The other block contains a single text field.

I then begin adding these blocks to my page. WYSIWYG block first, about a half dozen text blocks, and then I end with another WYSIWYG block. If I then go back up-page and insert a block of ANY type, as soon as I insert the block my cursor focus is hijacked and placed in the last instance of a WYSIWYG field.

This is occurring on at least two of my production sites that are both using ACF Pro 6.3.12. And again I was able to replicate this with a fresh install of WordPress also using ACF Pro 6.3.12.

Is anyone else experiencing this issue?

So question. I have a ACF Field Group that I am using a repeater in as an accordion for an FAQ section. Each item has a header (text), sub header (text) and content section (WYSIWYG Editor). In the ACF editor for the ‘header – presentation’, I added a new class ‘smaller-h5’, and added it to the ‘Wrapper Attributes’ section… which all seems to work fine. See the two screenshots.

Issue is, the class doesn’t seem to be appearing on the page ‘header’ section.

<h5 class=”acf-element acf-element-heading [it should appear here]”>XXXX</h5>

I did republish the page after I made the ACF changes, so upon the republish it should have grabbed the latest ACF changes… but it didn’t seem to. Cache is not an issue either.

Is there something I have to do to publish ACF field group data? I am fairly new to ACF! Thanks for the info!

I am using custom field to display video from Vimeo. In admin dashboard it show but not in front end, I tried with you tube as well same results. Thanks for your help

I’m experiencing an issue with oEmbed for YouTube URLs. This functionality was working previously but recently stopped displaying videos for logged-out users.

Current Behavior:
When logged into WordPress admin and viewing the frontend, the YouTube embed displays correctly.
When logged out (as most of my users would be), the video does not appear, leaving a blank space.
Troubleshooting Steps Taken:
Checked for possible permissions issues and reset them via the WP Engine portal—no change.
Cleared cache in WP Engine.
Tested embedding the YouTube URL in a WYSIWYG editor—same issue persists.
Reviewed the console logs, but the only error I see is attached in the screenshot.
Restored the site to a backup from 3 days ago—issue still persists.
Context:
The issue occurs across multiple podcast pages, such as this one:
Podcast Episode 3 – Why Clear Metrics

Given that WP Engine support couldn’t resolve the issue and I’ve run out of ideas, I’d appreciate any insight from the community. Could this be related to caching, embed restrictions, or something specific to the oEmbed implementation in ACF?

Thank you in advance!

As title suggests, I am interested to know whether I am able to run the same 1 site license at main site but also in a subfolder in same public_html directory? I made a full copy of wordpress site for testing some issues with a plugin developer, and today I changed a WYSIWYG field to a text area field type, hit save and boom!> whole page destroyed back to default blog post white background, etc. when I went into visual builder (divi theme) & page appeared correctly again. This bug was strange/alarming, but likely related to Divi. However, ACF content is gone from page and ACF is demanding I deactivate and reactivate my license. If I enter license code there, will ACF fail to work on the real (live) site in root dir? How can a ‘development sites’ license be added manually in account, or what other info/solution do I need to be aware of? Also, if not possible, can I install regular ACF (via zip not .org per recent announcements), before removing pro from the test/dev site and would this still keep my field setups? TIA

I’m using WYSIWYG fields within Flexible Content blocks. I’m running into an issue which is messing up my layout. The content I put in the WYSIWYG field – in this case just 1 paragraph – is being displayed correctly. However, it’s showing as follows in the HTML code:

<p></p>
<p>My written content is here</p>
<p></p>

These empty tags are using up extra space, thus messing up my layout.

I’ve found solutions online to turn off ‘wpautop’ but the way I understand it, that would completely stop ACF from wrapping the content in a tag, which is not what I want.

Hello,
for one text field i would basically only need the option to make text bold. I can add a “custom” setting for the wysiwyg editor which would only feature the [b] button – but switching to the text tab i get all the buttons like [i] for italic and link and so on… I would love to have the same reduced options in the text tab. Is there a way to edit/remove the buttons shown in the text tab of the wysiwyg editor?
Thanks! Cheers! t

I am trying to figure out how to modify Search Results so it will also output the ACF Name or Label attached to the content. I have a number of fields attached to that custom post type, and I need to output the name of which ACf field the search term was found in.

I used the code at http://codex.wordpress.org/Plugin_API/Filter_Reference/posts_join to return the post that has the ACF field, but I need to output the actual field name or label in the search results.

For example, I have a search term of “Frustration”. “Frustration” is located in an ACF Wysiwyg field attached to a post. The post has a number of other WYSIWYG fields as well. I am trying to figure out how to output just the name of the field that “Frustration” is found in when I output the loop.
The end result would be something like


<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
">
<?php the_title(); ?><?php THE LABEL OR NAME OF THE FIELD IT'S LOCATED IN ?>

<?php endwhile; endif ?>

How can I find that?


Hi,

is it possible to add a new button to the editor toolbar?
It seems that it is only possible to remove and add default ones.
I would like to be able to add a button that inserts a customised tag on click.

Thank you,
Diego

Hi!

I’m hoping to create a one-time-use PHP script to update ACF data belonging to blocks, in a number of posts on a site I’m working on. The block in question has a repeater field with three fields, and I want that to be moved into a group.

Repeater field name: ‘rep_items’
Repeater subfields: ‘heading’ (Text), ‘content’ (Wysiwyg), ‘image’ (Image)
New group name: ‘acc_content’

The overall ACF field group has been updated, using drag-and-drop to move the existing repeater into the group. I have a high number of populated blocks across pages and posts in the site, which is why I’m very keen to use a script for this; I also hope to leverage it in future for similar tasks, so this is a learning experience too.

The issue I’m having is that it seems quite difficult to rearrange the data in this way. If I use parse_blocks() on my post->post_content, find the blocks I’m looking to modify, and examine block[‘attrs’][‘data’], the repeater’s content seems to be deconstructed and sits at the root level, with key string names that are indicative of the structure I’d expect to see when working at the post-meta level. I think I understand now that this is serialised for storage against Gutenberg blocks, and this might not happen if I were looking at a post’s ACF fields.

I’ve examined this same data on a block populated using my updated structure with the repeater inside a group, and I can see that the repeater field names are prefixed with the group, but not in a way that I believe can be parsed safely by ACF without reference to other fields. The data looks like this:

acc_content_rep_items_0_heading: "Title 1"
_acc_content_rep_items_0_heading: "field_somefieldid"
acc_content_rep_items_0_image: "625"
_acc_content_rep_items_0_image: "field_somefieldid"
acc_content_rep_items_1_heading: "Title 2"
_acc_content_rep_items_1_heading: "field_somefieldid"

There are also fields “acc_content” and “_acc_content”, which obviously represent the group. I can almost see the connections here, but I’m not certain on them.

This is what the content looks like when it IS adhering to the new structure, of course. What I want to do is migrate the data that doesn’t reference the ‘acc_content’ group. It won’t be sufficient to just build a fallback into my block’s PHP to find the old structure and render it; I want content authors to be able to go into blocks populated in the old structure, and see the content, not to have it hidden in legacy fields in the DB that are supported as a patch.

I feel as though, in the migration script, I may need to query the ACF field group definition – as opposed to just playing blindly with the data – if for no other reason than to know what field_ID to insert for the group. Or maybe I need to just go to my ACF field group’s JSON, take that field_ID, and manually add it and all the other internal, underscore_prefixed fields and construct this the hard way.

Are there any tricks or ACF library utility methods that I can employ to make this process easier for myself? What are your thoughts on doing this, generally?

Thanks for any assistance you can provide.

Hello!

I am using ACF with custom post types for a review site. This means I am using the WYSIWYG editor for the styling on these pages. However, ACF is stripping all the styling from the TinyMCE editor when it shows on the frontend.

Please advice how I can fix this?

Also please be specific with instruction.

Many thanks

Hello.

I have configured the Flexible Content Field as follows:

Field Type: Flexible Content
Field Name: cf_person (Key: field_xxxxxxx)

Layout
Name: cf_person_set

Fields:
Name: cf_person_text_ja (Key: field_yyyyyy)
Type: WYSIWYG Editor

I want to add a new row to the flexible content and set the value of “cf_person_text_ja” to “Dummy Text” when I save a post.
I want to do this in the functions.php file.

The following code doesn’t work:

function publish_post_transition_person($post_ID) {

  $row = [
    'cf_person_text_ja' => 'Dummy Text',
  ];

  update_field('cf_person_set', $row, $post_ID);

  return false;

}

add_action( 'save_post', 'publish_post_transition_person' );

I can add my custom TinyMCE buttons to the “Visual” toolbar, but I am unable to add it to the “Code” toolbar where I want it. Does anyone know how to do that?

I am using the ‘acf/fields/wysiwyg/toolbars’ to add ‘customClassButton’ to the $toolbars. My custom toolbar is called ‘Plus’.

$toolbars[‘Plus’] = array(
array(
“wp_adv”,
),
array(
“customClassButton”,
“bold”,
“forecolor”,
“removeformat”,
“charmap”,
“outdent”,
“indent”,
“undo”,
“redo”,
“custom_button”,
“wp_help”,
“wpview”
),
);

I have a site that’s built using ACF Pro and Flexible content fields.

All content on each page is built using the Flexible Content Fields. Most pages has over 20 Flexible content fields to structure the content – some being WYSIWYG fields, galleries with various settings, content fields pulling content from other CPTs etc etc.

There are more than a 2000 pages built with these many Flexible Content fields.

However, when I look at the path WordPress is headed, it looks like Gutenberg is becoming more and more the standard.

I’m looking at ACF Blocks as an alternative to Flexible Content Fields.

However, I don’t want to manually move 2000+ pages with lot of content fields into lots of ACF Blocks.

If I decide to transition my site to Gutenberg, what options do I have to merge the Fields to Blocks? Are the ways to automate that or re-code the content to match blocks?

I wanted a field like the “message” field but with a WYSIWYG editor instead of the simple textarea. I was able to add it using the wysiwyg type however the editor doesn’t get initialized when it is added to the field group.

I’m able to load javascript on the backend but I can’t, for the life of me, figure out how to initialize the editor on load (there doesn’t seem to be a render_field action for the field groups admin page?).

What’s interesting is that if I add my custom field to the group, save the field group, and reload, the field is initialized as intended.

Any ideas?

I know this is a basic question, but do I need to escape the WISIWYG editor return before echoing?

I see that it is run through acf_the_content and I think that is already doing this but I just want to be sure. I’m not trying to filter anything additional out of the content.

Thanks

Hi there,

I am using divi and the ACF plugin to create a template for a custom post type. In these posts I need to include unique Hubspot forms that come as code snippets. I have tried using the WYSIWYG field however it displays the code as plain text rather than displaying the form as intended.

Does anyone have a fix for this that would allow me to create a custom field for the form code snippets that would allow for unique Hubspot forms on each post?

Thanks

Hi, I encounter an issue with the Wysiwyg editor ACF field. The p tags are not rendering in the front, I searched online and in the ACF forum for solutions but didn’t fond any.
I am using Elementor pro (advanced plan) for the front.
Do you have any idea of ho to fix that?

Thank you.

Not sure if this should be reported here or in the wordpress trac – but maybe someone had similar issue and found proper solution for it.

For sure it’s related with the WordPress core file.

After adding ‘wysiwyg’ field to the attachment modal – it’ll trigger ajax call on every single change – this will flood the database with the requests and create lots of unneeded data in _postmeta table.

I have built many sites using ACF Flexible Content field and created pre built components – image slider, faqs block, triple horizontal images, quote etc etc – basically giving the user the option of building a much richer page than possible with just a single wysiwyg field while maintaining some sort of content control. My issue has always been you have to either output the core wysiwyg content before your group of flexible content elements or after or alternatively you disable the default editor and build flexible content elements for paragraph of text, paragraph of text with title etc etc. My question is, with the release of gutenberg and the ability to create custom blocks within it, has this become the standard for creating multiple element content or does ACF flexible content still have many advantages over it?