@wordpress/fields 0.25.3 → 0.26.0

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 (9) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/fields/featured-image/featured-image-edit.js +88 -59
  3. package/build/fields/featured-image/featured-image-edit.js.map +3 -3
  4. package/build-module/fields/featured-image/featured-image-edit.js +93 -61
  5. package/build-module/fields/featured-image/featured-image-edit.js.map +2 -2
  6. package/build-types/fields/featured-image/featured-image-edit.d.ts.map +1 -1
  7. package/package.json +26 -26
  8. package/src/fields/featured-image/featured-image-edit.tsx +113 -66
  9. package/tsconfig.tsbuildinfo +1 -1
package/src/fields/featured-image/featured-image-edit.tsx CHANGED
@@ -3,9 +3,11 @@
3
3
  */
4
4
  import { Button, __experimentalGrid as Grid } from '@wordpress/components';
5
5
  import { useSelect } from '@wordpress/data';
6
- import { useCallback, useRef } from '@wordpress/element';
7
- // @ts-ignore
8
- import { MediaUpload } from '@wordpress/media-utils';
6
+ import { useCallback, useRef, useState } from '@wordpress/element';
7
+ import {
8
+ privateApis as mediaUtilsPrivateApis,
9
+ MediaUpload,
10
+ } from '@wordpress/media-utils';
9
11
  import { lineSolid } from '@wordpress/icons';
10
12
  import { store as coreStore } from '@wordpress/core-data';
11
13
  import type { DataFormControlProps } from '@wordpress/dataviews';
@@ -15,6 +17,45 @@ import { __ } from '@wordpress/i18n';
15
17
  * Internal dependencies
16
18
  */
17
19
  import type { BasePostWithEmbeddedFeaturedMedia } from '../../types';
20
+ import { unlock } from '../../lock-unlock';
21
+
22
+ const { MediaUploadModal } = unlock( mediaUtilsPrivateApis );
23
+
24
+ /**
25
+ * Conditional Media component that uses MediaUploadModal when experiment is enabled,
26
+ * otherwise falls back to media-utils MediaUpload.
27
+ *
28
+ * @param {Object} root0 Component props.
29
+ * @param {Function} root0.render Render prop function that receives { open } object.
30
+ * @param {Object} root0.props Other props passed to the media upload component.
31
+ * @return {JSX.Element} The component.
32
+ */
33
+ function ConditionalMediaUpload( { render, ...props }: any ) {
34
+ const [ isModalOpen, setIsModalOpen ] = useState( false );
35
+
36
+ if ( ( window as any ).__experimentalDataViewsMediaModal ) {
37
+ return (
38
+ <>
39
+ { render && render( { open: () => setIsModalOpen( true ) } ) }
40
+ <MediaUploadModal
41
+ { ...props }
42
+ isOpen={ isModalOpen }
43
+ onClose={ () => {
44
+ setIsModalOpen( false );
45
+ props.onClose?.();
46
+ } }
47
+ onSelect={ ( media: any ) => {
48
+ setIsModalOpen( false );
49
+ props.onSelect?.( media );
50
+ } }
51
+ />
52
+ </>
53
+ );
54
+ }
55
+
56
+ // Fallback to media-utils MediaUpload when experiment is disabled
57
+ return <MediaUpload { ...props } render={ render } />;
58
+ }
18
59
 
19
60
  export const FeaturedImageEdit = ( {
20
61
  data,
@@ -48,74 +89,80 @@ export const FeaturedImageEdit = ( {
48
89
  return (
49
90
  <fieldset className="fields-controls__featured-image">
50
91
  <div className="fields-controls__featured-image-container">
51
- <MediaUpload
52
- onSelect={ ( selectedMedia: { id: number } ) => {
92
+ <ConditionalMediaUpload
93
+ onSelect={ ( selectedMedia: any ) => {
53
94
  onChangeControl( selectedMedia.id );
54
95
  } }
55
96
  allowedTypes={ [ 'image' ] }
56
- render={ ( { open }: { open: () => void } ) => {
57
- return (
58
- <div
59
- ref={ ref }
60
- role="button"
61
- tabIndex={ -1 }
62
- onClick={ () => {
97
+ value={ value }
98
+ title={ __( 'Select Featured Image' ) }
99
+ render={ ( { open }: any ) => (
100
+ <div
101
+ ref={ ref }
102
+ role="button"
103
+ tabIndex={ -1 }
104
+ onClick={ open }
105
+ onKeyDown={ ( event ) => {
106
+ if (
107
+ event.key === 'Enter' ||
108
+ event.key === ' '
109
+ ) {
110
+ event.preventDefault();
63
111
  open();
64
- } }
65
- onKeyDown={ open }
112
+ }
113
+ } }
114
+ >
115
+ <Grid
116
+ rowGap={ 0 }
117
+ columnGap={ 8 }
118
+ templateColumns="24px 1fr 24px"
66
119
  >
67
- <Grid
68
- rowGap={ 0 }
69
- columnGap={ 8 }
70
- templateColumns="24px 1fr 24px"
71
- >
72
- { url && (
73
- <>
74
- <img
75
- className="fields-controls__featured-image-image"
76
- alt=""
77
- width={ 24 }
78
- height={ 24 }
79
- src={ url }
80
- />
81
- <span className="fields-controls__featured-image-title">
82
- { title }
83
- </span>
84
- </>
85
- ) }
86
- { ! url && (
87
- <>
88
- <span
89
- className="fields-controls__featured-image-placeholder"
90
- style={ {
91
- width: '24px',
92
- height: '24px',
93
- } }
94
- />
95
- <span className="fields-controls__featured-image-title">
96
- { __( 'Choose an image…' ) }
97
- </span>
98
- </>
99
- ) }
100
- { url && (
101
- <>
102
- <Button
103
- size="small"
104
- className="fields-controls__featured-image-remove-button"
105
- icon={ lineSolid }
106
- onClick={ (
107
- event: React.MouseEvent< HTMLButtonElement >
108
- ) => {
109
- event.stopPropagation();
110
- onChangeControl( 0 );
111
- } }
112
- />
113
- </>
114
- ) }
115
- </Grid>
116
- </div>
117
- );
118
- } }
120
+ { url && (
121
+ <>
122
+ <img
123
+ className="fields-controls__featured-image-image"
124
+ alt=""
125
+ width={ 24 }
126
+ height={ 24 }
127
+ src={ url }
128
+ />
129
+ <span className="fields-controls__featured-image-title">
130
+ { title }
131
+ </span>
132
+ </>
133
+ ) }
134
+ { ! url && (
135
+ <>
136
+ <span
137
+ className="fields-controls__featured-image-placeholder"
138
+ style={ {
139
+ width: '24px',
140
+ height: '24px',
141
+ } }
142
+ />
143
+ <span className="fields-controls__featured-image-title">
144
+ { __( 'Choose an image…' ) }
145
+ </span>
146
+ </>
147
+ ) }
148
+ { url && (
149
+ <>
150
+ <Button
151
+ size="small"
152
+ className="fields-controls__featured-image-remove-button"
153
+ icon={ lineSolid }
154
+ onClick={ (
155
+ event: React.MouseEvent< HTMLButtonElement >
156
+ ) => {
157
+ event.stopPropagation();
158
+ onChangeControl( 0 );
159
+ } }
160
+ />
161
+ </>
162
+ ) }
163
+ </Grid>
164
+ </div>
165
+ ) }
119
166
  />
120
167
  </div>
121
168
  </fieldset>