Disable Links in ACF Block-Edit Method

disable-acf-blocks-on-edit.js

/*
 * Wrap all ACF Blocks in Disabled block to disable all links in edit view
 */
const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
import { Disabled } from '@wordpress/components';


const withDisabledCompontent =  createHigherOrderComponent( ( BlockEdit ) => {
  return ( props ) => {

      // only wrap block when it's a acf block in preview mode
      if (
        ! props.name.startsWith('acf/')
        || 'preview' != props.attributes.mode
      ) {
        return <BlockEdit { ...props } />;
      };


      return (
          <Fragment>
            <Disabled>
              <BlockEdit { ...props } />
            </Disabled>
          </Fragment>
      );
  };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'derweili/disabled-acf-blocks', withDisabledCompontent );

Thanks..

Thanks but not working on my end... How should that be enqueued ?

how to use that piece of code please?

@nicmare

how to use that piece of code please?

You need to add this code to a plugin or theme. This is ESNext JavaScript Code so you need a built setup.

WordPress has a documentation on this: https://developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/
And here's the link to the general JavaScript Block Editor Guide: https://developer.wordpress.org/block-editor/how-to-guides/javascript/

You can also use create-guten-block as a boilerplate

https://github.com/ahmadawais/create-guten-block

But insted of registering a new block, you register a filter.