@secretstache/wordpress-gutenberg 0.3.11 → 0.3.13

package/package.json

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

package/src/components/MediaTypeControl.js

@@ -1,4 +1,4 @@
-import { useState } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
 import { MediaControl } from './MediaControl.js';
@@ -8,26 +8,26 @@ export const MediaTypeControl = (props) => {
     const {
         types = [ MEDIA_TYPES.IMAGE, MEDIA_TYPES.VIDEO ],
 
-        selectedType = MEDIA_TYPES.IMAGE,
-        typeOnSelect,
+        selectedType,
+        onTypeChange,
 
         mediaId,
         mediaUrl,
         mediaFileName = '',
 
-        mediaOnSelect,
-        mediaOnRemove,
+        onMediaSelect,
+        onMediaRemove,
 
         label = 'Media Type',
     } = props;
 
-
-    const typesOptions = types
+    const typesOptions = useMemo(() => types
         ?.filter((type) => MEDIA_TYPE_LABELS[type]) // Ensure it's an allowed type
         ?.map((type) => ({
             label: MEDIA_TYPE_LABELS[type],
             value: type,
-        }));
+        }))
+    , [ types ]);
 
     return (
         <>
@@ -36,7 +36,7 @@ export const MediaTypeControl = (props) => {
                     <SelectControl
                         label={label}
                         value={selectedType}
-                        onChange={(type) => typeOnSelect(type)}
+                        onChange={onTypeChange}
                         options={typesOptions}
                     />
                 )
@@ -49,8 +49,8 @@ export const MediaTypeControl = (props) => {
                         mediaUrl={mediaUrl}
                         mediaFileName={mediaFileName}
                         type={selectedType}
-                        onSelect={mediaOnSelect}
-                        onRemove={mediaOnRemove}
+                        onSelect={onMediaSelect}
+                        onRemove={onMediaRemove}
                     />
                 )
             }

package/src/hooks/useAccordionItem.js

@@ -18,8 +18,7 @@ export const useAccordionItem = (itemId, activeItemId, setActiveItemId, contentS
         }
     };
 
-    // TODO: rename to toggleItem
-    const toggleContent = () => {
+    const toggleItem = () => {
         setActiveItemId(isActive ? null : itemId);
     };
 
@@ -29,7 +28,7 @@ export const useAccordionItem = (itemId, activeItemId, setActiveItemId, contentS
         } else {
             closeContent();
         }
-    }, [isActive]);
+    }, [ isActive ]);
 
     useEffect(() => {
         if (!isActive || !blockRef.current) return;
@@ -45,7 +44,13 @@ export const useAccordionItem = (itemId, activeItemId, setActiveItemId, contentS
         resizeObserver.observe(blockRef.current);
 
         return () => resizeObserver.disconnect();
-    }, [isActive]);
-
-    return { blockRef, toggleContent, isActive };
+    }, [ isActive ]);
+
+    return {
+        blockRef,
+        toggleItem,
+        openContent,
+        closeContent,
+        isActive,
+    };
 };

package/src/utils/attributes.js

@@ -13,17 +13,19 @@ export const linkControlAttribute = {
     },
 };
 
-export const mediaAttribute = {
-    media: {
+export const getMediaAttribute = (name = 'media') => ({
+    [`${name}`]: {
         type: 'object',
         default: {
             id: null,
-            url: '',
-            alt: '',
-            filename: '',
+            url: null,
+            alt: null,
+            name: null,
+            filename: null,
+            mime: null,
         },
     },
-};
+});
 
 export const contentAttribute = {
     title: {
@@ -36,22 +38,13 @@ export const contentAttribute = {
     },
 };
 
-export const animationAttribute = {
-    animationFile: {
-        type: 'object',
-        default: {
-            id: null,
-            url: null,
-            name: null,
-            filename: null,
-            mime: null,
-        },
-    },
+export const getAnimationAttribute = (name = 'animationFile') => ({
+    ...getMediaAttribute(name),
     isAnimationLooped: {
         type: 'boolean',
         default: true,
     },
-};
+});
 
 export const curatedPostsAttribute = {
     curatedPosts: {
@@ -137,50 +130,39 @@ export const getDataQueryAttributes = (
  * 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 {string} [options.mediaAttributeName='media'] - Background media attribute name.
  * @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.
  *
  * @returns {Object} An object containing the attributes for the block's background configuration.
  */
 export const getBaseBackgroundAttributes = ({
-    defaultBackgroundColor = { value: '', slug: '' },
-
     hasBackgroundMedia = false,
-    defaultBackgroundMediaType = '',
-
+    mediaAttributeName = 'media',
     hasOverlay = false,
-    defaultOverlayColor = { value: '', slug: '' },
 } = {}) => {
     const backgroundMediaAttribute = {
         isIncludeBackgroundMedia: {
             type: 'boolean',
-            default: false,
         },
         backgroundMediaType: {
             type: 'string',
-            default: defaultBackgroundMediaType,
         },
-        ...mediaAttribute,
+        ...getMediaAttribute(mediaAttributeName),
     };
 
     const overlayAttribute = {
         isIncludeOverlay: {
             type: 'boolean',
-            default: false,
         },
         overlayColor: {
             type: 'object',
-            default: defaultOverlayColor,
         },
     };
 
     return {
         backgroundColor: {
             type: 'object',
-            default: defaultBackgroundColor,
         },
 
         ...(hasBackgroundMedia ? backgroundMediaAttribute : {}),