Skip to content

Commit bf64e25

Browse files
Soare-Robert-DanielSoare-Robert-Daniel
committed
fix: use module import for deps in Block
Using the global variable for dependencies works but the build files can not be properly scanned by WordPress i18n functions.
1 parent 9c3d0d7 commit bf64e25

File tree

4 files changed

+73
-72
lines changed

4 files changed

+73
-72
lines changed

‎js/FeedzyBlock/Editor.js

+10-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
/**
22
* WordPress dependencies
33
*/
4-
const { __, sprintf } = wp.i18n;
5-
6-
const { apiRequest } = wp;
7-
8-
const { Component, Fragment } = wp.element;
9-
10-
const { ExternalLink, Placeholder, TextControl, Button, Spinner } =
11-
wp.components;
4+
import {
5+
ExternalLink,
6+
Placeholder,
7+
TextControl,
8+
Button,
9+
Spinner,
10+
} from '@wordpress/components';
1211

1312
import queryString from 'query-string';
1413
import Inspector from './inspector';
14+
import { __, sprintf } from '@wordpress/i18n';
15+
import { apiFetch as apiRequest } from '@wordpress/api-fetch';
16+
import { Component, Fragment } from '@wordpress/element';
1517
import {
1618
unescapeHTML,
1719
filterData,

‎js/FeedzyBlock/index.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// jshint ignore: start
2+
import { __ } from '@wordpress/i18n';
3+
import { registerBlockType } from '@wordpress/blocks';
24

35
/**
46
* Block dependencies
@@ -7,13 +9,6 @@ import './style.scss';
79
import blockAttributes from './attributes.js';
810
import Editor from './Editor.js';
911

10-
/**
11-
* Internal block libraries
12-
*/
13-
const { __ } = wp.i18n;
14-
15-
const { registerBlockType } = wp.blocks;
16-
1712
/**
1813
* Register block
1914
*/

‎js/FeedzyBlock/inspector.js

+6-15
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,17 @@
33
/**
44
* Block dependencies
55
*/
6-
import { RawHTML } from '@wordpress/element';
6+
import { Component, Fragment } from '@wordpress/element';
77
import RadioImageControl from './radio-image-control/';
88

99
/**
1010
* External dependencies
1111
*/
1212
import classnames from 'classnames';
13-
14-
/**
15-
* Internal block libraries
16-
*/
17-
const { __ } = wp.i18n;
18-
19-
const { applyFilters } = wp.hooks;
20-
21-
const { InspectorControls, MediaUpload } = wp.blockEditor || wp.editor;
22-
23-
const { Component, Fragment } = wp.element;
24-
25-
const {
13+
import { __ } from '@wordpress/i18n';
14+
import { applyFilters } from '@wordpress/hooks';
15+
import { InspectorControls, MediaUpload } from '@wordpress/block-editor';
16+
import {
2617
BaseControl,
2718
ExternalLink,
2819
PanelBody,
@@ -34,7 +25,7 @@ const {
3425
SelectControl,
3526
ResponsiveWrapper,
3627
Dashicon,
37-
} = wp.components;
28+
} from '@wordpress/components';
3829

3930
/**
4031
* Create an Inspector Controls wrapper Component

‎js/FeedzyBlock/radio-image-control/index.js

+55-42
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,63 @@
44
* Block dependencies
55
*/
66
import './style.scss';
7+
import { isEmpty } from 'lodash';
8+
import { BaseControl } from '@wordpress/components';
9+
import { withInstanceId } from '@wordpress/compose';
710

8-
/**
9-
* Internal dependencies
10-
*/
11-
const { isEmpty } = lodash;
12-
13-
const { BaseControl } = wp.components;
14-
15-
const { withInstanceId } = wp.compose;
16-
17-
18-
function RadioImageControl( { label, selected, help, instanceId, onChange, disabled, options = [] } ) {
19-
const id = `inspector-radio-image-control-${ instanceId }`;
20-
const onChangeValue = ( event ) => onChange( event.target.value );
11+
function RadioImageControl({
12+
label,
13+
selected,
14+
help,
15+
instanceId,
16+
onChange,
17+
disabled,
18+
options = [],
19+
}) {
20+
const id = `inspector-radio-image-control-${instanceId}`;
21+
const onChangeValue = (event) => onChange(event.target.value);
2122

22-
return ! isEmpty( options ) && (
23-
<BaseControl label={ label } id={ id } help={ help } className="components-radio-image-control feedzy-template">
24-
<div className="components-radio-image-control__container">
25-
{ options.map( ( option, index ) =>
26-
<div
27-
key={ `${ id }-${ index }` }
28-
className="components-radio-image-control__option"
29-
>
30-
<input
31-
id={ `${ id }-${ index }` }
32-
className="components-radio-image-control__input"
33-
type="radio"
34-
name={ id }
35-
value={ option.value }
36-
onChange={ onChangeValue }
37-
checked={ option.value === selected }
38-
aria-describedby={ !! help ? `${ id }__help` : undefined }
39-
disabled={ disabled }
40-
/>
41-
<label htmlFor={ `${ id }-${ index }` } title={ option.label }>
42-
<img src={ option.src } />
43-
<span class="image-clickable"></span>
44-
</label>
45-
<span>{ option.label }</span>
46-
</div>
47-
) }
48-
</div>
49-
</BaseControl>
23+
return (
24+
!isEmpty(options) && (
25+
<BaseControl
26+
label={label}
27+
id={id}
28+
help={help}
29+
className="components-radio-image-control feedzy-template"
30+
>
31+
<div className="components-radio-image-control__container">
32+
{options.map((option, index) => (
33+
<div
34+
key={`${id}-${index}`}
35+
className="components-radio-image-control__option"
36+
>
37+
<input
38+
id={`${id}-${index}`}
39+
className="components-radio-image-control__input"
40+
type="radio"
41+
name={id}
42+
value={option.value}
43+
onChange={onChangeValue}
44+
checked={option.value === selected}
45+
aria-describedby={
46+
!!help ? `${id}__help` : undefined
47+
}
48+
disabled={disabled}
49+
/>
50+
<label
51+
htmlFor={`${id}-${index}`}
52+
title={option.label}
53+
>
54+
<img src={option.src} />
55+
<span className="image-clickable"></span>
56+
</label>
57+
<span>{option.label}</span>
58+
</div>
59+
))}
60+
</div>
61+
</BaseControl>
62+
)
5063
);
5164
}
5265

53-
export default withInstanceId( RadioImageControl );
66+
export default withInstanceId(RadioImageControl);

0 commit comments

Comments
 (0)