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" ],
today i had some capacities to give it a try. because there is a viewScript node, i discovered there is also a viewStyle node. And both are working similar. They both load the assets only if the block i actually used. But viewStyle loads the file as inline-css in the <body>. So this seems finally solved for me.
my old code:
"style": ["file:./assets/tabgroup.css","tabgroup"],
"script": ["file:./assets/tabgroup.js","tabgroup"],
recent working code:
"viewStyle": ["file:./assets/tabgroup.css","tabgroup"],
"viewScript": ["file:./assets/tabgroup.js","tabgroup"],
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.