use-is-editing-block

A React hook for WordPress Gutenberg block development to determine if a block (parent or inner blocks) is being edited.

Installation

Install the package via npm:

npm install use-is-editing-block

Usage

This hook helps you determine if a specific Gutenberg block or its inner blocks are being edited.

Example:

import { useIsEditing } from 'use-is-editing-block';

const MyBlockComponent = ({ clientId }) => {
  const isEditing = useIsEditing(clientId, 'all');

  return <div>{isEditing ? 'Editing...' : 'Not editing'}</div>;
};

Arguments

• clientId (string, required): The unique client ID of the Gutenberg block to check.
• scope (string, optional): Determines the scope of the check:
  • 'parent': Checks if the parent block or its direct inner blocks are selected.
  • 'all' (default): Checks if the parent block or any nested inner block is selected/being edited.

Return Value

The hook returns a boolean value:

• true: If the block or its specified inner blocks are being edited.
• false: Otherwise.

Integration with WordPress Gutenberg Blocks

This hook is designed specifically for WordPress Gutenberg block development. It leverages the @wordpress/data package to interact with the block editor state.

Ensure your WordPress development environment includes the necessary dependencies, such as @wordpress/data and react.

Dependencies

Peer Dependencies

Ensure the following dependencies are installed in your project:

• react: ^16.8.0 or newer.
• @wordpress/data: The latest version compatible with your WordPress setup.

License

This package is licensed under the MIT License. See the LICENSE file for details.

For Contributors

If you'd like to contribute:

1. Clone the repository:

   git clone https://github.com/sultann/use-is-editing-block.git

2. Install dependencies:

   npm install

3. Build the package:

   npm run build

4. Test your changes in a WordPress Gutenberg block development environment.

Feel free to open issues or submit pull requests to improve this package!