fix(editor): Ensure reliable unregistration of block variations

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,65 @@
-/* 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'
 
-// 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 +70,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 = []
 	}