Home Forums ACF PRO ACF6 + register_block_type + assets


ACF6 + register_block_type + assets

  • In the past i could write this:

    			'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 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"],
  • 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"],
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.