@secretstache/wordpress-gutenberg 0.3.6 → 0.3.8

package/package.json

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

package/src/hooks/index.js

@@ -6,7 +6,7 @@ export { useThemeColors } from './useThemeColors';
 export { useUpdateAttribute } from './useUpdateAttribute';
 export { useDataQuery } from './useDataQuery';
 export { useAccordionItem } from './useAccordionItem.js';
-export { useBlockTabsData } from './useBlockTabsData.js';
+export { useTabs } from './useTabs.js';
 export { useAllowedBlocks } from './useAllowedBlocks.js';
 export { useChildBlockPosition } from './useChildBlockPosition.js';
 export { useFilterBlocks } from './useFilterBlocks.js';

package/src/hooks/useDataQuery.js

@@ -37,9 +37,12 @@ export const useDataQuery = (props) => {
         const isResolving = select('core/data').isResolving('core', 'getEntityRecords', ['postType', postType, queryArgs]);
         const isLoading = isResolving || postsToShow === undefined;
 
+        const isEmpty = postsToShow !== null && postsToShow?.length === 0;
+
         return {
             postsToShow,
             isLoading,
+            isEmpty,
         };
     }, dependencies);
 }

package/src/hooks/useTabs.js

@@ -0,0 +1,97 @@
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useLayoutEffect, useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus as plusIcon } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
+
+import { useParentBlock } from './useParentBlock';
+
+export const useTabs = (tabsClientId, tabItemName) => {
+    const { insertBlock } = useDispatch(blockEditorStore);
+
+    const {
+        tabs,
+        tabsCount,
+        tabsOrder,
+
+        selectedBlock,
+        selectedBlockClientId,
+    } = useSelect(
+        (select) => {
+            const {
+                getBlock,
+                getBlockCount,
+                getSelectedBlock,
+                getSelectedBlockClientId,
+                getBlockOrder,
+                getBlockRootClientId,
+            } = select(blockEditorStore);
+
+            return {
+                tabs: getBlock(tabsClientId)?.innerBlocks || [],
+                tabsCount: getBlockCount(tabsClientId),
+                tabsOrder: getBlockOrder(tabsClientId),
+
+                selectedBlock: getSelectedBlock(),
+                selectedBlockClientId: getSelectedBlockClientId(),
+            };
+        },
+        [ tabsClientId ],
+    );
+
+    const [ activeItemId, setActiveItemId ] = useState(null);
+
+    useLayoutEffect(() => {
+        if (tabs.length > 0 && !activeItemId) {
+            setActiveItemId(tabs[0].clientId);
+        }
+    }, [ tabs, activeItemId ]);
+
+    const parentBlock = useParentBlock(tabItemName, tabsClientId);
+
+    useLayoutEffect(() => {
+        if (parentBlock) {
+            setActiveItemId(parentBlock.clientId);
+        }
+    }, [ parentBlock ]);
+
+    const createTab = (blockName, attributes = {}, position = tabsCount) => {
+        const newTab = createBlock(blockName, attributes);
+        insertBlock(newTab, position, tabsClientId);
+
+        return newTab;
+    };
+
+    const onTabAppenderClick = () => {
+        const newItem = createTab(tabItemName);
+        setActiveItemId(newItem.clientId);
+    };
+
+    const TabAppender = ({ label = 'Add new tab', ...other }) => (
+        <Button
+            className="bc-add-new-child-btn"
+            icon={plusIcon}
+            label={label}
+            onClick={onTabAppenderClick}
+            {...other}
+        />
+    );
+
+    return {
+        tabs,
+        tabsCount,
+        tabsOrder,
+
+        selectedBlock,
+        selectedBlockClientId,
+        parentBlock,
+
+        activeItemId,
+        setActiveItemId,
+
+        TabAppender,
+        onTabAppenderClick,
+        createTab,
+    };
+};

package/src/utils/attributes.js

@@ -96,6 +96,7 @@ export const numberOfPostsAttribute = {
     },
 };
 
+// TODO: make dataSource optional
 export const getDataQueryAttributes = (
     sourcesList,
     queriesList,
@@ -135,21 +136,38 @@ export const getDataQueryAttributes = (
 /**
  * Returns the base background attribute object with configurable default background color and media type.
  *
- * @param {string} [defaultBackgroundMediaType=''] - The default background media type.
- * @param {Object} defaultBackgroundColor - The background color configuration.
- * @param {string} defaultBackgroundColor.value - The hex value of the background color.
- * @param {string} defaultBackgroundColor.slug - The slug of the background color.
+ * @param {Object} options - The options for configuring the background attributes.
+ * @param {string} [options.defaultBackgroundMediaType=''] - The default background media type.
+ * @param {Object} options.defaultBackgroundColor - The background color configuration.
+ * @param {string} options.defaultBackgroundColor.value - The hex value of the background color.
+ * @param {string} options.defaultBackgroundColor.slug - The slug of the background color.
+ * @param {boolean} [options.hasIncludeBackgroundMediaAttribute=false] - Whether to include the background media attribute.
+ * @param {boolean} [options.hasIncludeOverlayAttribute=false] - Whether to include the overlay attribute.
  * @returns {Object} The base background attribute object.
  */
-export const getBaseBackgroundAttributes = (
+export const getBaseBackgroundAttributes = ({
     defaultBackgroundMediaType = '',
     defaultBackgroundColor = { value: '', slug: '' },
-) => {
-    return {
+    hasIncludeBackgroundMediaAttribute = false,
+    hasIncludeOverlayAttribute = false,
+} = {}) => {
+    const isIncludeOverlayAttribute = {
+        isIncludeOverlay: {
+            type: 'boolean',
+            default: false,
+        }
+    };
+
+    const isIncludeBackgroundMediaAttribute = {
         isIncludeBackgroundMedia: {
             type: 'boolean',
             default: false,
-        },
+        }
+    };
+
+    return {
+        ...(hasIncludeBackgroundMediaAttribute ? isIncludeBackgroundMediaAttribute : {}),
+
         backgroundMediaType: {
             type: 'string',
             default: defaultBackgroundMediaType,
@@ -161,10 +179,7 @@ export const getBaseBackgroundAttributes = (
 
         ...mediaAttribute,
 
-        isIncludeOverlay: {
-            type: 'boolean',
-            default: false,
-        },
+        ...(hasIncludeOverlayAttribute ? isIncludeOverlayAttribute : {}),
     };
 };
 

package/src/hooks/useBlockTabsData.js

@@ -1,90 +0,0 @@
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useLayoutEffect, useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { plus as plusIcon } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
-
-import { useParentBlock } from './useParentBlock';
-
-export const useBlockTabsData = (clientId, itemBlockName) => {
-    const { insertBlock } = useDispatch(blockEditorStore);
-
-    const {
-        childBlocks,
-        innerBlocksCount,
-        selectedBlock,
-        selectedBlockClientId,
-        parentBlockId,
-        getBlockRootClientId,
-    } = useSelect(
-        (select) => {
-            const {
-                getBlock,
-                getBlockCount,
-                getSelectedBlock,
-                getSelectedBlockClientId,
-                getBlockRootClientId,
-            } = select(blockEditorStore);
-
-            return {
-                childBlocks: getBlock(clientId)?.innerBlocks || [],
-                innerBlocksCount: getBlockCount(clientId),
-                selectedBlock: getSelectedBlock(),
-                selectedBlockClientId: getSelectedBlockClientId(),
-                parentBlockId: getBlockRootClientId(getSelectedBlockClientId()),
-                getBlockRootClientId,
-            };
-        },
-        [clientId]
-    );
-
-    const [activeItemId, setActiveItemId] = useState(null);
-
-    useLayoutEffect(() => {
-        if (childBlocks.length > 0 && !activeItemId) {
-            setActiveItemId(childBlocks[0].clientId);
-        }
-    }, [childBlocks, activeItemId]);
-
-    const parentItem = useParentBlock(selectedBlock?.clientId, clientId);
-
-    useLayoutEffect(() => {
-        if (parentItem) {
-            setActiveItemId(parentItem.clientId);
-        } else if (clientId === parentBlockId && selectedBlock?.clientId) {
-            setActiveItemId(selectedBlock.clientId);
-        }
-    }, [selectedBlock, parentItem, clientId, parentBlockId]);
-
-    // TODO: export
-    const addNewChildBlock = (blockName, attributes = {}, position = innerBlocksCount) => {
-        const newBlock = createBlock(blockName, attributes);
-        insertBlock(newBlock, position, clientId);
-
-        return newBlock;
-    };
-
-    // TODO: rename/export
-    const handleAddNewItem = () => {
-        const newItem = addNewChildBlock(itemBlockName);
-        setActiveItemId(newItem.clientId);
-    };
-
-    // TODO: make more flexible
-    const AddNewTabButton = ({ label = 'Add new tab' }) => (
-        <Button className="add-new-child-btn" icon={plusIcon} label={label} onClick={handleAddNewItem} />
-    );
-
-    return {
-        childBlocks,
-        innerBlocksCount,
-        selectedBlock,
-        selectedBlockClientId,
-        parentBlockId,
-        activeItemId,
-        setActiveItemId,
-        getBlockRootClientId,
-        AddNewTabButton,
-    };
-};