@secretstache/wordpress-gutenberg 0.3.10 → 0.3.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "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: {
@@ -132,55 +125,54 @@ 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 {boolean} [options.hasBackgroundMedia=false] - Flag to determine if background media attributes should be 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 - 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,
+    mediaAttributeName = 'media',
+    hasOverlay = false,
 } = {}) => {
-    // TODO: add the overlay color attribute
-    const isIncludeOverlayAttribute = {
-        isIncludeOverlay: {
+    const backgroundMediaAttribute = {
+        isIncludeBackgroundMedia: {
             type: 'boolean',
-            default: false,
-        }
+            default: null,
+        },
+        backgroundMediaType: {
+            type: 'string',
+            default: null,
+        },
+        ...getMediaAttribute(mediaAttributeName),
     };
 
-    const isIncludeBackgroundMediaAttribute = {
-        isIncludeBackgroundMedia: {
+    const overlayAttribute = {
+        isIncludeOverlay: {
             type: 'boolean',
-            default: false,
-        }
+            default: null,
+        },
+        overlayColor: {
+            type: 'object',
+            default: null,
+        },
     };
 
     return {
-        ...(hasIncludeBackgroundMediaAttribute ? isIncludeBackgroundMediaAttribute : {}),
-
-        backgroundMediaType: {
-            type: 'string',
-            default: defaultBackgroundMediaType,
-        },
         backgroundColor: {
             type: 'object',
-            default: defaultBackgroundColor,
+            default: null,
         },
 
-        ...mediaAttribute,
+        ...(hasBackgroundMedia ? backgroundMediaAttribute : {}),
 
-        ...(hasIncludeOverlayAttribute ? isIncludeOverlayAttribute : {}),
+        ...(hasOverlay ? overlayAttribute : {}),
     };
 };