fix(editor): Ensure reliable unregistration of block variations

Introduces a mechanism to wait for target blocks to be fully registered in the editor store before attempting to unregister their variations. This prevents potential issues where variations might not be unregistered if blocks are not yet available when `domReady` fires.

Additionally, this change refactors block style and variation unregistration into dedicated helper functions for improved code organization and readability.

Author: firestar300

inc/Services/Editor.php

@@ -95,7 +95,7 @@ public function admin_editor_script(): void {
 
 		$this->assets_tools->add_inline_script(
 			'theme-admin-editor-script',
-			'const BFFEditorSettings = ' . wp_json_encode(
+			'const BEAPI_EDITOR_SETTINGS = ' . wp_json_encode(
 				apply_filters(
 					'bff_editor_custom_settings',
 					[

src/js/editor.js

@@ -1,38 +1,66 @@
-/* global BFFEditorSettings */
+/* global BEAPI_EDITOR_SETTINGS */
 
-/* Customize BFFEditorSettings in inc/Services/Editor.php or with `bff_editor_custom_settings` filter (see readme). */
-
-import lazySizes from 'lazysizes'
+/* Customize BEAPI_EDITOR_SETTINGS in inc/Services/Editor.php or with `bff_editor_custom_settings` filter (see readme). */
 import domReady from '@wordpress/dom-ready'
+import { subscribe } from '@wordpress/data'
 import { addFilter } from '@wordpress/hooks'
-import { unregisterBlockStyle, getBlockVariations, unregisterBlockVariation } from '@wordpress/blocks'
-
-/**
- * LazySizes configuration
- * https://github.com/aFarkas/lazysizes/#js-api---options
- */
-lazySizes.cfg.nativeLoading = {
-	setLoadingAttribute: false,
-}
+import { unregisterBlockStyle, getBlockVariations, getBlockType, unregisterBlockVariation } from '@wordpress/blocks'
+import './utils/beapi'
 
-// Native Gutenberg
-domReady(() => {
-	// Disable specific block styles
-	if (BFFEditorSettings.disabledBlocksStyles) {
-		Object.entries(BFFEditorSettings.disabledBlocksStyles).forEach(([block, styles]) => {
-			unregisterBlockStyle(block, styles)
+const unregisterDisabledBlockStyles = () => {
+	if (!BEAPI_EDITOR_SETTINGS.disabledBlocksStyles) {
+		return
+	}
+
+	Object.entries(BEAPI_EDITOR_SETTINGS.disabledBlocksStyles).forEach(([blockName, styles]) => {
+		;[].concat(styles).forEach((styleName) => {
+			unregisterBlockStyle(blockName, styleName)
 		})
+	})
+}
+
+const unregisterDisallowedBlockVariations = () => {
+	if (!BEAPI_EDITOR_SETTINGS.allowedBlocksVariations) {
+		return
 	}
 
-	// Allow blocks variations
-	if (BFFEditorSettings.allowedBlocksVariations) {
-		Object.entries(BFFEditorSettings.allowedBlocksVariations).forEach(([block, variations]) => {
-			getBlockVariations(block).forEach((variant) => {
-				if (!variations.includes(variant.name)) {
-					unregisterBlockVariation(block, variant.name)
-				}
-			})
+	Object.entries(BEAPI_EDITOR_SETTINGS.allowedBlocksVariations).forEach(([blockName, allowedVariationNames]) => {
+		const blockVariations = getBlockVariations(blockName) || []
+
+		blockVariations.forEach((variation) => {
+			if (!allowedVariationNames.includes(variation.name)) {
+				unregisterBlockVariation(blockName, variation.name)
+			}
 		})
+	})
+}
+
+const whenBlocksRegistered = (blockNames, callback) => {
+	const areBlocksReady = () => blockNames.every((blockName) => getBlockType(blockName))
+
+	if (areBlocksReady()) {
+		callback()
+		return
+	}
+
+	const unsubscribe = subscribe(() => {
+		if (!areBlocksReady()) {
+			return
+		}
+
+		unsubscribe()
+		callback()
+	})
+}
+
+// Native Gutenberg
+domReady(() => {
+	unregisterDisabledBlockStyles()
+
+	if (BEAPI_EDITOR_SETTINGS.allowedBlocksVariations) {
+		const blockNames = Object.keys(BEAPI_EDITOR_SETTINGS.allowedBlocksVariations)
+
+		whenBlocksRegistered(blockNames, unregisterDisallowedBlockVariations)
 	}
 })
 
@@ -43,7 +71,7 @@ if (window.acf) {
 
 addFilter('blocks.registerBlockType', 'beapi-framework', function (settings, name) {
 	// Disable all styles
-	if (BFFEditorSettings.disableAllBlocksStyles && BFFEditorSettings.disableAllBlocksStyles.includes(name)) {
+	if (BEAPI_EDITOR_SETTINGS.disableAllBlocksStyles && BEAPI_EDITOR_SETTINGS.disableAllBlocksStyles.includes(name)) {
 		settings.styles = []
 	}