Support

Account

Register Login

Home › Forums › Gutenberg › ACF Blocks – Need stable id

Solving

ACF Blocks – Need stable id

  • I often use the ACF block id for custom styling. However, using the new 6.0 block system, I don’t know how to automatically assign and save a consistent id for a given block. Whenever I change the fields, the id of the block changes, making my custom styles moot. Are there any official or workaround methods available to assign a permanent, unique id to a given block? Thank you!

  • I can into the same problem with the suggested solution from ACF. But further research showed that only attributes set directly in the $block scope are reset. Setting it in $block[‘data’] makes it persistent

    function mypre_add_anchor_to_blocks( $attributes ) {

	error_log('attributes');
	error_log( print_r( $attributes, true ) );

    if( !isset($attributes['data']['customvalue']) || empty($attributes['data']['anchor']) ) {
        $attributes['data']['customvalue'] = 'block-' . uniqid();
    }
    return $attributes;
}
add_filter('acf/pre_save_block', 'mypre_add_anchor_to_blocks');

    Notice – on first save of the page you need to reload the admin page with the editor to make the block include the new attribute.

  • This seems promising, however in my testing the $attributes[‘data’][‘customvalue’] value is not saving correctly to the block. Every time I change the block, it is resetting the ‘customvalue’. That is, ACF is not seeing that it was already set in the block [‘data’]. Am I missing something? Thanks!

  • Try reloading the page after first save – or leave editing and go back.
    The AJAX save of WP doesn’t return the new block content with the added attribute, but if you reload after first save it’s there.

  • Still unfortunately not working. Here is my filter code:

    add_filter(
    'acf/pre_save_block',
    function( $attributes ) {

        error_log( print_r( $attributes, true ) );

        if ( empty( $attributes['data']['clb-custom-anchor'] ) ) {
            $attributes['data']['clb-custom-anchor'] = 'acf-block-' . uniqid();
        }

        return $attributes;
    }
);

    Here is a very short video to explain what is happening:
    https://www.dropbox.com/s/locxy298szdvik0/Blocky%20-%20ACF%202.0%20Blocks%20Not%20Working.mov?dl=0

    I really appreciate your help here! Thank you!

  • It does seem strange. I’m battling similar issues and I suspect they are related. At this point it seems that it is in fact WP that filters the attributes and not ACF, but I’m not completely sure. I’ll let you know when I get closer to a conclusion…or a workaround.

  • Thank you! I was hoping that ACF would have more documentation around this, but I understand that version 2.0 of ACF Blocks are very new. Please update me when you have more info.

  • I did some testing with using block.json to register a block and declare your clb-custom-anchor explicitly and it worked. It doesn’t seem possible to do the same way with acf_register_block_type.

    Using block.json is the new standard, so it makes sense to do it that way. Have you looked into it? The transsition isn’t that bad. If you json_encode you settings from the acf_register_block_type array it’s mostly usable with the block.json format.

  • OK, we are getting close. I am new to using block.json, but I am starting to use it now with ACF Blocks 2.0. Could you show me how you registered and declared that data? Thank you!

  • If you paste your block registration array – or the entire function here, I’ll see if I can put something together for you.

    I’m sure it will make sense when you see it 🙂

  • Sure, here’s my block.json file:

    {
    "name": "acf/clb-custom-info-card",
    "title": "Info Card",
    "description": "A custom info card block.",
    "style": [ "file:./clb_custom_info_card.css" ],
    "category": "common",
    "icon": "admin-comments",
    "keywords": ["testimonial", "quote"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "clb_custom_info_card.php"
    },
    "align": "full",
}

  • Slightly modified

    {
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "acf/clb-custom-info-card",
    "title": "Info Card",
    "description": "A custom info card block.",
    "style": [ "clb_custom_info_card.css", "clb-custom-info-card-style" ],
    "category": "common",
    "icon": "admin-comments",
    "keywords": ["testimonial", "quote"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "clb_custom_info_card.php"
    },
    "align": "full"
}

    Save it as card-block.json and place in theme subfolder /acf-blocks/ – or where you like. Just adjust paths.

    Filename can be changed, but must end with -blocks.json (discovered this after lots of debuging)

    Style value can break the loading if the file can’t be found. It should be relative to the card-block.json

    In your functions.php you can load it with

    register_block_type(
    get_template_directory() . '/acf-blocks/card-block.json'
);

    I placed it in a subfolder to the theme /acf-blocks/ with clb_custom_info_card.cssin the same folder.

    You can declare expected attributes with a static default value by adding this node in the json.

    "attributes": {
    "my_custom_attribute": {
        "type": "string",
        "default": "a_default_value"
     }
  }

  • For some reason, this is what I got working, at least for now:

    block.json

    {
    "name": "acf/clb-custom-info-card",
    "title": "Info Card",
    "description": "A custom info card block.",
    "style": [ "file:./clb_custom_info_card.css" ],
    "category": "common",
    "icon": "admin-comments",
    "keywords": ["testimonial", "quote"],
    "acf": {
        "mode": "preview",
        "renderTemplate": "clb_custom_info_card.php"
    },
    "align": "full",
    "providesContext": {"acf/fields": "data"},
    "attributes": {
        "clb_custom_id": {
            "type": "string",
            "default": "1234abcd"
         }
      }
}

    And then my acf/pre_save_block filter:

    
add_filter(
    'acf/pre_save_block',
    function( $attributes ) {

        //error_log('attributes');
        error_log( print_r( $attributes, true ) );

        // if ( empty( $attributes['clb_custom_id'] ) ) {
        //     $attributes['clb_custom_id'] = 'clb_custom_id-' . uniqid();
        // }

        if( !$attributes['clb_custom_id'] ) { $attributes['clb_custom_id'] = uniqid(); }

        // if ( empty( $attributes['data']['clb_custom_id'] ) ) {
        //     $attributes['data']['clb_custom_id'] = 'clb_custom_id-' . uniqid();
        // }

        return $attributes;
    }
);

  • Great that you got it working! I’m sure there will many users in similar situations

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

You must be logged in to reply to this topic.