@secretstache/wordpress-gutenberg 0.5.11 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",

package/src/components/EmptyBlockAppender.js

@@ -1,14 +1,17 @@
 import { InnerBlocks } from '@wordpress/block-editor';
+import classNames from 'classnames';
 
 export const EmptyBlockAppender = (props) => {
     const {
         showIcon = true,
+        showAppender = true,
         title = 'This block is empty',
         text = 'Use the "+" button below to add content blocks',
+        className,
     } = props;
 
     return (
-        <div className="empty-block-appender">
+        <div className={classNames('empty-block-appender', className)}>
             <div className="empty-block-appender__content">
                 {
                     showIcon && (
@@ -22,9 +25,13 @@ export const EmptyBlockAppender = (props) => {
                 <p className="empty-block-appender__text">{text}</p>
             </div>
 
-            <div className="empty-block-appender__button">
-                <InnerBlocks.ButtonBlockAppender />
-            </div>
+            {
+                showAppender && (
+                    <div className="empty-block-appender__button">
+                        <InnerBlocks.ButtonBlockAppender />
+                    </div>
+                )
+            }
         </div>
     );
 };

package/src/hooks/useParentBlock.js

@@ -20,8 +20,7 @@ export const useParentBlock = (
             return null;
         }
 
-        // Return the selected block if it already matches the target type
-        if (currentBlock?.name === parentBlockName) {
+        if (currentBlock.clientId === blockClientIdToLimitSearch && currentBlock.name === parentBlockName) {
             return currentBlock;
         }
 

package/src/hooks/useTabs.js

@@ -1,4 +1,4 @@
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, select } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useLayoutEffect, useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
@@ -50,12 +50,40 @@ export const useTabs = (tabsClientId, tabItemName) => {
 
     const parentBlock = useParentBlock(tabItemName, tabsClientId);
 
+    /**
+     * Sets the active tab when focus/selection is inside any inner block of a tab item.
+     * For example, if the user selects text inside a tab, that tab should become active.
+     */
     useLayoutEffect(() => {
         if (parentBlock) {
             setActiveItemId(parentBlock.clientId);
         }
     }, [ parentBlock ]);
 
+    /**
+     * Sets the active tab when the tab-item block itself is selected in the editor sidebar.
+     * Ensures the selected tab-item belongs directly to this Tabs block (avoids conflicts if there are multiple Tabs on the page).
+     */
+    useLayoutEffect(() => {
+        // Early return if there is no selected block, or if the selected block is not a tab-item.
+        const isTabItemBlockSelected = selectedBlock && selectedBlock.name === tabItemName;
+
+        if (!isTabItemBlockSelected) {
+            return;
+        }
+
+        // Get the parent block clientId for this selected tab-item block.
+        const selectedTabItemBlock = selectedBlock;
+        const tabItemParentId = select('core/block-editor').getBlockRootClientId(selectedTabItemBlock.clientId);
+
+        // Only activate the tab if it is a direct child of this Tabs instance.
+        const isDirectChildOfCurrentTabs = tabItemParentId === tabsClientId;
+
+        if (isDirectChildOfCurrentTabs) {
+            setActiveItemId(selectedTabItemBlock.clientId);
+        }
+    }, [ selectedBlock, tabItemName, tabsClientId ]);
+
     const createTab = (blockName, attributes = {}, position = tabsCount) => {
         const newTab = createBlock(blockName, attributes);
         insertBlock(newTab, position, tabsClientId);