ACF integration for WordPress Gutenburg blocks

acf-gutenburg-blocks.php

<?php
add_filter('acf/location/rule_types', function ( $choices ) {
    $choices['Gutenburg']['block_type'] = 'Block Type';
    return $choices;
}, 10, 1);

add_filter('acf/location/rule_values/block_type', function ( $choices, $data ) {
    return
      '<input type="text" data-ui="0" data-ajax="0" data-multiple="0" data-allow_null="0" ' .
        'id="acf_field_group-location-' . $data['group'] . '-' . $data['id'] . '-value" ' .
        'name="acf_field_group[location][' . $data['group'] . '][' . $data['id'] . '][value]" ' .
        'value="' . $data['value'] . '" />';
}, 10, 2);

add_filter('acf/location/rule_match/block_type', function ( $match, $rule, $options ) {
  return ($rule['operator'] === '==') === ($_REQUEST['block_type'] == $rule['value']);
}, 10, 3);

add_action('wp_ajax_gutenburg_match_acf', function () {
  $response = array();

  foreach ( acf_get_field_groups() as $field_group ) {
    if (acf_get_field_group_visibility($field_group)) {
      $field_group['fields'] = acf_get_fields($field_group) ?: [];

      if ($field_group['fields']) {
        ob_start();
        acf_render_fields($field_group['fields']);
        $field_group['html'] = ob_get_contents();
        ob_end_clean();
      } else {
        $field_group['html'] = '';
      }

      $response[] = $field_group;
    }
  }

  wp_die(json_encode($response));
});

add_action('admin_footer', function () {
  if (!get_the_ID()) {
    return;
  }
  ?>
<script>
(function ($) {
  wp.hooks.addFilter('blocks.getSaveContent.extraProps', 'acf', function (element,blockType,attributes) {
      console.log('addProps', element,blockType, attributes);

      if (blockType) {
        blockType.attributes.id = { type: 'string' };
        blockType.attributes.acf_data = { type: 'string' };
      }
      if (!attributes.id) {
        attributes.id = 'TESTING';
      }
    return element;
  });

  wp.hooks.addFilter('blocks.registerBlockType', 'acf', function (settings, name) {
    console.log('register', settings, name);
    settings.attributes.acf_data = { type: 'string' };
    settings.attributes.id = { type: 'string' };
    return settings;
  });

  function FindReactNode(el) {
    for (var key in el) {
      if (/^__reactInternalInstance\$/.test(key)) {
        console.log('origNode', el[key]);
        return (el[key].return && el[key].return.stateNode) || {};
      }
    }

    return {};
  };

  $('#editor').each(function () {
    console.log('editor', this);
    $(document.body).on('click', this, function () {
      $(this).find('.is-selected').each(function () {
        var SelectedNode = this,
            ReactNode = FindReactNode(SelectedNode);

        // console.log('click', SelectedNode);

        if (!ReactNode) {
          return;
        }

        var NodeID = $(SelectedNode).find('[data-block]').data('block');

        $('.edit-post-sidebar').each(function () {
          var SideBar = this;

          if ($(this).find('[aria-label^="Block"].is-active').length < 1) {
            console.log('"Block" tab not open');
            return;
          }

          var $panel = $(this).find('.components-panel');

          if ($panel.find('.acf-field-group-container').length > 0) {
            // console.log('already has container group');
            return;
          }

          console.log('ReactNode', ReactNode);


          $.ajax({
            url: ajaxurl,
            method: 'POST',
            data: {
              action: 'gutenburg_match_acf',
              block_type: $(SelectedNode).data('type'),
            },
            success: function (data) {
              try {
                var field_groups = JSON.parse(data);
              } catch (e) {
                console.log('ACF-Gutenburg: Couldn\'t parse AJAX response', data)
                return;
              }

              field_groups.sort(function (a, b) {
                return a.menu_order - b.menu_order;
              }).forEach(function (group) {
                var id = 'acf-field-group-' + group.ID,
                    $container = $('#' + id);

                console.log(group);

                if (!$container || $container.length < 1) {
                  $container = $('<form id="' + id + '" class="acf-field-group-container components-base-control"></form>');
                }

                if ($container.parents('.components-panel__body.is-opened').length < 1) {
                  $(SideBar).find('.components-panel__body.is-opened').append($container);
                }

                $container.html(group.html);

                acf.do_action('ready', $container);

                var params = JSON.parse('{"' + decodeURI($container.serialize()).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}');
                
                wp.hooks.addFilter( 'blocks.BlockEdit', 'acf', function (element) {
                  return function (props) {
                    var be = wp.element.createElement(element, props, 'test');

                    if (props.id == NodeID) {
                      be.props.setAttributes({ acf_data: JSON.stringify(params) });
                    }

                    return be;
                  }
                });

                $(document.body).on('change', $container, function (e) {
                  params = JSON.parse('{"' + decodeURI($container.serialize()).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
                });

                $container.trigger('change');

                console.log($container);
              });
            }
          });
        });
      });
    });
  }).trigger('click');
})(jQuery);
</script>
<?
}, 0);

forgive my ignorance but if I have Gutenberg and ACF pro installed, am I able to use this plugin to create my own custom block types with ACF? and if so, how do I install this into my WP installation? (sorry, I'm a frontend designer and have only just learned WP)