Search Results for 'Wysiwyg'

Hi all, really hoping I can get some help.

I’m running ACF 6.1.4 & WordPress 6.2. I’ve created a new Page and created a few repeater fields for it: one with a text subfield and an image subfield, the other with a URL subfield and an image subfield.

However, every time I add an image, text or URL in their respective subfields and press “Update,” my entries vanish. This is the crux of my problem.

I have another repeater field on this same page, but it only contains subfields for Text and a WYSIWYG. These are functioning correctly, and my entries save whenever I add them and then update the page.

Why are my entries disappearing? How can I go about fixing it?

Thank you so much for any help.

Hi I have been trying to get the acf color field to show up as the link color and h1, h2 etc. in the wysiwyg editor. I know the custom post would need to be published first though I still haven’t been able to get it to work.
I have tried adding a function to use a stylesheet however because it is php it isn’t recognising it.
There is a way to lock the css however that doesn’t work for the wysiwyg editor.

Another way might be to use jquery for the acf editor from here but not sure how to get it to work:

Does anybody have success with enabling this for clients? It would make it easier for them to see the color as they enter the content. Yes each post will have a different color depending upon what they have chosen.

Thanks

I tried reporting this to CF7, but cannot discuss paid plugins apparently in the WP forums: https://wordpress.org/support/topic/cf7-breaks-acf-pro-wysiwyg-in-widget-block/

This is a very specific use case.

To duplicate
– Create a BLOCK element using ACF Pro
– Create ACF Repeater assigned to this block, in the repeater have a WYSIWYG editor (my case it is in a repeater, have not tested outside of the repeater)
– In the Widget area, add this new ACF block
– You will see that you cannot switch between Visual / Code editor and the text may start off as white on white background

The following error shows in console
– wp-tinymce.js?ver=49110-20201110:3 Uncaught TypeError: Cannot read properties of undefined (reading ‘onpageload’)
– at wp-tinymce.js?ver=49110-20201110:3:354147
– at e (wp-tinymce.js?ver=49110-20201110:3:354205)
– at Se.y.bind (wp-tinymce.js?ver=49110-20201110:3:11640)
– at Object.M as bind
– at Object.init (wp-tinymce.js?ver=49110-20201110:3:355591)
– at n (editor.min.js?ver=6.2:2:1864)
– at HTMLDocument. (editor.min.js?ver=6.2:2:248)
– at C (wp-tinymce.js?ver=49110-20201110:3:10800)
– at HTMLDocument.d (wp-tinymce.js?ver=49110-20201110:3:10946)
— (anonymous) @ wp-tinymce.js?ver=49110-20201110:3
— e @ wp-tinymce.js?ver=49110-20201110:3
— Se.y.bind @ wp-tinymce.js?ver=49110-20201110:3
— M @ wp-tinymce.js?ver=49110-20201110:3
— init @ wp-tinymce.js?ver=49110-20201110:3
— n @ editor.min.js?ver=6.2:2
— (anonymous) @ editor.min.js?ver=6.2:2
— C @ wp-tinymce.js?ver=49110-20201110:3
— d @ wp-tinymce.js?ver=49110-20201110:3

Note: the block works fine on pages/posts, just breaks in widgets

Disabling CF7 does fix the error and the widget will work fine

This seems to be an issue with the TinyMCE integration, but without CF7 being active on the widget page I am uncertain why they would be interfering with the TinyMCE

if anyone has any information or ideas on this I would love a solution, unfortunately I won’t be getting that from CF7 developer as he has made it clear he is uninterested in fixing it (see WP forum thread above)

Hi all,

I am using a form on the front-end where user can upload a post including the Wysiwyg Editor with file upload. But I want to restrict the type of files they can upload (e.g. only jpg and png) and also the file sizes (e.g. not more then 300 kb).

Are there any filters I can use for this? or how to set this up?

Thanks in advance!

I already use this to restrict the file visibility for different user types.

After upgrading to WordPress 6.2, the WYSIWYG visual editor is blank. I can enter content with the text editor, but can’t manage images, etc.

Hi everybody!

I have a clients blog, thats done with Divi theme and I am using ACF to add a ‘reference’ field to the posts (the blog is medical).

And today I realized that the OL lists (numbered), when it has more than 9 items, it renders as 1 – 9, and then 0, 1… again, instead of 10, 11…

BACKEND: https://www.awesomescreenshot.com/image/37928078?key=3fa24847aab4c8b4c1eaf81ba4b87516
FRONTEND: https://www.awesomescreenshot.com/image/37928099?key=d5e9fabb6211bee050f884c49b0a8948

It’s a normal wysiwyg field, and the list is a regular numbered one.

Can anyone shed light about this?

Thanks a bunch!

This should be a feature, as simple as that. Please please please add this. It was a request since the dawn of time when ACF started and there are various topics and posts on it and the feature request was marked as solved because someone came up with a code fix.

However that shouldn’t be needed. It should be possible to do it in the ACF UI.

It’s incredibly inconsistent to have a textarea field allowing a height setting and not the WYSIWYG field.

Please do the decent thing and get this tiny change implemented, it will save so much time!

I’m would basically need to replace the standard editor field with an ACF field. The reason is that I would like to have the editor in a reduced setup, no image button – but with its own label – just like a regular wysiwyg-acf-field.
I could of course remove/ hide the standard editor and use an ACF field instead – but then I would a) have to move all the content that is already in place and b) i could not use the standard functions the_content() and the_excerpt().
I hope somebody has done this before? Thankyou!

I have a page called Social Gallery.

I have a custom gallery field called Gallery, which is located on the Social Gallery page.

I can add images to the gallery when I edit the page. When I click on one of the images I’ve edited, I get Title, Caption, Alt Text and Description fields.

How can I add WYSIWYG buttons to the description field?

All I need is a bold, an italic, and a link button, so that my clients who aren’t very HTML-gifted can add those things to their descriptions.

Hi! I want to remove the extra lines that get created when I load WYSIWYG editor type text content from an ACF field. As far as my research goes it has something to do with the wordpress function: wpautop. But I am not sure because all the solutions that surround this approach do not show any effect or break the site.

I am loading the content with either a shortcode tag or a dynamic token tag using the addons from dynamicooo or e-addons.

The content are two lines of text:

Test-First-Line
Test-Second-Line

When I load this Text into a Title-, Button or Text editor-widgets text field in the elementor editor and add text “test-before” with the before and “test-after” with after advanced options of the dynamic tag dialog I get this result:

test-before
Test-First-Line
Test-Second-Line
test-after

But what I should (or want to) get is:

test-beforeTest-First-Line
Test-Second-Linetest-after

Meaning I want to keep my <br> linebreaks from the ACF WYSIWYG Editor content but no additional lines before and after.

These have been the solutions I have allready tried within the dynamic tag dialog:

[acf:acf_field|strip_tags()]
<- nothing changes, extra and normal linebreaks are still there

[acf:acf_field|wpstrip_all_tags()]
<- nothing changes, extra and normal linebreaks are still there

[acf:acf_field|576|wp_strip_all_tags()]
<- nothing changes, extra and normal linebreaks are still there

These have been the solutions I have allready tried to add by using the Code Snippets Plugin (Run snippet everywhere active):

$field = get_field(‘text_content’);
$formatted_field = strip_tags($field, ‘<br>’);
echo $formatted_field; ?>
<- Fatal Error Complete wordpress site breaks and can not be accessed anymore

remove_filter (‘acf_the_content’, ‘wpautop’);

These have been the solutions I have allready tried to add by using custom CSS in the widget I tried to load the text content into:

p:empty {
display:none
}
<- nothing changes, extra and normal linebreaks are still there

Please keep in mind when you want to help with this, that I am not a developer, when you have a code snippet that might work please also describe where and how I need to place it 😉

Thanks!

Hello,

I am using the block.json to define my ACF Gutenberg blocks. Currently I am making a slideshow-block. I made an ACF slideshow field group that contains a repeater field with a WYSIWYG-text field (title) and image field (image).

My block.json has the following code:

{
  "name": "acf/slideshow",
  "title": "Slideshow",
  "description": "Show one or more images with text.",
  "style": [
    "file:./slideshow.css"
  ],
  "category": "media",
  "icon": "align-center",
  "keywords": [
    "slideshow"
  ],
  "acf": {
    "mode": "auto",
    "renderTemplate": "slideshow.php"
  },
  "example": {
    "attributes": {
      "data": {
        "slideshow": {
          "title": "This is an example text"
        },
      }
    }
  }
}

In the block editor when I want to select a block I will see an example of this block. I want the example to show the text: “This is an example text” (like defined in the block.json). But it only shows “T”, the first character of the string. What am I doing wrong?

Hi ACF PRO team !

I think that having <InnerBlocks /> in every occurence of a repeater field would be an awesome feature.

Then, we could re-use every Gutenberg or ACF PRO Blocks instead of the WYSIWYG editor for inside-repeater-content. Unlimited possibilities.

Thoughts ?

Hello. I currently have a repeater being used as a Gutenberg Block in Posts. It allows me to create a post and add multiple rows of Products with field types that have a title (Text), description (Wysiwyg Editor), image (Image), and Product URL (URL). The Product URL I have to manually enter each time for every row I create in the block repeater. In some instances, the same Product URL will be entered multiple times in different Posts.

These Product URLs can change in the future. And instead of going into each Post that the Product URL in question was used on, I was thinking of creating a Custom Post Type (Product List) where I can create multiple posts which will house Product URLs in a custom field. Then in the block repeater, the old Product URL field can be a post object allowing me to choose the custom post Product List and extract the Product URL. And if I want to change the URL for any reason, I can do it through the custom post and it will be applied globally to all posts.

I’ve tried changing the current field from field type url to post object and picking the custom post, but get an error ( ! ) Fatal error: Uncaught Error: Object of class WP_Post could not be converted to string.

So is what I am trying to do even possible?

I think I’ve read just about every post there is (and there are a few) about the issue whereby extra P tags (and therefore spaces) are added when I add an ACF field in Gutenberg via shortcode.

For example:

I add this to a Gutenberg shortcode block:

[acf field="my_field"]

It is just a simple text field.

When it outputs, a <p></p> is added above it, and a <p></p> is also added below it.

I have searched and searched and nothing I have tried has worked to stop the generation of these extra P tags.

I’m hoping someone with more ACF expertise than I can hep me by telling me what will prevent this. I’m guessing it is a functions snippet, but I have tried several.

For instance, this function doesn’t work:

remove_filter ('acf_the_content', 'wpautop', 20);

Any help is appreciated.
(Using ACF shortcode calling an ACF text field (not even a WYSIWYG field) in Gutenberg. No non-Gutenberg page builder involved.)

Hi,

we build a new site for a client with ACF and Gutenberg. There is one block that throws an error and I don’t know what the hell is going on.

The console throws another error 2 times:

react-dom.min.js?ver=17.0.1:9 SyntaxError: Expected property name or '}' in JSON at position 2
    at JSON.parse (<anonymous>)
    at q (acf-pro-blocks.min.js?ver=6.0.2:1:23770)
    at Array.map (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22774)
    at acf-pro-blocks.min.js?ver=6.0.2:1:23009
    at Array.forEach (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22927)
    at acf-pro-blocks.min.js?ver=6.0.2:1:23009
    at Array.forEach (<anonymous>)
    at M (acf-pro-blocks.min.js?ver=6.0.2:1:22927)

I can add the block and configure it using the ACF fields, but after saving and reloading the page, the block throws this generic Gutenberg error (see title) and no ACF fields are loaded.

block.json (the same structure for every block):

{
    "name": "referenzen",
    "title": "Referenzen",
    "keywords": ["referenzen"],
    "style": {
        "handle": "referenzen-style",
        "dependencies": []
    },
    "icon": "admin-generic",
    "category": "_",
    "acf": {
        "mode": "preview",
        "renderTemplate": "render.php"
    },
    "align": "full",
    "supports": {
        "anchor": true
    }
}

render.php:

<?php
/**
 * Block Template.
 *
 * @param   array  $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool   $is_preview True during backend preview render.
 * @param   int    $post_id The post ID the block is rendering content against. This is either the post ID currently being displayed inside a query loop, or the post ID of the post hosting this block.
 * @param   array  $context The context provided to the block by the post or it's parent block.
 */

require_once( get_template_directory() . '/modules/h2/h2.php' );
require_once( get_template_directory() . '/modules/button/button.php' );

// Support custom "anchor" value.
$anchor = '';
if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '"';
}

// Create class attribute allowing for custom "className" values.
$class_name = 'acf_block acf_referenzen';
if ( ! empty( $block['className'] ) ) {
    $class_name .= ' ' . $block['className'];
}

// Load values and assign defaults.
$subhead    = get_field( 'subhead' );
$headline   = get_field( 'headline' );
$text       = get_field( 'text' );
$referenzen = get_field( 'referenzen' ) ?: get_posts( array(
    'post_type' => 'referenzen',
    'numberposts' => -1
) );
$button = get_field( 'button' );

wp_enqueue_style( 'referenzen-style' );
wp_enqueue_script( 'alpine' );
?>

<section
    <?= $anchor ?>
    class="<?= esc_attr( $class_name ) ?>"
>
    <div class="container">
        <?= art_m_h2( $headline, $subhead ) ?>

        <div class="wysiwyg">
            <?= $text ?>
        </div>

        <?php if ( $referenzen ) : ?>
        <div class="referenzen">
            <?php foreach ( $referenzen as $item ) : ?>
            <a
                class="item"
                href="<?= get_the_permalink( $item ) ?>"
                x-data="{ show: false }"
                x-intersect:enter="show = true"
                :class="show ? 'show' : ''"
            >
                <div class="image">
                    <?= get_the_post_thumbnail( $item, 'full' ) ?>
                </div>

                <div class="content">
                    <div class="meta"><?= get_field( 'meta', $item ) ?></div>
                    <h3><?= get_the_title( $item ) ?></h3>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <?= art_m_button( $button['link'], $button['text'] ) ?>
    </div>
</section>

The block in Gutenberg code view:

<!-- wp:acf/referenzen {"name":"acf/referenzen","data":{"subhead":"Some subhead","_subhead":"field_6351502671f65","headline":"Some headline","_headline":"field_6351502671fac","text":"Some text","_text":"field_6351539802287","referenzen":["121","127","128","129"],"_referenzen":"field_635150267200c","button_text":"Referenzen in meiner Nähe","_button_text":"field_63515026d5255","button_link":"#","_button_link":"field_63515026d5294","button":"","_button":"field_63515026720a8"},"mode":"preview"} /-->

Any suggestions?

Hello,

We have multiple websites and sometimes we need to import posts from one site to another instead of recreating them.

We have created a post importer plugin and imported the posts.

everything works fine except the ACF image field images are not getting imported, if we added the image in a WYSIWYG block, it’s coming through.

but only the image field shows empty and also nothing gets imported to the media library as well.

Do we need to do any extra mapping for the images to be imported and added to the field?

Hello,

I’m experiencing an issue where when you create a new post that has a WYSIWYG field in a repeater field you can’t edit it until you’ve publish the post.

Best wishes,
Eric

Hello,
I have created a group to configure fields in blog posts. Two fields: Wysiwyg and oEmbed. Everything works fine and I can fill them in the blog post.
The problem is that it doesn’t work with the template that I created with the DIVI theme generator. I have included it as dynamic content and the ACF fields appear, I select them but then the HTML code appears in the input instead of the YouTube video that I want to appear embedded.
Can you help me?
Thank you

I use ACF and Elementor. I put a Wysiwyg Editor Field in my Custom Post Type and on Elementor the content doesn’t show.
Why?

Hi,

i am using “ACF PRO” with a lot of custom-post-types (CPT) for each category of data.
For example, i have a CPT “contact-persons”.

This CPT has a lot of ACF fields, and I would like to insert 3 fields of type “gutenberg blocks” instead of “WYSIWYG”, to use block-elements like Accordion, etc..

Is this possible?

Since updating to ACF Pro v 6.0.2 / ACF Extended v0.8.8.9 I am having various admin UI type issues with ACF Field groups. An example, but by no means the only issue is outlined in this screenshot.

* Toggle buttons are not displaying their change of state (in this case enabling “Customize Toolbar” for a WYSIWYG field)

* None of the items on the toolbar are actually showing up to be toggled and the “+ Add Button” is incorrectly overlaid.

As you can see from the screenshot I literally only have my theme (Astra) and then ACF Pro and the two ACF Extended plugins enabled.

I am prepared to rollback if I absolutely have to here but I am really like the UI changes in general so really want to find the source of the issue

No onscreen errors, nothing in the DEBUG log, no errors in Chrome Developer Tools

I am also seeing:

* Issues with repeater fields – when I add the fields inside the repeater, they are picking up a field_id of “acfcloneindex” and then not display correctly on the front end.

* Updates not being saved correctly – what is up with the “Save Changes” and “Update” buttons – which are we supposed to be using ?

I am currently in the final throes of building a site which uses lots (and lots!) of ACF Link fields, and the site is almost completely populated.

I am now in a position where I need to remove the trailing slash from all URLs across the site, and can do this for system links just by updating Permalinks in WordPress Admin and using WP-CLI for WYSIWYG and basic text fields across the site.

Unfortunately, however, this approach doesn’t seem to work for any ACF Link fields, where the data is stored in serialised JSON in the database, as WP-CLI doesn’t ‘catch’ these URLs and they obviously aren’t updated automatically when Permalinks are changed globally, as they’ve already been stored in the database with trailing slashes.

Is there a quick way – ideally via SQL or in ACF itself – to remove the trailing slashes from all URLs created using Link fields, rather than repopulating hundreds of pages to not use the trailing slash versions of each link?

Thanks in advance!

Hey does anyone have a decent example of how to allow a block to be made available inside another ACF block?

I have an accordion block created with ACF. The accordion content is currently a WYSIWYG editor. I’d like to use a two column gutenberg block in there instead. I need an example of how to add block editing capabilities for the accordion content.

The blocks are registered with ACFextended Pro.

Thanks

Hi, I have used acf for a custom tempalte page using classic editor, but an error occurs when I use Wysiwyg Editor, Please give me a solution. Thank for all

I have a Wysiwyg Editor field, with media upload button enabled, and I would like to identify and target the AJAX queries coming from its media upload button (“Add Media”). Specifically, I’d like to 1) filter the shown attachments in the modal and 2) operate on the uploaded attachment.

I have done something similar with Image upload fields, by following this solution: https://support.advancedcustomfields.com/forums/topic/filter-gallery-items/#post-41465

Thus, for an Image field, I set up a filter for ajax_query_attachments_args and checked against the _acfuploader identifier with an if ($_POST['query']['_acfuploader'] == $THE_FIELD_ID) condition. Inside that condition I could then modify the AJAX query e.g. to show only attachments uploaded by the current user.

Then, after submitting the form (for my very own use case it was appropriate to use the woocommerce_save_account_details hook), I simply got the attachment’s ID from the $_POST data using $_POST['acf'][$image_field_key] and could then modify that attachment.

// (1) filter the shown attachments
function restrict_current_user_to_own_attachments( $query = array() ) {

    // Allow requests only from users with access
    if ( ! current_user_can( 'upload_files' ) ) {
        wp_send_json_error();
    }

    // Only target the specific ACF field
    if ( $_POST['query']['_acfuploader'] == $THE_FIELD_ID ) {

        $user_id = get_current_user_id();

        if ( $user_id ) {
            // Query only attachments uploaded by the current user
            $query['author'] = $user_id;
        }
    }
    else if ( $_POST['action'] == 'query-attachments' && !current_user_can( 'administrator' ) ) {

        $user_id = get_current_user_id();

        if ( $user_id ) {
            $query['author'] = $user_id;
        }

    }
    else if ( $_POST['action'] == 'query-attachments' && current_user_can( 'administrator' ) ) {

        $user_id = get_current_user_id();

        // I could target a specific page, if I was unable to target the field.
        if ( strpos( $_SERVER[ 'HTTP_REFERER' ], "/${$MY_PAGE}" ) !== false && $user_id ) {
            //  manipulate AJAX query
        }

    }

    return $query;
}
// Filter wp uploader shown attachments using ajax_query_attachments_args
add_filter( 'ajax_query_attachments_args', 'restrict_current_user_to_own_attachments', 10, 1 );

// (2) operate on uploaded attachment
function my_save_form( $user_id ) {
    if ( isset( $_POST['acf'][$THE_FIELD_ID] ) ) {
        // ...
        if ( is_user_logged_in() && current_user_can('upload_files') ) {
            $attachment_id = (int) $_POST['acf'][$THE_FIELD_ID];
            // Do stuff to the attachment
        }
    }
}
add_action( 'woocommerce_save_account_details', 'my_save_form', 10, 1 );

The problem with the Wysiwyg Editor’s media upload button is that I couldn’t find anything identifiable about it, in order to be able to modify the AJAX query for that purpose. So I made a compromise and modified it for ordinary user roles and for more elevated users such as admins (current_user_can( 'administrator' )) I targeted the entire page instead of the field, using the $_SERVER['HTTP_REFERER'] (admins are trusted to not spoof the referer).

However, I still need to operate on the attachments that were uploaded from that specific “Add Media” button, right after they were uploaded, and I’ve failed to find any hook where I could have both access to the attachment ID AND where the $_SERVER['HTTP_REFERER'] would point to the page of the ACF form. If anyone knows of any useful hook, it’d certainly save me plenty of more hours of trying.