Add onBlockRegistration and onBlockEdit utils

README.md

@@ -109,6 +109,12 @@ React hooks to be used in your admin screens or custom blocks.
 
 Handy utility functions.
 
+- `getBlockStyle(className: string)`: Get the selected/applied block style by its classname.
+- `onBlockRegistration(blockName, namespace, callback)`: Allows hooking into the registerBlockType hook of a specific
+  block. Avoid having to check for the block name in your callback.
+- `onBlockEdit(blockName, namespace, callback, higherOrderComponent = false)`: Allows hooking into the BlockEdit hook of
+  a specific block. Avoid having to check for the block name in your callback.
+
 [More Information](src/utils/README.md)
 
 ## PHP

package.json

@@ -48,6 +48,7 @@
     "@wordpress/core-data": "^6.28.7",
     "@wordpress/data": "^9.21.1",
     "@wordpress/element": "^5.28.1",
+    "@wordpress/hooks": "^3.51.1",
     "@wordpress/html-entities": "^3.51.1",
     "@wordpress/i18n": "^4.51.1",
     "@wordpress/interface": "^5.28.5",

src/utils/README.md

@@ -24,6 +24,57 @@ const BlockEdit = ({ attributes }) => {
 };
 ```
 
+### `onBlockRegistration(blockName, namespace, callback)`
+
+Allows hooking into the registerBlockType hook of a specific block.
+Avoid having to check for the block name in your callback.
+
+- `blockName` (string): The blockName (slug) in which to hook.
+- `namespace` (string): The namespace for the addFilter call.
+- `callback` ((settings: object) => object) The callback to the filter. Get passed the settings object and should return
+  the filtered settings object.
+
+**Example**
+
+```js
+onBlockRegistration("core/columns", "custom/columns", (settings) => {
+    return {
+        ...settings,
+        supports: {
+            spacing: false,
+            ...settings.supports,
+        }
+    }
+});
+```
+
+### `onBlockEdit(blockName, namespace, callback, higherOrderComponent = false)`
+
+Allows hooking into the BlockEdit hook of a specific block.
+Avoid having to check for the block name in your callback.
+
+- `blockName` (string): The blockName (slug) in which to hook.
+- `namespace` (string): The namespace for the addFilter call.
+- `callback` ((BlockEdit: React.ReactElement, props: object) => React.ReactElement) block edit component, gets passed
+  the original BlockEdit and any props for it.
+- `higherOrderComponent` (string|false): Whether to wrap the render in a higher order component. Can be a string to name
+  the HOC or false to not wrap it. Defaults to false.
+
+**Example**
+
+```js
+onBlockEdit("core/columns", "custom/columns", (BlockEdit, props) => {
+    return (
+        <>
+            <BlockEdit {...props} />
+            <InspectorControls>
+                <CustomControl/>
+            </InspectorControls>
+        </>
+    )
+}, "withCustomControls");
+```
+
 ## Records
 
 ### `getRecordTitle(record: EntityRecord)`

src/utils/blocks.js

@@ -1,3 +1,6 @@
+import { addFilter } from "@wordpress/hooks";
+import { createHigherOrderComponent } from "@wordpress/compose";
+
 /**
  * Get the selected/applied block style by its class name.
  *
@@ -14,4 +17,59 @@ const getBlockStyle = (className) => {
     return styles[1];
 };
 
-export { getBlockStyle };
+/**
+ * Allows hooking into the registerBlockType hook of a specific block.
+ * Avoids having to check for the block name in your callback.
+ *
+ * Call like `onBlockRegistration("core/button", "custom/button", callbackFunction)`.
+ *
+ * @param {string}                       blockName The blockName (slug) in which to hook.
+ * @param {string}                       namespace The namespace for the addFilter call.
+ * @param {(settings: object) => object} callback  The callback to the filter.
+ *                                                 Get passed the settings object and should return the filtered settings object.
+ */
+const onBlockRegistration = (blockName, namespace, callback) => {
+    addFilter("blocks.registerBlockType", namespace, (settings, name) => {
+        if (name !== blockName) {
+            return settings;
+        }
+        return callback(settings);
+    });
+};
+
+/**
+ * Allows hooking into the BlockEdit hook of a specific block.
+ * Avoids having to check for the block name in your callback.
+ *
+ * Call like `onBlockEdit("core/button", "custom/button", callbackFunction)`.
+ *
+ * @param {string}                                                               blockName            The blockName (slug) in which to hook.
+ * @param {string}                                                               namespace            The namespace for the addFilter call.
+ * @param {(BlockEdit: React.ReactElement, props: object) => React.ReactElement} callback             The render function of your custom block edit component, gets passed the original BlockEdit and any props for it.
+ * @param {string|false}                                                         higherOrderComponent Whether to wrap the render in a higher order component.
+ *                                                                                                    Can be a string to name the HOC or false to not wrap it.
+ */
+const onBlockEdit = (
+    blockName,
+    namespace,
+    callback,
+    higherOrderComponent = false
+) => {
+    let filterCallback = (BlockEdit) => {
+        return (props) => {
+            if (props.name !== blockName) {
+                return BlockEdit(props);
+            }
+            return callback(BlockEdit, props);
+        };
+    };
+    if (higherOrderComponent) {
+        filterCallback = createHigherOrderComponent(
+            filterCallback,
+            higherOrderComponent
+        );
+    }
+    addFilter("editor.BlockEdit", namespace, filterCallback);
+};
+
+export { getBlockStyle, onBlockRegistration, onBlockEdit };