@secretstache/wordpress-gutenberg 0.5.3 → 0.5.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/build/index.js +3 -3
  2. package/build/index.js.map +1 -1
  3. package/build/styles.css +2 -0
  4. package/package.json +1 -1
  5. package/src/components/MediaControl.js +65 -58
  6. package/src/styles/_link-control.scss +4 -0
package/build/styles.css CHANGED
@@ -153,6 +153,8 @@
153
153
  .editor-sidebar .block-editor-link-control {
154
154
  min-width: 100%;
155
155
  width: 100%; }
156
+ .editor-sidebar .block-editor-link-control .block-editor-url-input {
157
+ min-width: 100%; }
156
158
  .editor-sidebar .block-editor-link-control .block-editor-url-input__input {
157
159
  width: 100%; }
158
160
  .editor-sidebar .block-editor-link-control .components-base-control {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@secretstache/wordpress-gutenberg",
3
- "version": "0.5.3",
3
+ "version": "0.5.4",
4
4
  "description": "",
5
5
  "author": "Secret Stache",
6
6
  "license": "GPL-2.0-or-later",
package/src/components/MediaControl.js CHANGED
@@ -1,4 +1,4 @@
1
- import { Button, Icon as WPIcon } from '@wordpress/components';
1
+ import { BaseControl, Button, Icon as WPIcon } from '@wordpress/components';
2
2
  import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
3
3
  import { page as pageIcon } from '@wordpress/icons';
4
4
 
@@ -110,6 +110,7 @@ export const AnimationRenderer = ({
110
110
  };
111
111
 
112
112
  export const MediaControl = ({
113
+ label,
113
114
  mediaId,
114
115
  mediaUrl,
115
116
  mediaFileName = '',
@@ -122,69 +123,75 @@ export const MediaControl = ({
122
123
  }) => {
123
124
  if (type === MEDIA_TYPE.IMAGE) {
124
125
  return (
125
- <MediaUploadCheck>
126
- <MediaUpload
127
- onSelect={onSelect}
128
- allowedTypes={['image', 'image/svg+xml']}
129
- accept="image/*"
130
- value={mediaId}
131
- render={({ open }) => (
132
- <ImageRenderer
133
- imageId={mediaId}
134
- imageUrl={mediaUrl}
135
- onImageClick={open}
136
- onSelectClick={open}
137
- onRemoveClick={onRemove}
138
- selectButtonLabel={selectButtonLabel}
139
- removeButtonLabel={removeButtonLabel}
140
- />
141
- )}
142
- {...other}
143
- />
144
- </MediaUploadCheck>
126
+ <BaseControl label={label || 'Image'}>
127
+ <MediaUploadCheck>
128
+ <MediaUpload
129
+ onSelect={onSelect}
130
+ allowedTypes={['image', 'image/svg+xml']}
131
+ accept="image/*"
132
+ value={mediaId}
133
+ render={({ open }) => (
134
+ <ImageRenderer
135
+ imageId={mediaId}
136
+ imageUrl={mediaUrl}
137
+ onImageClick={open}
138
+ onSelectClick={open}
139
+ onRemoveClick={onRemove}
140
+ selectButtonLabel={selectButtonLabel || 'Select Image'}
141
+ removeButtonLabel={removeButtonLabel || 'Remove Image'}
142
+ />
143
+ )}
144
+ {...other}
145
+ />
146
+ </MediaUploadCheck>
147
+ </BaseControl>
145
148
  );
146
149
  } else if (type === MEDIA_TYPE.VIDEO) {
147
150
  return (
148
- <MediaUploadCheck>
149
- <MediaUpload
150
- onSelect={onSelect}
151
- allowedTypes={['video']}
152
- value={mediaId}
153
- render={({ open }) => (
154
- <VideoRenderer
155
- videoId={mediaId}
156
- videoUrl={mediaUrl}
157
- onSelectClick={open}
158
- onRemoveClick={onRemove}
159
- selectButtonLabel={selectButtonLabel}
160
- removeButtonLabel={removeButtonLabel}
161
- />
162
- )}
163
- {...other}
164
- />
165
- </MediaUploadCheck>
151
+ <BaseControl label={label || 'Video'}>
152
+ <MediaUploadCheck>
153
+ <MediaUpload
154
+ onSelect={onSelect}
155
+ allowedTypes={['video']}
156
+ value={mediaId}
157
+ render={({ open }) => (
158
+ <VideoRenderer
159
+ videoId={mediaId}
160
+ videoUrl={mediaUrl}
161
+ onSelectClick={open}
162
+ onRemoveClick={onRemove}
163
+ selectButtonLabel={selectButtonLabel || 'Select Video'}
164
+ removeButtonLabel={removeButtonLabel || 'Remove Video'}
165
+ />
166
+ )}
167
+ {...other}
168
+ />
169
+ </MediaUploadCheck>
170
+ </BaseControl>
166
171
  );
167
172
  } else if (type === MEDIA_TYPE.ANIMATION) {
168
173
  return (
169
- <MediaUploadCheck>
170
- <MediaUpload
171
- onSelect={onSelect}
172
- allowedTypes={['application/json', 'text/plain', 'application/lottie']}
173
- value={mediaId}
174
- render={({ open }) => (
175
- <AnimationRenderer
176
- animationFileId={mediaId}
177
- animationFileUrl={mediaUrl}
178
- animationFileName={mediaFileName}
179
- onSelectClick={open}
180
- onRemoveClick={onRemove}
181
- selectButtonLabel={selectButtonLabel}
182
- removeButtonLabel={removeButtonLabel}
183
- />
184
- )}
185
- {...other}
186
- />
187
- </MediaUploadCheck>
174
+ <BaseControl label={label || 'Animation'}>
175
+ <MediaUploadCheck>
176
+ <MediaUpload
177
+ onSelect={onSelect}
178
+ allowedTypes={['application/json', 'text/plain', 'application/lottie']}
179
+ value={mediaId}
180
+ render={({ open }) => (
181
+ <AnimationRenderer
182
+ animationFileId={mediaId}
183
+ animationFileUrl={mediaUrl}
184
+ animationFileName={mediaFileName}
185
+ onSelectClick={open}
186
+ onRemoveClick={onRemove}
187
+ selectButtonLabel={selectButtonLabel || 'Select Animation'}
188
+ removeButtonLabel={removeButtonLabel || 'Remove Animation'}
189
+ />
190
+ )}
191
+ {...other}
192
+ />
193
+ </MediaUploadCheck>
194
+ </BaseControl>
188
195
  );
189
196
  } else {
190
197
  throw new Error('Unrecognized media type.');
package/src/styles/_link-control.scss CHANGED
@@ -30,6 +30,10 @@
30
30
  min-width: 100%;
31
31
  width: 100%;
32
32
 
33
+ .block-editor-url-input {
34
+ min-width: 100%;
35
+ }
36
+
33
37
  .block-editor-url-input__input {
34
38
  width: 100%;
35
39
  }