Support

Account

Register Login

Forum Replies Created

  • I just did some experiments and I struggle a bit with how the workflow should be.

    Here’s how I did it to create block in my custom post type template.

    – register_block_type(... path to folder containing block.json ...)

    – My block.json looks like this

    {
	"name": "my-theme/template-quote",
	"title": "Template Quote",
	"category": "theme",
	"icon": "format-quote",
	"style": "wp-block-quote",
	"acf": {
		"usePostMeta": true,
		"renderTemplate": "./template-quote.php"
	}
}

    – Adding a field group for this block.

    – When using Editor for block theme creating a custom template, the above block was not pickable until I removed the row "usePostMeta": true, so I added the block before adding the row again.

    – This was not enough to get the block editable when editing my custom post, because it was “outside” of my “Content” block, but it shows up in when using the Template Preview functionality.

    – I tried to add my custom post type to the ACF field group location rule, so it shows up for block or post type. I also changed presentation positiα»‹n to “Side”, to get my ACF fields to show up in my custom post type sidebar in the block editor.

    Final thoughts / wishes / bugs(?)

    – To be able to add my block to the custom post type single template in the theme editor when usePostMeta: true, is important for my current dev workflow for building a block theme.

    – Editing my custom fields in the post editor sidebar will not update the block preview. Currently I need to reload the editor after update to see my changes in preview mode.

    – In Template Preview mode, I’m missing to be able to select my block to edit it – this would be awesome.

  • @xxaimsxx Yes of course. I just wanted it to be disabled front-end to feel more consistent, but I have not looked at this for awhile. Maybe it has changed.

  • I ended up solving this with a class that use a static boolean, to check if it’s already rendered or not.

    class My_Custom_Field_Content {
   private static $rendered = false;

   public static function render() {
       if (self::$rendered === true) {
           // ignore rendering
           return;
       }

       self::$rendered = true;

       echo 'Well, hello there!';
   }
}

add_action('acf/render_field/key=field_123xyz', My_Custom_Field_Content::class . '::render' );

  • This JavaScript and CSS as a workaround works pretty good for my project if anyone needs this.

    JavaScript:

    
acf.addAction("ready", function() {
	const disabledTrueFalse = acf.getField("enter_field_key_here");

	if (!disabledTrueFalse.$el.length) {
		return;
	}

	disabledTrueFalse.$input().prop("disabled", true);
});

    Messy CSS πŸ˜€

    
.acf-field-true-false input[type="checkbox"][disabled] {
  cursor: default;
}

.acf-field-true-false input[type="checkbox"][disabled].acf-switch-input {
  opacity: 0;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch,
.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch:hover {
  cursor: default;
  color: #fff;
  background-color: #aaa;
  border-width: 0;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch .acf-switch-slider {
  background-color: #eee;
  border-color: #aaa;
}

.acf-field-true-false input[type="checkbox"][disabled] + .acf-switch .acf-switch-on {
  text-shadow: none;
}

  • I found out that the select2 can be refreshed by calling the change.select2.

    
var field = acf.getField('acf-field-key');
var $select = field.$el.find('select');

// Could also be jQuery collection, optgroup elements or HTML string if working
const newOptions = [
    new Option('New label', 'new-value'),
    new Option('Another option', 'another-value')
];

// Clear previous elements
$select.empty();

// Add new options to select element
$select.append(newOptions);

// Set a new selected option
$select.val('new-value');

// Refresh select2
$select.trigger('change.select2');

    You can of course keep or alter previous elements, instead of removing them. I guess you could do pretty much anything before triggering the change.select2 event.

    I hope the JavaScript API will update in the future to a non jQuery solution

  • @okadots The acf/settings/save_json filter needs a single path, where the JSON files should be saved while working in admin.

    But if you want to load JSON files from multiple folders, you should use the acf/settings/load_json and return an array of paths πŸ™‚

    I’m guessing you want something like this:

    add_filter('acf/settings/load_json', 'my_acf_json_load_point');
function my_acf_json_load_point( $paths = array() ) {
	$paths = array( THEME_DIR . '/config/acf-configs/acf-json' );

	if ( is_child_theme() ) {
		$paths[] = CHILD_THEME_DIR . '/config/acf-configs/acf-json';
	}

	return $paths;
}

    And save to child theme dir when working in child theme?

    add_filter('acf/settings/save_json', 'my_acf_json_save_point');
function my_acf_json_save_point( $path = '' ) {
	$path = THEME_DIR . '/config/acf-configs/acf-json';

	if ( is_child_theme() ) {
		$path = CHILD_THEME_DIR . '/config/acf-configs/acf-json';
	}

	return $path;
}

  • @cakeandeatitdesigns Did you update by downloading the plugin from the site, or in another way?

    acf-input.min.js?ver=5.7.2 will probably be cached in the browser so I recommend to empty the browser cache after the update.

    I use Composer for installing new versions, but I had to clear the Composer cache to remove the Composer cached wrong version.

  • I have the same JS-error after updating to 5.7.2

  • @joelstransky Interesting. I don’t remember where I used this in the first place, but I test it when/if I do πŸ˜€

  • Thank you for explaining πŸ™‚

  • The same issue for me in ACF 5.2.7

  • I think it would be safer to use the filters for this. In my setup I want to use both the child theme and parent theme acf-json, but only save to the child theme acf-json folder:

    add_filter('acf/settings/save_json', function() {
	return get_stylesheet_directory() . '/acf-json';
});

add_filter('acf/settings/load_json', function($paths) {
	$paths = array(get_template_directory() . '/acf-json');

	if(is_child_theme())
	{
		$paths[] = get_stylesheet_directory() . '/acf-json';
	}

	return $paths;
});

    Documented here.

    I hope it helps πŸ™‚

Viewing 12 posts - 1 through 12 (of 12 total)