@secretstache/wordpress-gutenberg 0.3.9 → 0.3.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "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,
@@ -151,6 +151,7 @@ export const getBaseBackgroundAttributes = ({
     hasIncludeBackgroundMediaAttribute = false,
     hasIncludeOverlayAttribute = false,
 } = {}) => {
+    // TODO: add the overlay color attribute
     const isIncludeOverlayAttribute = {
         isIncludeOverlay: {
             type: 'boolean',

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
-    };
-};