@secretstache/wordpress-gutenberg 0.3.1 → 0.3.3

package/build/styles.css

@@ -128,6 +128,8 @@
     .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 {
+    margin-left: -11px; }
 
 .block-editor__container .bc-add-new-child-btn {
   display: flex;

package/package.json

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

package/src/components/{MediaPicker.js → MediaControl.js}

@@ -4,12 +4,14 @@ import { page as pageIcon } from '@wordpress/icons';
 
 import { MEDIA_TYPES } from '../utils/index.js';
 
-export const BCImageRenderer = ({
+export const ImageRenderer = ({
     imageId,
     imageUrl,
     onImageClick,
     onRemoveClick,
     onSelectClick,
+    selectButtonLabel = "Select Image",
+    removeButtonLabel = "Remove Image",
 }) => {
     return imageId && imageUrl ? (
         <>
@@ -28,7 +30,7 @@ export const BCImageRenderer = ({
                 isSecondary
                 isDestructive
             >
-                Remove Image
+                {removeButtonLabel}
             </Button>
         </>
     ) : (
@@ -37,16 +39,18 @@ export const BCImageRenderer = ({
             onClick={onSelectClick}
             className="bc-select-btn"
         >
-            Select Image
+            {selectButtonLabel}
         </Button>
     );
 };
 
-export const BCVideoRenderer = ({
+export const VideoRenderer = ({
     videoId,
     videoUrl,
     onRemoveClick,
     onSelectClick,
+    selectButtonLabel = "Select Video",
+    removeButtonLabel = "Remove Video",
 }) => {
     return videoId && videoUrl ? (
         <>
@@ -60,7 +64,7 @@ export const BCVideoRenderer = ({
                 isSecondary
                 isDestructive
             >
-                Remove Video
+                {removeButtonLabel}
             </Button>
         </>
     ) : (
@@ -69,22 +73,24 @@ export const BCVideoRenderer = ({
             onClick={onSelectClick}
             className="bc-select-btn"
         >
-            Select Video
+            {selectButtonLabel}
         </Button>
     );
 };
 
-export const BCAnimationRenderer = ({
+export const AnimationRenderer = ({
     animationFileId,
     animationFileUrl,
     animationFileName,
     onSelectClick,
     onRemoveClick,
+    selectButtonLabel = "Select File",
+    removeButtonLabel = "Remove File",
 }) => {
     return animationFileId && animationFileUrl ? (
         <>
             <div className="bc-animation-block-json-file" onClick={onSelectClick}>
-                <WPIcon icon={pageIcon} size={36}/>
+                <WPIcon icon={pageIcon} size={36} />
                 <span>{animationFileName}</span>
             </div>
             <Button
@@ -93,24 +99,25 @@ export const BCAnimationRenderer = ({
                 className="bc-remove-btn"
                 onClick={onRemoveClick}
             >
-                Remove File
+                {removeButtonLabel}
             </Button>
         </>
     ) : (
         <Button variant="secondary" onClick={onSelectClick}>
-            Select File
+            {selectButtonLabel}
         </Button>
     )
 };
 
-// TODO: find better name
-export const BCMediaPicker = ({
+export const MediaControl = ({
     mediaId,
     mediaUrl,
     mediaFileName = '',
     onSelect,
     onRemove,
     type = MEDIA_TYPES.IMAGE,
+    selectButtonLabel,
+    removeButtonLabel,
     ...other
 }) => {
     if (type === MEDIA_TYPES.IMAGE) {
@@ -122,15 +129,17 @@ export const BCMediaPicker = ({
                     accept="image/*"
                     value={mediaId}
                     render={({ open }) => (
-                        <BCImageRenderer
+                        <ImageRenderer
                             imageId={mediaId}
                             imageUrl={mediaUrl}
                             onImageClick={open}
                             onSelectClick={open}
                             onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
                         />
                     )}
-                    { ...other }
+                    {...other}
                 />
             </MediaUploadCheck>
         );
@@ -142,14 +151,16 @@ export const BCMediaPicker = ({
                     allowedTypes={['video']}
                     value={mediaId}
                     render={({ open }) => (
-                        <BCVideoRenderer
+                        <VideoRenderer
                             videoId={mediaId}
                             videoUrl={mediaUrl}
                             onSelectClick={open}
                             onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
                         />
                     )}
-                    { ...other }
+                    {...other}
                 />
             </MediaUploadCheck>
         );
@@ -161,12 +172,14 @@ export const BCMediaPicker = ({
                     allowedTypes={['application/json', 'text/plain', 'application/lottie']}
                     value={mediaId}
                     render={({ open }) => (
-                        <BCAnimationRenderer
+                        <AnimationRenderer
                             animationFileId={mediaId}
                             animationFileUrl={mediaUrl}
                             animationFileName={mediaFileName}
                             onSelectClick={open}
                             onRemoveClick={onRemove}
+                            selectButtonLabel={selectButtonLabel}
+                            removeButtonLabel={removeButtonLabel}
                         />
                     )}
                     {...other}

package/src/components/MediaTypeControl.js

@@ -1,8 +1,8 @@
 import { useState } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 
-import { BCMediaPicker } from './MediaPicker.js';
-import { MEDIA_TYPE_LABELS} from '../utils/index.js';
+import { MediaControl } from './MediaControl.js';
+import { MEDIA_TYPE_LABELS } from '../utils/index.js';
 
 export const MediaTypeControl = (props) => {
     const {
@@ -12,9 +12,10 @@ export const MediaTypeControl = (props) => {
         mediaFileName = '',
         mediaOnSelect,
         mediaOnRemove,
+        label = 'Media Type',
     } = props;
 
-    const [ selectedMediaType, setSelectedMediaType ] = useState(mediaTypes?.[0]);
+    const [selectedMediaType, setSelectedMediaType] = useState(mediaTypes?.[0]);
 
     const mediaTypesOptions = mediaTypes
         ?.filter((type) => MEDIA_TYPE_LABELS[type]) // Ensure it's an allowed type
@@ -26,10 +27,9 @@ export const MediaTypeControl = (props) => {
     return (
         <>
             {
-                // TODO: add custom label
                 mediaTypes && (
                     <SelectControl
-                        label="Media Type"
+                        label={label}
                         value={selectedMediaType}
                         onChange={(mediaType) => setSelectedMediaType(mediaType)}
                         options={mediaTypesOptions}
@@ -39,7 +39,7 @@ export const MediaTypeControl = (props) => {
 
             {
                 selectedMediaType && (
-                    <BCMediaPicker
+                    <MediaControl
                         mediaId={mediaId}
                         mediaUrl={mediaUrl}
                         mediaFileName={mediaFileName}

package/src/components/index.js

@@ -2,7 +2,7 @@ export { ColorPaletteControl } from './ColorPaletteControl';
 export { IconPicker } from './IconPicker';
 export { ImageActions } from './ImageActions';
 export { LinkControl } from './LinkControl';
-export { BCImageRenderer, BCVideoRenderer, BCAnimationRenderer, BCMediaPicker } from './MediaPicker';
+export { ImageRenderer, VideoRenderer, AnimationRenderer, MediaControl } from './MediaControl.js';
 export { SortableSelect, SortableSelectAsync } from './SortableSelect';
 export { DataQueryControls } from './DataQueryControls.js';
 export { SpacingControl } from './SpacingControl.js';

package/src/styles/_responsive-spacing.scss

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