@secretstache/wordpress-gutenberg 0.3.9 → 0.3.11

package/package.json

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

package/src/components/DataQueryControls.js

@@ -1,6 +1,8 @@
 import { RadioControl } from '@wordpress/components';
 
-// TODO: add support of curated posts, categories; consider merging with the useDataQuery hook
+// TODO: 1. add support of curated posts, categories
+// TODO: 2. consider merging with the useDataQuery hook
+// TODO: 3. can't pass disabled prop to RadioControl
 export const DataQueryControls = (props) => {
     const {
         dataSourceLabel = 'Data Source',

package/src/components/InsertBlockToolbar.js

@@ -0,0 +1,36 @@
+import { BlockControls } from '@wordpress/block-editor';
+import { select, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+import { useCallback } from '@wordpress/element';
+import { Toolbar, ToolbarButton } from '@wordpress/components';
+
+export const InsertBlockToolbar = ({ clientId, blockName, group }) => {
+    const { insertBlock } = useDispatch('core/block-editor');
+
+    const insertBlockBefore = useCallback(() => {
+        const block = createBlock(blockName);
+        insertBlock(block, select('core/block-editor').getBlockIndex(clientId));
+    }, []);
+
+    const insertBlockAfter = useCallback(() => {
+        const block = createBlock(blockName);
+        insertBlock(block, select('core/block-editor').getBlockIndex(clientId) + 1);
+    }, []);
+
+    return (
+        <BlockControls group={group}>
+            <Toolbar>
+                <ToolbarButton
+                    icon="insert-before"
+                    label="Add before"
+                    onClick={insertBlockBefore}
+                />
+                <ToolbarButton
+                    icon="insert-after"
+                    label="Add after"
+                    onClick={insertBlockAfter}
+                />
+            </Toolbar>
+        </BlockControls>
+    );
+};

package/src/components/index.js

@@ -10,3 +10,4 @@ export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.js';
 export { ResourcesWrapper } from './ResourcesWrapper.js'
 export { DividersControl } from './DividersControl.js'
 export { MediaTypeControl } from './MediaTypeControl.js'
+export { InsertBlockToolbar } from './InsertBlockToolbar.js'

package/src/hooks/index.js

@@ -1,4 +1,4 @@
-export { usePreviewToggle } from './usePreviewToggle.js';
+export { usePreviewControl } from './usePreviewControl.js';
 export { useSlider } from './useSlider.js';
 export { useParentBlock } from './useParentBlock.js';
 export { useColorChange } from './useColorChange';

package/src/hooks/useDataQuery.js

@@ -1,6 +1,7 @@
 import { useSelect } from '@wordpress/data';
 import { QUERY_TYPES } from '../utils';
 
+// TODO: numberOfPosts -1 is not a valid value, the API requires the per_page to be >= 1
 export const useDataQuery = (props) => {
     const {
         getPostType,

package/src/hooks/usePreviewControl.js

@@ -0,0 +1,31 @@
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+const defaultLabel = 'Enable Preview';
+const defaultHelpText = 'Please check this option to see how the block will actually look and behave on the frontend.';
+
+export const usePreviewControl = () => {
+    const [ isPreview, setIsPreview ] = useState(false);
+
+    const onChange = useCallback(() => {
+        setIsPreview(prev => !prev);
+    }, []);
+
+    const PreviewControl = useMemo(() => {
+        return ({ label = defaultLabel, helpText = defaultHelpText, ...props }) => (
+            <ToggleControl
+                label={label}
+                help={helpText}
+                checked={isPreview}
+                onChange={onChange}
+                {...props}
+            />
+        );
+    });
+
+    return {
+        isPreview,
+        setIsPreview,
+        PreviewControl,
+    };
+};

package/src/hooks/useSlider.js

@@ -15,7 +15,7 @@ export const useSlider = ({ isEnabled, setupSlider, dependencies = [] }) => {
                 sliderInstance.current = null;
             }
         };
-    }, [isEnabled, ...dependencies]);
+    }, [ isEnabled, ...dependencies ]);
 
     return {
         sliderElRef,

package/src/utils/attributes.js

@@ -96,7 +96,7 @@ export const numberOfPostsAttribute = {
     },
 };
 
-// TODO: make dataSource optional
+// TODO: make dataSource optional, rebuild it's not easy to use(need to pass sourcesList and queriesList in complex format)
 export const getDataQueryAttributes = (
     sourcesList,
     queriesList,
@@ -132,54 +132,60 @@ export const getDataQueryAttributes = (
         ...(hasNumberOfPosts ? numberOfPostsAttribute : {}),
     };
 };
-
 /**
- * Returns the base background attribute object with configurable default background color and media type.
+ * Generates a set of attributes for background settings in a block, including options
+ * for background color, media, and overlays based on the provided configurations.
+ *
+ * @param {Object} [options={}] - The options for generating background attributes.
+ * @param {Object} [options.defaultBackgroundColor={ value: '', slug: '' }] - The default background color attribute.
+ * @param {boolean} [options.hasBackgroundMedia=false] - Flag to determine if background media attributes should be included.
+ * @param {string} [options.defaultBackgroundMediaType=''] - The default type of background media if media attributes are included.
+ * @param {boolean} [options.hasOverlay=false] - Flag to determine if overlay attributes should be included.
+ * @param {Object} [options.defaultOverlayColor={ value: '', slug: '' }] - The default overlay color attribute if overlay attributes are included.
  *
- * @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.
+ * @returns {Object} An object containing the attributes for the block's background configuration.
  */
 export const getBaseBackgroundAttributes = ({
-    defaultBackgroundMediaType = '',
     defaultBackgroundColor = { value: '', slug: '' },
-    hasIncludeBackgroundMediaAttribute = false,
-    hasIncludeOverlayAttribute = false,
+
+    hasBackgroundMedia = false,
+    defaultBackgroundMediaType = '',
+
+    hasOverlay = false,
+    defaultOverlayColor = { value: '', slug: '' },
 } = {}) => {
-    const isIncludeOverlayAttribute = {
-        isIncludeOverlay: {
+    const backgroundMediaAttribute = {
+        isIncludeBackgroundMedia: {
             type: 'boolean',
             default: false,
-        }
+        },
+        backgroundMediaType: {
+            type: 'string',
+            default: defaultBackgroundMediaType,
+        },
+        ...mediaAttribute,
     };
 
-    const isIncludeBackgroundMediaAttribute = {
-        isIncludeBackgroundMedia: {
+    const overlayAttribute = {
+        isIncludeOverlay: {
             type: 'boolean',
             default: false,
-        }
+        },
+        overlayColor: {
+            type: 'object',
+            default: defaultOverlayColor,
+        },
     };
 
     return {
-        ...(hasIncludeBackgroundMediaAttribute ? isIncludeBackgroundMediaAttribute : {}),
-
-        backgroundMediaType: {
-            type: 'string',
-            default: defaultBackgroundMediaType,
-        },
         backgroundColor: {
             type: 'object',
             default: defaultBackgroundColor,
         },
 
-        ...mediaAttribute,
+        ...(hasBackgroundMedia ? backgroundMediaAttribute : {}),
 
-        ...(hasIncludeOverlayAttribute ? isIncludeOverlayAttribute : {}),
+        ...(hasOverlay ? overlayAttribute : {}),
     };
 };
 

package/src/hooks/usePreviewToggle.js

@@ -1,32 +0,0 @@
-import { useState } from '@wordpress/element';
-import { ToggleControl } from '@wordpress/components';
-
-const defaultLabel = 'Enable Preview';
-const defaultHelpText = 'Please check this option to see how the block will actually look and behave on the frontend.';
-
-export const usePreviewToggle = (props = {}) => {
-    const {
-        disabled = false,
-        label = defaultLabel,
-        helpText = defaultHelpText,
-    } = props;
-
-    const [ isPreview, setIsPreview ] = useState(false);
-
-    const onChange = () => setIsPreview(prev => !prev);
-
-    const renderPreviewToggle = () => (
-        <ToggleControl
-            label={label}
-            help={helpText}
-            checked={isPreview}
-            onChange={onChange}
-            disabled={disabled}
-        />
-    );
-
-    return {
-        isPreview,
-        renderPreviewToggle
-    };
-};