@secretstache/wordpress-gutenberg 0.3.4 → 0.3.6

package/build/styles.css

@@ -128,7 +128,7 @@
     .block-editor__container .bc-spacing-range-control .components-range-control__root .components-range-control__wrapper .components-range-control__marks .components-range-control__mark-label {
       left: 8px !important;
       margin-top: 7px !important; }
-  .block-editor__container .bc-spacing-range-control .components-range-control__root .components-base-control__help {
+  .block-editor__container .bc-spacing-range-control .components-base-control__help {
     margin-left: -11px; }
 
 .block-editor__container .bc-add-new-child-btn {

package/package.json

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

package/src/components/MediaTypeControl.js

@@ -2,22 +2,27 @@ import { useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
 import { MediaControl } from './MediaControl.js';
-import { MEDIA_TYPE_LABELS } from '../utils/index.js';
+import { MEDIA_TYPE_LABELS, MEDIA_TYPES } from '../utils/index.js';
 
 export const MediaTypeControl = (props) => {
     const {
-        mediaTypes = [],
+        types = [ MEDIA_TYPES.IMAGE, MEDIA_TYPES.VIDEO ],
+
+        selectedType = MEDIA_TYPES.IMAGE,
+        typeOnSelect,
+
         mediaId,
         mediaUrl,
         mediaFileName = '',
+
         mediaOnSelect,
         mediaOnRemove,
+
         label = 'Media Type',
     } = props;
 
-    const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes?.[0]);
 
-    const mediaTypesOptions = mediaTypes
+    const typesOptions = types
         ?.filter((type) => MEDIA_TYPE_LABELS[type]) // Ensure it's an allowed type
         ?.map((type) => ({
             label: MEDIA_TYPE_LABELS[type],
@@ -27,23 +32,23 @@ export const MediaTypeControl = (props) => {
     return (
         <>
             {
-                mediaTypes && (
+                types && (
                     <SelectControl
                         label={label}
-                        value={selectedMediaType}
-                        onChange={(mediaType) => setSelectedMediaType(mediaType)}
-                        options={mediaTypesOptions}
+                        value={selectedType}
+                        onChange={(type) => typeOnSelect(type)}
+                        options={typesOptions}
                     />
                 )
             }
 
             {
-                selectedMediaType && (
+                selectedType && (
                     <MediaControl
                         mediaId={mediaId}
                         mediaUrl={mediaUrl}
                         mediaFileName={mediaFileName}
-                        type={selectedMediaType}
+                        type={selectedType}
                         onSelect={mediaOnSelect}
                         onRemove={mediaOnRemove}
                     />

package/src/hooks/index.js

@@ -9,3 +9,4 @@ export { useAccordionItem } from './useAccordionItem.js';
 export { useBlockTabsData } from './useBlockTabsData.js';
 export { useAllowedBlocks } from './useAllowedBlocks.js';
 export { useChildBlockPosition } from './useChildBlockPosition.js';
+export { useFilterBlocks } from './useFilterBlocks.js';

package/src/hooks/useFilterBlocks.js

@@ -0,0 +1,15 @@
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+export const useFilterBlocks = (filter) => {
+    const allBlocks = useSelect(
+        (select) => select('core/blocks').getBlockTypes(),
+        [],
+    );
+
+    return useMemo(() => allBlocks
+            ?.filter((block) => filter(block))
+            ?.map((block) => block.name),
+        [ allBlocks, filter ],
+    );
+};

package/src/styles/_responsive-spacing.scss

@@ -26,9 +26,9 @@
                 }
             }
         }
+    }
 
-        .components-base-control__help {
-            margin-left: -11px;
-        }
+    .components-base-control__help {
+        margin-left: -11px;
     }
 }

package/src/utils/attributes.js

@@ -152,7 +152,7 @@ export const getBaseBackgroundAttributes = (
         },
         backgroundMediaType: {
             type: 'string',
-            default: '',
+            default: defaultBackgroundMediaType,
         },
         backgroundColor: {
             type: 'object',

package/src/utils/helpers.js

@@ -122,54 +122,26 @@ export const decodeHtmlEntities = (text) => {
  * Generates a string of class names for spacing based on the provided spacing object.
  *
  * @param {Object} spacing - The spacing object containing margin and padding values.
- * @param {Object} [desktopPrefixes] - Optional prefixes for desktop spacing classes.
- * @param {string} [desktopPrefixes.marginTop='mt-'] - Prefix for desktop margin-top class.
- * @param {string} [desktopPrefixes.marginBottom='mb-'] - Prefix for desktop margin-bottom class.
- * @param {string} [desktopPrefixes.paddingTop='pt-'] - Prefix for desktop padding-top class.
- * @param {string} [desktopPrefixes.paddingBottom='pb-'] - Prefix for desktop padding-bottom class.
- * @param {Object} [mobilePrefixes] - Optional prefixes for mobile spacing classes.
- * @param {string} [mobilePrefixes.marginTop='sm:mt-'] - Prefix for mobile margin-top class.
- * @param {string} [mobilePrefixes.marginBottom='sm:mb-'] - Prefix for mobile margin-bottom class.
- * @param {string} [mobilePrefixes.paddingTop='sm:pt-'] - Prefix for mobile padding-top class.
- * @param {string} [mobilePrefixes.paddingBottom='sm:pb-'] - Prefix for mobile padding-bottom class.
+ * @param desktopPrefix - Prefix for desktop classes
+ * @param mobilePrefix - Prefix for mobile classes
  * @returns {string} - A string of class names for the specified spacing.
  */
 export const getSpacingClasses = (
     spacing,
-    desktopPrefixes = {
-        marginTop: 'mt-',
-        marginBottom: 'mb-',
-        paddingTop: 'pt-',
-        paddingBottom: 'pb-',
-    },
-    mobilePrefixes = {
-        marginTop: 'sm:mt-',
-        marginBottom: 'sm:mb-',
-        paddingTop: 'sm:pt-',
-        paddingBottom: 'sm:pb-',
-    }
+    desktopPrefix = 'md:',
+    mobilePrefix = '',
 ) => {
-    if (spacing?.desktop || spacing?.mobile) {
-        return classNames({
-            [`${desktopPrefixes.marginTop}${spacing.desktop.margin.top}`]: spacing.desktop.margin.top !== -1,
-            [`${desktopPrefixes.marginBottom}${spacing.desktop.margin.bottom}`]: spacing.desktop.margin.bottom !== -1,
-
-            [`${desktopPrefixes.paddingTop}${spacing.desktop.padding.top}`]: spacing.desktop.padding.top !== -1,
-            [`${desktopPrefixes.paddingBottom}${spacing.desktop.padding.bottom}`]: spacing.desktop.padding.bottom !== -1,
+    return classNames({
+        [`${desktopPrefix}mt-${spacing?.desktop?.margin?.top}`]: spacing?.desktop?.margin?.top !== -1,
+        [`${desktopPrefix}mb-${spacing?.desktop?.margin?.bottom}`]: spacing?.desktop?.margin?.bottom !== -1,
 
-            [`${mobilePrefixes.marginTop}${spacing.mobile.margin.top}`]: spacing.mobile.margin.top !== -1,
-            [`${mobilePrefixes.marginBottom}${spacing.mobile.margin.bottom}`]: spacing.mobile.margin.bottom !== -1,
+        [`${desktopPrefix}pt-${spacing?.desktop?.padding?.top}`]: spacing?.desktop?.padding?.top !== -1,
+        [`${desktopPrefix}pb-${spacing?.desktop?.padding?.bottom}`]: spacing?.desktop?.padding?.bottom !== -1,
 
-            [`${mobilePrefixes.paddingTop}${spacing.mobile.padding.top}`]: spacing.mobile.padding.top !== -1,
-            [`${mobilePrefixes.paddingBottom}${spacing.mobile.padding.bottom}`]: spacing.mobile.padding.bottom !== -1,
-        });
-    } else {
-        return classNames({
-            [`${desktopPrefixes.marginTop}${spacing.margin.top}`]: spacing.margin.top !== -1,
-            [`${desktopPrefixes.marginBottom}${spacing.margin.bottom}`]: spacing.margin.bottom !== -1,
+        [`${mobilePrefix}mt-${spacing?.mobile?.margin?.top}`]: spacing?.mobile?.margin?.top !== -1,
+        [`${mobilePrefix}mb-${spacing?.mobile?.margin?.bottom}`]: spacing?.mobile?.margin?.bottom !== -1,
 
-            [`${desktopPrefixes.paddingTop}${spacing.padding.top}`]: spacing.padding.top !== -1,
-            [`${desktopPrefixes.paddingBottom}${spacing.padding.bottom}`]: spacing.padding.bottom !== -1,
-        });
-    }
+        [`${mobilePrefix}pt-${spacing?.mobile?.padding?.top}`]: spacing?.mobile?.padding?.top !== -1,
+        [`${mobilePrefix}pb-${spacing?.mobile?.padding?.bottom}`]: spacing?.mobile?.padding?.bottom !== -1,
+    });
 };