Support

Account

Register Login

Home › Forums › ACF PRO › ACF6 + register_block_type + assets

Solving

ACF6 + register_block_type + assets

  • In the past i could write this:

    acf_register_block_type(array(
			'name'              => 'quickbooker',
			'title'             => __('Quickbooker','lmdm'),
			'description'       => __('Buchungsformular','lmdm'),
			'render_template'   => plugin_dir_path( dirname( __FILE__ ) ).'template-parts/blocks/quickbooker/index.php',
			'category'          => 'widgets',
			'icon'              => 'calendar-alt',
			'mode'              => 'preview',
			'enqueue_assets' => function(){
				wp_enqueue_style( 'daterangepicker.css' );
				wp_enqueue_script( 'moment.min.js', array('jquery'), '', true );
				wp_enqueue_script( 'block-qb-daterange', 'daterangepicker.js', array('jquery'), '', true );
				wp_add_inline_script('block-qb-daterange','jQuery(document).ready(function($) { $(".dates").daterangepicker( { autoUpdateInput: false, autoApply: true, showISOWeekNumbers: true, minDate: "'.date_i18n("d.m.Y", strtotime("+1 day")).'",locale: { format: "DD.MM.YYYY", firstDay: 1, daysOfWeek: ["So","Mo","Di","Mi","Do","Fr","Sa"], monthNames: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],applyLabel: "speichern",cancelLabel: "abbrechen"} } ).on("apply.daterangepicker", function(ev, picker) { $(this).val(picker.startDate.format("DD.MM.YYYY")+" - "+picker.endDate.format("DD.MM.YYYY")); $(this).closest("form").find("input[name=arrival]").val(picker.startDate.format("DD.MM.YYYY")); $(this).closest("form").find("input[name=departure]").val(picker.endDate.format("DD.MM.YYYY")); }) });');
				wp_enqueue_script( 'block-qb-script', 'script.js', array('jquery'), '123', true );
				
			}
		));

    now i try to convert it according to ACF6 to use the native “register_block_type” function. How can i enqueue multiple javascript assets? This works:
    i need to write wp_enqueue_script(“my_handle”…) in functions.php then i can call it in the block.json like: script: “my_handle”.
    But how to call the other assets as well?
    this works NOT:
    script: [“my_handle”,”another_handle”]
    this will trigger a fatal error. and how to take dependencies into account?

    and when i add acf key into the block.json file, phpstorm shows “Property acf is not allowed”. How to validate the json file then?

  • I’m having trouble too, I’ve tried the suggested stuff on wordpress.org which seems to be to use wp_register_script instead of wp_enqueue_script – the difference being that it registers it but doesnt load it. Then you call it within the block.json file referencing the handle see here

    So add your wp_register_script in a enqueue_block_editor_assets action eg.

    
add_action( 'enqueue_block_editor_assets', function(){
	wp_register_script( 'block-qb-daterange', get_template_directory_uri() . '/script-url-here.js', array(''), null, true );
});

    then in block.json you can use script for global (front and admin) or editorScript key for just loading into the editor, basically anything on that link earlier

    
{
    "script": "block-qb-daterange",
}

  • yes thats my current status quo. you can load ONE js-file with the handle passed through “script” key. But i need to load multiple js-files. so this won’t work at the moment:

    {
    "script": ["block-qb-daterange","another-handle"],
}

  • Support for loading multiple JS files in the script parameter of block.json is coming to WordPress 6.1. more context is available in this pull request for wordpress-core

    As documented at
    https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#script

  • for viewScript multiple handles seem to work already
    "viewScript": [ "file:./careers-collage.js", "jquery" ],

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

You must be logged in to reply to this topic.