Search Results for 'Wysiwyg'

I am still in no hurry to move to Gutenberg, which is something I’m sure will catch up to me at some point… 🙂

I’m looking at redoing a post-type/template to allow for more flexibility for the folks creating the content. As it is now, it’s just a number of ACF fields in a fixed order with very limited options (no rearranging of fields, very stripped-down WYSIWYG, etc.).

It looks like I can either go with Flexible Content or ACF Blocks. At first glance, Flexible Content looks easier, faster, and will allow me to reuse some of my existing “modules” (for example the page header, a carousel, full-width video and image sections, and small post grids are all going to remain). Just a tiny bit of busy-work is needed to bring these in and then I can focus on new sections.

ACF Blocks looks interesting for forward compatibility, and would certainly look a bit cooler on the backend, but there are huge chunks of the site that are not going to Blocks/Gutenberg anytime soon and having editors moving between two types of editors seems… not friendly?

My main concern is whether the ACF folks will be continuing to support Flexible Content for the foreseeable future or if it will be deprecated in favor of ACF Blocks. For example, looking for docs, I’m not seeing a whole lot for Flexible Content – the main page doesn’t even have info on options like the “block, table, row” selector at the top level of the Layout section. My mind goes to “is it lightly documented because it’s sort of being abandoned?”…

I guess another question here is performance – is there any great difference here between Flexible Content and ACF Blocks?

I have problem with different sizes of texts because there is <hr> element just right after the text and the <hr> elements don’t line up to inline.

My code:

 <?php echo $text; ?></p>
 <hr class="hr-customcolor" />

Is there way to get the <hr> elements to line to inline any way when text block is repeated?

I am trying to to get the values from custom fields from an ACF Block on a subpage.

I have been partially successful. The ACF Block is named acf/website-overview. The block contains a field called overview, which I can successfully get to show. It’s a WYSIWYG field.

The two other fields are subfields of a group field called meta. The subfields are named expertise (checkbox field) and website_address (url).

I’m starting to pull my hair out. Does anyone know what I might need to add to my code?

<?php
$post_id = $page->ID;
$post = get_post($post_id);
$blocks = parse_blocks($post->post_content);
	foreach ($blocks as $block) {
		if ($block['blockName'] == 'acf/website-overview') {
			$overview = $blocks[0]['attrs']['data']['overview'];
			$skills = $blocks[0]['attrs']['data']['expertise'];
			$websiteAddress = $blocks[0]['attrs']['data']['website_address'];
		}
}
?>
<?php echo '<p>' . substr_replace($overview, "…", $excerpt_length) . '</p>'; ?>
<?php echo $skills ; ?>
<?php echo $websiteAddress ; ?>

Hello,

I’ve run into an issue with the WYSIWYG Editor not displaying/functioning properly on Frontend Forms. The error comes back to the acf_is_block_editor() method in /includes/api/api-helpers.php LN4835. While get_current_screen() function may exist it does not always return an object. I think the following needs updated:

$screen = get_current_screen();
if( null !== $screen && method_exists( $screen, 'is_block_editor' ) ) {
	return $screen->is_block_editor();
}

Hi,

When editing in Firefox, the visual (WYSIWYG) editor custom field appears to be disabled. There’s no way to enter text. Clicking in the field has no effect.

There’s no problem in Chrome or even Edge.

Might not be an ACF bug, though, I don’t know.

Patrick

Although I can see my old posts content and my draft posts content on the Text Editor, the Visual Editor is showing completely blank. I’ve tried to deactivate all my plugins and change my Theme to the Default WP Theme without any success. I’ve also tried to reinstall WP 5.6 version. No effect as well.

When I hover the cursor over the ACF Visual Editor it doesn’t even gives me the option to click on the field, there’s just an arrow floating over it as it were a non clickable field. When I change to the text field I can see the text cursor option to click over it and do any modifications I wish.

What’s even more crazy is that is some specific posts, when I visit them for the first time now, the Visual Editor does works properly but, when I leace the post and return later, it’s not working anymore.

I’ve attached an image where I left the upper ACF on the Text Editor, working perfectly, and the below ACF on the Visual Editor, that’s showing blank.

Does anybody knows what could be happening over here?

I’d be very grateful if you could help me,

Thanks,

Marlos

Hi there!

I seem to have trouble posting my question on the forums, so here it is again, as a support ticket:

I have a use case where I would like to save a selected sub-field’s value to the value of a group. Let’s say I have a group named multilingual_text where one sub-field is for English, the other one is for German. When updating the field, I would like the English value to also be saved in the value of the parent group. The default behavior is that ACF saves an empty string for the group’s value (class-acf-field-group.php, line 227):

return '';

Is there a way to overwrite this behavior? I don’t seem to be able to alter this with acf/update_value.

Context: I am building a custom multilingual site. For some ACF field types (text, textarea, wysiwyg, …) I have a field setting multilingual of type true_false. When this setting is true, I am altering the field on acf/load_field so that it becomes a field of type group with sub fields for all my active languages, suffixed with the language code (e.g. multilingual_text_en, multilingual_text_de). On acf/format_value I return the active language’s sub-field. It works really great so far. The above enhancement would make it possible to keep the default language’s value even if my plugin would be disabled or the field was reset to is_multilingual => false.

Hello,
I’ve tried several possibilities to insert the bandcamp player as dynamic content in a custom post type using CPTUI, ACF PRO and Elementor Pro but can’t make it work.
From Bandcamp I can get three option : iframe embed, wp shortcode or direct link (but this last one is more for e-mail sharing).
As custom field I’ve tried WYSIWYG Editor custom field, both visual and/or text only with the iframe code or the wp shortcode, using several widgets that offers the options for dynamics content ACF Fields (dynamic contents, shortcode enabled), Text Editor Classic Elementor, or the shortcode widget. All I can get is either just a link or the shortcode itself as text.
The oEmbed and URL didn’t make it but i’ve tried anyway.

When editing the single pos template in Elementor, putting the iframe directly into a text editor works, but as it is a custom post type I need it to work with dynamic content.

Can someone replicate that issue or help me ?
Thank you.

This issue is causing the text to have no linebreaks. I have tried to replace the   in php, however it does not change much, only reveals the <p> tags on both sides. I have followed the documentation but the text is still on only one line and goes past the edge of the screen.

<?php $background = get_field('bakgrund');?>
						<div class="column width-8">
							
							<?php
								$infostring1 = html_entity_decode($background['del1']);
								$infostring1 = preg_replace("/\s/",'',$infostring1);
								$infostring1 = htmlentities($infostring1);
								echo $infostring1;
							?>
							<?php echo $background['del2'];?>
						</div>

I have tried to remove wpautop, replace the   etc. I haven’t seen any other people having these issues so i’m completely lost here. Appreciate any help.

Hi guys, i have a an option page, inside option page i have a Group field called Cookies and inside the group, i have plenty “wysiwyg” fields here.
In order to get my field i use it like this:

$cookies = get_field('cookies', 'option');
 $cookies['fieldname'] //this is just a random name, but it;s just to load the field.

inside this field i have a shortcode “[domain_host]” that shows the domain name the website is hosted on.

function domain_host(){
    $host_name = $_SERVER['SERVER_NAME'];
    return $host_name;
}
add_shortcode('domain_host', 'domain_host');

the problem is when i use the shortcode inside a field i get the the shortcode as text, “[domain_host]”. Do you know why i experience this ?

I want to make a button link using with the wysiwyg editor.
But,wysiwyg editor of ACF is not reflected in original CSS.

I added the theme CSS, but it didn’t reflect either.

please advice.

As the title says my wysiwyg editor is not adding linebreaks to my text. I tried with a normal text area with automatic br with no success. I have tried to remove wpautop and add it. Nothing I’ve tried works.

<div class="column width-8">
							<p><?php echo $background['del1'];?></p>
							<p class="mb-80"><?php echo $background['del2'];?></p>
						</div>

Any help is very appreciated!

Hey i’m trying to implement two date-fields and a editor field outside the wp-admin inclosure.

The fields rendered, but the functions from the editor and date fields are nowhere to been seen.

There are no javascript errors on load, but when I click on the “Visual”-btn, i get this error “Uncaught TypeError: Cannot read property ‘onpageload’ of undefined”.

Anyone know how I can fix this and get it working ?

Im using WP 5.5.3 and the theme is Astra Pro 2.6.1

Hello!

I tried editing the toolbar using this plugin (https://wordpress.org/plugins/tinymce-advanced/), but it’s not effecting the ACF Wysiwyg Editor at all.

Is there a way we can hide some toolbar icons?

Thanks!

Hey, there, I’m a developer and making a plugin for some ACF + WPML functionality.

It’s purpose is to allow user adding a field translation directly from main version.
So I made a button for each text/textarea/wysiwyg field with `acf.addAction(“ready_field/….. {
jQuery(this).append(
‘<div class=”pat_button button”>TRANSLATE</div>’
);
}`

which on click makes an ajax call and loads all the translated values by field key:

  jQuery(".pat_button").on("click", function () {
    var field_id = jQuery(this).parent().parent().attr("data-key");
}

    $post_id = $_POST['post_id'];
    $post_type = $_POST['post_type'];
    $field_id = $_POST['field_id'];
    $languages = apply_filters( 'wpml_active_languages', NULL, 'orderby=id&order=desc' );

    foreach($languages as $key => $value) {
        $languages[$key] = array();
        $languages[$key]['dest_post_id'] = apply_filters( 'wpml_object_id', $post_id, $post_type, FALSE, $key );
        $languages[$key]['dest_field_id'] = $field_id;
        $languages[$key]['field_val'] = get_field($field_id,$languages[$key]['dest_post_id']);
    }

    echo json_encode($languages);
    wp_die();

It’s kinda working for top-level fields and I can see those textareas are filled with values properly:

However, when it comes to nested inputs,textareas and wysiwyg inside repeaters or flexible content I get empty values. Probably because I have to conditionally use get_field and get_subfield for different inputs.

However, how can I implement such conditional usage? It feels a bit complicated to use has_rows() for my case. is there a way to get ‘meta key’ with javascript api from field.data so I can get_post_meta/update_post_meta instead of get_field/update_field?

When using the link field within a fieldgroup that is used in a acf-gutenberg-block, custom post types are not available to choose from.
They are however when we use the same field outside of the gutenberg context.
This may be related to a (solved) gutenberg issue:
https://github.com/WordPress/gutenberg/issues/2084
and
https://github.com/WordPress/gutenberg/pull/7894
Same happens with the link build in WYSIWYG Editor.

Hello,

I’m trying to achieve 1 simple thing in different ways and am encountering issues throughout. I have added a custom field where I want person X to add a Vimeo URL (or embed), and have this display on the user-end. Ideally, I’d want this URL (or embed) to be between shortcodes, but one monster at a time.

I have tried using the WYSIWYG editor and though the Vimeo embed appears on the wp-admin end, it doesn’t when I preview it (also might be important to note I’m using Elementor as well). I just get a blank section, that mind you, enlarges or shrinks to make up the space for the video embed… just without the actual video.

I have tried the oEmbed field too, which works like a charm. But I am unable to add shortcodes to that. Specially because I am required to change the shortcode id per post (e.g. [shortcode =1] , [shortcode =2] …), so I can’t hard code just 1 short code some how (I say this as if I know what I’m doing in PHP. I don’t).

Is there any solution to this? A way to embed a Vimeo video and have it display on the user-end of my site, and **ideally** (most importantly, actually), have it between shortcodes? I tried doing this in the WYSIWYG editor because that obviously makes most sense, but I can’t even get the video to display on the user-end in the first place.

Thanks.

Hello! I’ve been researching how to break a single text/WYSIWYG field into two-columns on the front end. For example (https://poole.devstagesite.com/al-musannah-air-base/) my project descriptions can be long, so I’d like to display it in two columns.

I’ve used ACF to pre-populate a Beaver Themer template for this build. Any thoughts would be appreciated!

Trying to use Gravity Forms Advanced Post Creation add-on to create a front end content submission form.

Most everything works well — have been able to map fields in gravity into my ACF fields.

Exception is the rich text editor, as all line breaks are wiped out in the process, making that unusable for editorial content.

The Gravity folks have a tutorial, but the example doesn’t apply, so I’m hoping someone can point me in the right direction as to how to write a filter that will preserve line breaks from Gravity’s rich text editor into the ACF wysiwyg field.

https://docs.gravityforms.com/gform_advancedpostcreation_post_after_creation/

I have a few flexible content fields with repeaters, text areas and WYSIWYG editors.
Is it possible to have Gutenberg blocks (the standard ones) as field in a flexible content field?
I would like to use the blocks instead of the WYSIWG editor.

Thanks!
Dan

Hi, I’m trying to add an accordion to this custom page builder but i cant get it to work. Basically i have added open and closing accordion fields to the json file and each has a title and a wysiwyg editor, but it breaks my site when i try to use it.

json code:

[
    {
        "key": "group_553b8b2752aba",
        "title": "Page Builder",
        "fields": [
            
            {
                "key": "field_553b8b4fc8c3b",
                "label": "Page Sections",
                "name": "acf_page_builder",
                "type": "flexible_content",
                "instructions": "",
                "required": 1,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "button_label": "Add Section",
                "min": "",
                "max": "",
                "layouts": [
                    {
                        "key": "56c0e6afec566",
                        "name": "banner",
                        "label": "Banner Image",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0e6efec56d",
                                "label": "Contained",
                                "name": "contained",
                                "type": "true_false",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0a959e8e90",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "Place in a container?",
                                "default_value": 0
                            },
                            {
                                "key": "field_56c0e712ec56e",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0e6efec56d",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_56c0e6c8ec56c",
                                "label": "Image",
                                "name": "image",
                                "type": "image",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "return_format": "url",
                                "preview_size": "medium",
                                "library": "all",
                                "min_width": "",
                                "min_height": "",
                                "min_size": "",
                                "max_width": "",
                                "max_height": "",
                                "max_size": "",
                                "mime_types": ""
                            },
                            {
                                "key": "field_56c0f2dcf1e39",
                                "label": "Text",
                                "name": "use_text",
                                "type": "true_false",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "Place text over image?",
                                "default_value": 0
                            },
                            {
                                "key": "field_56c0f2b0f1e38",
                                "label": "Text on Top of Image",
                                "name": "text_on_image",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_56c0f2dcf1e39",
                                            "operator": "==",
                                            "value": "1"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "554a765bd3324",
                        "name": "button",
                        "label": "Button",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_554a777fd3328",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            
                            {
                                "key": "field_554a7667d3325",
                                "label": "Button Text",
                                "name": "button_text",
                                "type": "text",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a7684d3326",
                                "label": "Page Linking",
                                "name": "link_to_page",
                                "type": "select",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "choices": {
                                    "anchor": "ID Anchor",
                                    "external": "External Link",
                                    "internal": "Internal Link"
                                },
                                "default_value": [],
                                "allow_null": 0,
                                "multiple": 0,
                                "ui": 0,
                                "ajax": 0,
                                "placeholder": "",
                                "disabled": 0,
                                "readonly": 0
                            },
                            {
                                "key": "field_55aff9e1ee51e",
                                "label": "Anchor",
                                "name": "button_anchor",
                                "type": "text",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "anchor"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "#",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a77f8d332b",
                                "label": "External Link",
                                "name": "external_link",
                                "type": "text",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "external"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_554a77c9d332a",
                                "label": "Internal Link",
                                "name": "internal_link",
                                "type": "page_link",
                                "instructions": "",
                                "required": 1,
                                "conditional_logic": [
                                    [
                                        {
                                            "field": "field_554a7684d3326",
                                            "operator": "==",
                                            "value": "internal"
                                        }
                                    ]
                                ],
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "post_type": [],
                                "taxonomy": [],
                                "allow_null": 0,
                                "multiple": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "5540bf0259b1d",
                        "name": "content_grid",
                        "label": "Content Columns",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0b470864df",
                                "label": "IMPORTANT",
                                "name": "",
                                "type": "message",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "message": "<p style=\"color: red;\">This section uses <a href=\"http:\/\/getbootstrap.com\/\" target=\"_blank\">Bootstrap<\/a> columns. Bootstrap divides the page width by columns in divisions of 12. So for 2 columns use width col-sm-6, for 3 columns use width col-sm-4, and so on. In most cases 'Offset' should be set to 0.<\/p>",
                                "new_lines": "wpautop",
                                "esc_html": 0
                            },
                            {
                                "key": "field_554909228473a",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            {
                                "key": "field_56c0b485864e0",
                                "label": "Wrapper Class",
                                "name": "wrapper_class",
                                "type": "text",
                                "instructions": "i.e. col-sm-4 col-sm-offset-4",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "maxlength": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_5540bf1159b1e",
                                "label": "Content Columns",
                                "name": "content_columns",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "collapsed": "",
                                "min": 1,
                                "max": 4,
                                "layout": "table",
                                "button_label": "Add Columns",
                                "sub_fields": [
                                    {
                                        "key": "field_5540c0bb59b1f",
                                        "label": "Content",
                                        "name": "content",
                                        "type": "wysiwyg",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 70,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "tabs": "all",
                                        "toolbar": "full",
                                        "media_upload": 1
                                    },
                                    {
                                        "key": "field_554a5878c9372",
                                        "label": "Width",
                                        "name": "width",
                                        "type": "number",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 15,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": 3,
                                        "placeholder": "",
                                        "prepend": "col-sm-",
                                        "append": "",
                                        "min": 1,
                                        "max": 12,
                                        "step": 1,
                                        "readonly": 0,
                                        "disabled": 0
                                    },
                                    {
                                        "key": "field_554a57bbc9370",
                                        "label": "Offset",
                                        "name": "offset",
                                        "type": "number",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": 15,
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "col-sm-offset-",
                                        "append": "",
                                        "min": 0,
                                        "max": 12,
                                        "step": 1,
                                        "readonly": 0,
                                        "disabled": 0
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "553b90972ce3e",
                        "name": "gallery",
                        "label": "Gallery",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_553bd89149bd2",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_56c0ef638f980",
                                "label": "Images per Row",
                                "name": "images_per_row",
                                "type": "number",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": 4,
                                "placeholder": "",
                                "prepend": "",
                                "append": "",
                                "min": 2,
                                "max": 6,
                                "step": "",
                                "readonly": 0,
                                "disabled": 0
                            },
                            {
                                "key": "field_553b90972ce3f",
                                "label": "Images",
                                "name": "images",
                                "type": "repeater",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "collapsed": "",
                                "min": 1,
                                "max": 8,
                                "layout": "table",
                                "button_label": "Add Image",
                                "sub_fields": [
                                    {
                                        "key": "field_553bd41f82d1e",
                                        "label": "Image",
                                        "name": "image",
                                        "type": "image",
                                        "instructions": "",
                                        "required": 1,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "return_format": "url",
                                        "preview_size": "thumbnail",
                                        "library": "all",
                                        "min_width": "",
                                        "min_height": "",
                                        "min_size": "",
                                        "max_width": "",
                                        "max_height": "",
                                        "max_size": "",
                                        "mime_types": ""
                                    },
                                    {
                                        "key": "field_553bd45b82d1f",
                                        "label": "Title",
                                        "name": "title",
                                        "type": "text",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "",
                                        "append": "",
                                        "maxlength": "",
                                        "readonly": 0,
                                        "disabled": 0
                                    },
                                    {
                                        "key": "field_553bd48582d20",
                                        "label": "Caption",
                                        "name": "caption",
                                        "type": "text",
                                        "instructions": "",
                                        "required": 0,
                                        "conditional_logic": 0,
                                        "wrapper": {
                                            "width": "",
                                            "class": "",
                                            "id": ""
                                        },
                                        "default_value": "",
                                        "placeholder": "",
                                        "prepend": "",
                                        "append": "",
                                        "maxlength": "",
                                        "readonly": 0,
                                        "disabled": 0
                                    }
                                ]
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
                    {
                        "key": "561538dcc6acb",
                        "name": "raw_html",
                        "label": "Raw HTML",
                        "display": "row",
                        "sub_fields": [
                            {
                                "key": "field_56c0eb7227216",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_561538e6c6acc",
                                "label": "HTML",
                                "name": "html",
                                "type": "textarea",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "placeholder": "",
                                "maxlength": "",
                                "rows": "",
                                "new_lines": "",
                                "readonly": 0,
                                "disabled": 0
                            }
                        ],
                        "min": "",
                        "max": ""
                    },
					
					{
                        "key": "561538dcw4334t",
                        "name": "accordion_row",
                        "label": "Accordion Row",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_56c0ebgdtgs",
                                "label": "accordion-open",
                                "name": "",
                                "type": "accordion",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "open": 0,
								"multi_expand": 0,
								"endpoint": 0,
                            },
							{
                                "key": "field_56c0eb72strgd",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
							{
								"key": "field_553bd45b2twf",
								"label": "Title",
								"name": "accordion-title",
								"type": "text",
								"instructions": "",
								"required": 0,
								"conditional_logic": 0,
								"wrapper": {
									"width": "",
									"class": "",
									"id": ""
								},
								"default_value": "",
								"placeholder": "",
								"prepend": "",
								"append": "",
								"maxlength": "",
								"readonly": 0,
								"disabled": 0
							},
							{
                                "key": "field_553b8ce8yb45rty",
                                "label": "Content",
                                "name": "content",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 1
                            },
							{
                                "key": "field_56c0ebgdwc3f5",
                                "label": "accordion-close",
                                "name": "",
                                "type": "accordion",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "open": 0,
								"multi_expand": 0,
								"endpoint": 1,
                            },
                            
                          
                        ],
                        "min": "",
                        "max": ""
                    },
                    
                    {
                        "key": "553b8cd6dbe66",
                        "name": "wysiwyg",
                        "label": "Content Editor",
                        "display": "block",
                        "sub_fields": [
                            {
                                "key": "field_553bc590fbc55",
                                "label": "Background Colour",
                                "name": "bg",
                                "type": "color_picker",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": ""
                            },
                            
                            {
                                "key": "field_553b8ce8c8c3c",
                                "label": "Content",
                                "name": "content",
                                "type": "wysiwyg",
                                "instructions": "",
                                "required": 0,
                                "conditional_logic": 0,
                                "wrapper": {
                                    "width": "",
                                    "class": "",
                                    "id": ""
                                },
                                "default_value": "",
                                "tabs": "all",
                                "toolbar": "full",
                                "media_upload": 1
                            }
                        ],
                        "min": "",
                        "max": ""
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "post_type",
                    "operator": "==",
                    "value": "post"
                }
            ],
            [
                {
                    "param": "page_template",
                    "operator": "==",
                    "value": "page-templates\/full-width.php"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": [
            "the_content"
        ],
        "active": 1,
        "description": ""
    }
]

PHP:

<?php

Class ACF_Page_Builder {

	/**
	 * Check if Advanced Custom Fields is Active
	 * @var (Boolean)
	 */
	private $acf_active;

	/**
	 * Check if Simple Contact Forms is Active
	 * @var (Boolean)
	 */
	private $scf_active;

	/**
	 * The final HTML to return with the section data inluded
	 * @var String
	 */
	private $html;

	/**
	 * Formats that can be used in the acfs_add_support and acfs_remove_support functions
	 * @var Array
	 */
	public $supported_formats;

	/**
	 * Variable to declare whether we should use Bootstrap or not
	 * @var Boolean
	 */
	private $use_bs;

	/**
	 * Constructor of the class. Sets some default values
	 */
	function __construct() {

		include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

		$this->acf_active = is_plugin_active( 'advanced-custom-fields/acf.php' ) || is_plugin_active( 'advanced-custom-fields-pro/acf.php' );

		$this->scf_active = is_plugin_active( 'simple-contact-forms/simple-contact-forms.php' );

		$this->supported_formats = array('post_type', 'page_template');

		$this->use_bs = function_exists('get_field') ? get_field('acfpb_use_bootstrap') : false;

	}

	/**
	 * Enqueue the styles and scripts for the public
	 */
	public function enqueuePublic() {

		wp_enqueue_style( 'acfpb-public', plugin_dir_url( __FILE__ ) . '../public/css/acfpb_styles.css', false, NULL, 'all' );

	}

	/**
	 * Enqueue the styles and scripts for the admin
	 */
	public function enqueueAdmin() {

	}

	/**
	 * Retrieves all the section HTML 
	 * @param  String $name The slug used for the sections. Is 'sections' by default
	 * @return String       The final HTML
	 */
	public function getSectionsHTML( $name, $post_id ) {

		if( !$this->acf_active ) return '';

		if( have_rows( $name, $post_id ) ):

			$s = 1;

			$this->html = '<div id="acfpb_sections">';

			while ( have_rows( $name, $post_id ) ) : the_row();

				$layout = get_row_layout();

				if( method_exists(get_class(), 'getSection_' . $layout ) ) :

					$id = 'section_' . $s;

					$class = 'acfpb_section section-' . $layout;

					$style = get_sub_field('bg') ? 'background-color:' . get_sub_field('bg') : '';

					$contained = (boolean) get_sub_field('contained', false);

					if( !$this->use_bs && $contained ) $contained = false;

					$wrapper = get_sub_field('wrapper_class');

					$this->html .= '<div id="' . $id . '" class="' . $class . '" style="' . $style . '"><div class="sectionwrap">';

						if( $contained ) $this->html .= '<div class="container">';

							if( $contained ) $this->html .= '<div class="row">';

								if( $wrapper !== '' ) $this->html .= '<div class="' . $wrapper . '">';

									$this->html .= $this->{'getSection_' . $layout}();

								if( $wrapper !== '' ) $this->html .= '</div>'; // Wrapper finish

							if( $this->use_bs ) $this->html .= '<div class="clearfix"></div>';

							if( $contained ) $this->html .= '</div>'; // Row finish

						if( $contained ) $this->html .= '</div>'; // Container finish

					$this->html .= '</div></div>'; // Section finish

					$s++;

				endif;

			endwhile;

			$this->html .= '</div>'; // Main Wrapper finish

			return $this->html;

		else :

			return '';

		endif;

	}

	/**
	 * Admin function to add the fields to wordpress. Also figures out where to show them based on the acfs_add_support and acfs_remove_support functions
	 */
	public function addFieldsToWP() {

		if( !$this->acf_active ) return false;

		if( function_exists('acf_add_local_field_group') ) {

			// Get the exported field data

			$json = file_get_contents( plugin_dir_path(__FILE__) . '../admin/acf-fields.json' );

			$json_to_php = json_decode( $json, true );

			$acf_fields_array = $json_to_php[0]['fields'];

			// Check if SCF is included or leave it out of the list of fields if not

			if( !$this->scf_active ) {

				foreach ($acf_fields_array[1]['layouts'] as $key => $data) {
					
					if( $data['name'] === 'simple_contact_forms' ) {

						unset( $acf_fields_array[1]['layouts'][$key] );

						break;

					}

				}

			}

			// Create the rest of the field group

			$meta = array(
				'key' 					=> 'group_553b8b2752aba_pb10192283',
				'title' 				=> 'Page Builder',
				'fields' 				=> $acf_fields_array,
				'menu_order' 			=> 10,
				'position' 				=> 'normal',
				'style' 				=> 'default',
				'label_placement' 		=> 'top',
				'instruction_placement' => 'label',
				'hide_on_screen' 		=> array (),
				'location' 				=> array(),
				'active'				=> 1,
				'description' 			=> '',
			);

			// Filter to get the locations

			$location = apply_filters( 'acfpb_set_locations', array() );

			$l = 0;

			foreach ($this->supported_formats as $format) {

				if( !isset($location[$format]) || empty($location[$format]) ) continue;
					
				$meta['location'][$l] = array();

				foreach ($location[$format] as $place) {

					$meta['location'][$l][] = array(
						'param' 	=> $format,
						'operator' 	=> '==',
						'value' 	=> $place,
					);

					$l++;

				}

			}

			acf_add_local_field_group($meta);

		}

	}

	/**
	 * Get the Banner section.
	 * @return String Final string of this section
	 */
	private function getSection_banner() {

		$class = $this->use_bs ? 'img-responsive' : '';

		$html = '<div class="banner-holder">';

			$html .= '<img src="' . get_sub_field('image') . '" class="' . $class . '" />';

			if( get_sub_field('use_text') ) $html .= '<div class="acfpb-hover-text">' . get_sub_field('text_on_image') . '</div>';

		$html .= '</div>';

		return $html;

	}

	/**
	 * Get the button section.
	 * @return String Final string of this section
	 */
	private function getSection_button() {

		$class = get_sub_field('button_class');

		$text = get_sub_field('button_text');

		switch ( get_sub_field('link_to_page') ) {

			case 'anchor':
				$href = '#' . get_sub_field('button_anchor');
				break;

			case 'external':
				$href = get_sub_field('external_link');
				break;

			case 'internal':
				$href = get_sub_field('internal_link');
				break;
			
			default:
				$href = '#';
				break;

		}

		$html = '<a href="' . $href . '" class="' . $class . '">' . $text . '</a>';

		return $html;

	}

	/**
	 * Get the Content Grid section.
	 * @return String Final string of this section
	 */
	private function getSection_content_grid() {

		$blocks = get_sub_field('content_columns');

		$html = '';

		if( count($blocks) > 0 ) :

	        foreach($blocks as $block) {

	            $html .= '<div class="col-sm-' . $block['width'] . ' col-sm-offset-' . $block['offset'] . '">';

	                $html .= $block['content'];

	            $html .= '</div>';

	        }; 

		endif;

		return $html;

	}

	/**
	 * Get the Gallery section.
	 * @return String Final string of this section
	 */
	private function getSection_gallery() {

		$images = get_sub_field('images');

		$html = '';

		switch ( get_sub_field('images_per_row') ) {

			case '2':
				$first_class = 'col-sm-offset-2';
				$class = 'col-sm-4';
				break;

			case '3':
				$first_class = '';
				$class = 'col-sm-4';
				break;

			case '5':
				$first_class = 'col-sm-offset-1';
				$class = 'col-sm-2';
				break;

			case '6':
				$first_class = '';
				$class = 'col-sm-2';
				break;
			
			default:
				$first_class = '';
				$class = 'col-sm-3';
				break;
		}

		if( count($images) > 0 ) :

			$i = 1;

	        foreach($images as $item) {

	        	if( $i === 1 ) $class .= ' ' . $first_class;

	            $html .= '<div class="' . $class . '">';

	                $html .= '<img src="' . $item['image'] . '" class="' . ($this->use_bs ? 'img-responsive' : '') . '" />';

	                if( $item['title'] !== '' ) $html .= '<h4>' . $item['title'] . '</h4>';

	                if( $item['caption'] !== '' ) $html .= '<p>' . $item['caption'] . '</p>';

	            $html .= '</div>';

	            $i++;

	        }; 

		endif;

		return $html;

	}

	/**
	 * Get the Raw HTML section.
	 * @return String Final string of this section
	 */
	private function getSection_raw_html() {

		$html = get_sub_field('html');

		return $html;

	}

	/**
	 * Get the Simple Contact Forms section.
	 * @return String Final string of this section
	 */
	private function getSection_simple_contact_forms() {

		if( !function_exists('simple_contact_form') ) return '';

        $options = array();

        if( get_sub_field('form_title') !== '' ) $options['form_title'] = get_sub_field('form_title');
        
        if( get_sub_field('button') == true ) {

            $options['button'] = true; 
            $options['form_collapsed'] = true;

        	if( get_sub_field('btn_text') !== '' ) $options['btn_text'] = get_sub_field('btn_text');

        }
        
        if( get_sub_field('email_subject') !== '' ) $options['email_subject'] = get_sub_field('email_subject');

        $options['return'] = true;

        $html = simple_contact_form( $options );

		return $html;

	}

	/**
	 * Get the WYSIWYG section.
	 * @return String Final string of this section
	 */
	private function getSection_wysiwyg() {

		$html = get_sub_field('content');

		return $html;

	}
	
		
	/**
	 * Get the Accordion section.
	 * @return String Final string of this section
	 */
	private function getSection_accordion_row() {

		$blocks = get_sub_field('accordion_row');

		$html = '';

		if( count($blocks) > 0 ) :

	        foreach($blocks as $block) {

	            $html .= '<div class"accordion-title">';

	                $html .= $block['accordion-title'];

	            $html .= '</div>';
				
				$html .= '<div class"accordion-content">';

	                $html .= $block['content'];

	            $html .= '</div>';

	        }; 

		endif;

		return $html;

	}

}

Hello, Hope you all doing good. I am working on a Gutenberg block and getting stuck to the following. I found out that by using a bit of code I can change the fields added to the WYSIWYG bars.

What I would like to do, is change this, but only for a couple of type of fields. Basicly I want to able to have the normal WYSIWYG options + a more basic one.

I now have the following code, but not working due to remove_filter always overrules my earlier add_filter.

add_filter('acf/load_field/type=wysiwyg', 'normal_wysiwyg_field', 9, 1);

// Change the basic wysiwyg interface for basic blocks
function basic_wysiwyg( $toolbars ) {

  $toolbars['Basic'][1] = array(
    'bold',
    'italic',
    'underline',
    'strikethrough',
    'link'
  );

	unset( $toolbars['Full'] );

	return $toolbars;
}

// Add the earlier function as a filter to the targeted field
function normal_wysiwyg_field($field) {
  $basic_wysiwyg_fields = array(
    'field_5bcc4ed44d858'
  );

  if(in_array($field['key'], $basic_wysiwyg_fields)) {
    add_filter('acf/fields/wysiwyg/toolbars', 'basic_wysiwyg');
  } else {
    remove_filter('acf/fields/wysiwyg/toolbars', 'basic_wysiwyg');
  }
  return $field;
}

Hope you can help me figure this out.

Hi,
I’m currently running a website with reviews of music albums. I created some custom fields, like ARTIST, ALBUM, SCORE and so on. I’m struggling with the information of the music tracks and bandmembers. Below and example:

music tracks
1. I Can’t Hold Back 3:59
2. High on You 4:09
3. First Night 4:17
4. The Search Is Over 4:13
5. Broken Promises 4:01
6. Popular Girl 3:39
7. Everlasting 3:52
8. It’s The Singer, Not The Song 4:34
9. I See You in Everyone 4:26

band members:
Jimi Jamison: lead and backing vocals
Jim Peterik: bass, guitar, keyboards, vocals
Mickey Thomas: backing vocals
Marc Droubay: drums
Stephan Ellis: bass
Frankie Sullivan: backing guitar, vocals, vocals
Billie Lee Lewis: percussion

I tried field type text area and WYSIWYG, but in both cases when I want to display the fields in ELEMENTOR, I lost the “list” structure and ELEMENTOR showed me the entry like this:

Steve Perry lead vocals Jonathan Cain keyboards, guitar, vocals Ross Valory bass, vocals Steve Smith drums Neal Schon guitars, vocals

Is there any solution to enter the data in ACF in order to get the result in ELEMENT like the examples above?

Thanks

I have a custom media button that opens the media manager, selects a PDF, and inserts it back into the editor as a shortcode. This works great in the standard Classic WordPress editor, however, it does not work with ACF WYSIWYG fields. The ACF WYSIWYG fields do show the custom button but it doesn’t capture the click.

Can you help point me to information as to how to make my custom media buttons work with ACF WYSIWYG fields?

Code that adds the button is here:
https://github.com/TwisterMc/pdfjs-viewer-shortcode/blob/develop/inc/media-button.php

Code that triggers the upload window is here:
https://github.com/TwisterMc/pdfjs-viewer-shortcode/blob/develop/pdfjs-media-button.js

I do know that I need to change the click function from an ID to a class if I have two buttons on the page, but even then, it doesn’t work.

Any help is appreciated. Thanks.

I have installed Qtranslate-xt that integrate the last version of ACF-Qtranslate inside modules.
https://github.com/qtranslate/qtranslate-xt

I have ACF-pro last version installed and the classic-editor plugin.

When I use the wysiwyg field and use tinymce, I switch language and update but the wysiwyg custom field doesn’t update but still have the previous language content. I don’t want to use the textfield because I need the wysiwyg. Any suggestion to fix this? I’m going crazy. 🙂

Thanks!