@secretstache/wordpress-gutenberg 0.3.14 → 0.3.15

package/package.json

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

package/src/components/ColorPaletteControl.js

@@ -1,5 +1,5 @@
 import { BaseControl, ColorPalette } from '@wordpress/components';
-import { useThemeColors, useColorChange } from '../hooks';
+import { useThemeColors, useColorChange } from '../hooks/index.js';
 
 export const ColorPaletteControl = ({
     label = 'Color',

package/src/components/PreviewControl.js

@@ -0,0 +1,23 @@
+import { ToggleControl } from '@wordpress/components';
+
+const defaultLabel = 'Enable Preview';
+const defaultHelp = 'Please check this option to see how the block will actually look and behave on the frontend.';
+
+export const PreviewControl = (props) => {
+    const {
+        checked,
+        onChange,
+        help = defaultHelp,
+        label = defaultLabel,
+    } = props;
+
+    return (
+        <ToggleControl
+            checked={checked}
+            onChange={onChange}
+            label={label}
+            help={help}
+            {...props}
+        />
+    );
+};

package/src/components/index.js

@@ -11,3 +11,4 @@ export { ResourcesWrapper } from './ResourcesWrapper.js'
 export { DividersControl } from './DividersControl.js'
 export { MediaTypeControl } from './MediaTypeControl.js'
 export { InsertBlockToolbar } from './InsertBlockToolbar.js'
+export { PreviewControl } from './PreviewControl.js'

package/src/hooks/usePreviewControl.js

@@ -1,8 +1,5 @@
-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.';
+import { useCallback, useState } from '@wordpress/element';
+import { PreviewControl } from '../components/PreviewControl.js';
 
 export const usePreviewControl = () => {
     const [ isPreview, setIsPreview ] = useState(false);
@@ -11,21 +8,17 @@ export const usePreviewControl = () => {
         setIsPreview(prev => !prev);
     }, []);
 
-    const PreviewControl = useMemo(() => {
-        return ({ label = defaultLabel, helpText = defaultHelpText, ...props }) => (
-            <ToggleControl
-                label={label}
-                help={helpText}
-                checked={isPreview}
-                onChange={onChange}
-                {...props}
-            />
-        );
-    });
+    const control = (props) => (
+        <PreviewControl
+            checked={isPreview}
+            onChange={onChange}
+            {...props}
+        />
+    );
 
     return {
         isPreview,
         setIsPreview,
-        PreviewControl,
+        PreviewControl: control,
     };
 };