From 16f85a7a53f03f0e0816e48c314b9f4316071b82 Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Wed, 25 Jan 2023 12:26:01 +0100 Subject: [PATCH] Fix labs and settings modals for Gutenberg >=14.3.0 --- .../coblocks-labs/coblocks-labs-slot.js | 23 ++++++++++++++-- .../coblocks-settings-slot.js | 26 ++++++++++++++++--- 2 files changed, 44 insertions(+), 5 deletions(-) diff --git a/src/extensions/coblocks-labs/coblocks-labs-slot.js b/src/extensions/coblocks-labs/coblocks-labs-slot.js index d40983098c3..02146913d9c 100644 --- a/src/extensions/coblocks-labs/coblocks-labs-slot.js +++ b/src/extensions/coblocks-labs/coblocks-labs-slot.js @@ -6,6 +6,8 @@ import { // Disable reason: We choose to use unsafe APIs in our codebase. // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalUseSlot as useSlot, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalUseSlotFills as useSlotFills, } from '@wordpress/components'; const slotName = 'CoBlocksLabsModalControl'; @@ -13,8 +15,25 @@ const slotName = 'CoBlocksLabsModalControl'; const { Fill, Slot: CoBlocksLabsModalControlsSlot } = createSlotFill( slotName ); const Slot = ( { children } ) => { - const slot = useSlot( slotName ); - const hasFills = Boolean( slot.fills && slot.fills.length ); + let fills; + + // The checking order matters here, because for Gutenberg >=14.3.0 both + // useSlot and useSlotFills are available while only the useSlotFill should + // be used. The breaking change has been introduced in this PR: + // https://github.com/WordPress/gutenberg/pull/44642 + if ( typeof useSlotFills === 'function' ) { + // Use the useSlotFills for Gutenberg >=14.3.0 compatibility + // eslint-disable-next-line react-hooks/rules-of-hooks + fills = useSlotFills( slotName ); + } else if ( typeof useSlot === 'function' ) { + // Use the useSlot for Gutenberg <14.3.0 compatibility + // eslint-disable-next-line react-hooks/rules-of-hooks + fills = useSlot( slotName ).fills; + } else { + return; + } + + const hasFills = Boolean( fills && fills.length ); if ( ! hasFills ) { return children; diff --git a/src/extensions/coblocks-settings/coblocks-settings-slot.js b/src/extensions/coblocks-settings/coblocks-settings-slot.js index 18eb9ae307c..1a2641c3473 100644 --- a/src/extensions/coblocks-settings/coblocks-settings-slot.js +++ b/src/extensions/coblocks-settings/coblocks-settings-slot.js @@ -6,15 +6,35 @@ import { // Disable reason: We choose to use unsafe APIs in our codebase. // eslint-disable-next-line @wordpress/no-unsafe-wp-apis __experimentalUseSlot as useSlot, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __experimentalUseSlotFills as useSlotFills, } from '@wordpress/components'; const slotName = 'CoBlocksSettingsModalControl'; -const { Fill, Slot: CoBlocksSettingsModalControlSlot } = createSlotFill( slotName ); +const { Fill, Slot: CoBlocksSettingsModalControlSlot } = + createSlotFill( slotName ); function Slot( { children } ) { - const slot = useSlot( slotName ); - const hasFills = Boolean( slot.fills && slot.fills.length ); + let fills; + + // The checking order matters here, because for Gutenberg >=14.3.0 both + // useSlot and useSlotFills are available while only the useSlotFill should + // be used. The breaking change has been introduced in this PR: + // https://github.com/WordPress/gutenberg/pull/44642 + if ( typeof useSlotFills === 'function' ) { + // Use the useSlotFills for Gutenberg >=14.3.0 compatibility + // eslint-disable-next-line react-hooks/rules-of-hooks + fills = useSlotFills( slotName ); + } else if ( typeof useSlot === 'function' ) { + // Use the useSlot for Gutenberg <14.3.0 compatibility + // eslint-disable-next-line react-hooks/rules-of-hooks + fills = useSlot( slotName ).fills; + } else { + return; + } + + const hasFills = Boolean( fills && fills.length ); if ( ! hasFills ) { return children;