1
import { registerBlockType } from '@wordpress/blocks';
2
import Edit from './edit';
3
import save from './save';
4
import { __ } from '@wordpress/i18n';
5
 
6
registerBlockType( 'blocks/global-job-list', {
7
    title: __( 'Global Job List' ),
8
    description: __( 'Block showing a career post from WP.' ),
9
    category: 'Patterns',
10
    icon: 'block-default',
11
    keywords: [ __( 'job' ), __( 'global' )],
12
    attributes: {
13
        selectJobPosts: {
14
            type: 'array',
15
        },
16
    },
17
    supports: {
18
        facetwp: true,
19
    },
20
    edit: Edit,
21
    save,
22
} );

1
/**
2
 * Retrieves the translation of text.
3
 *
4
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
5
 */
6
import { __ } from '@wordpress/i18n';
7
 
8
/**
9
 * Custom react hook for retrieving props from registered selectors.
10
 *
11
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#useselect
12
 */
13
import { useSelect } from '@wordpress/data';
14
 
15
/**
16
 * A FormTokenField is a field similar to the tags and categories fields in the interim editor chrome, or the “to” field 
17
 * in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens.
18
 *
19
 * @see https://developer.wordpress.org/block-editor/reference-guides/components/form-token-field/
20
 */
21
import { FormTokenField, PanelBody } from '@wordpress/components';
22
 
23
/**
24
 * Decodes the HTML entities from a given string.
25
 *
26
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-html-entities/#decodeentities
27
 */
28
import { decodeEntities } from '@wordpress/html-entities';
29
 
30
/**
31
 * React hook that is used to mark the block wrapper element.
32
 * It provides all the necessary props like the class name.
33
 *
34
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
35
 */
36
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
37
 
38
/**
39
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
40
 * Those files can contain any CSS code that gets applied to the editor.
41
 *
42
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
43
 */
44
import './editor.scss';
45
 
46
/**
47
 * The edit function describes the structure of your block in the context of the
48
 * editor. This represents what the editor will render when the block is used.
49
 *
50
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
51
 *
52
 * @return {Element} Element to render.
53
 */
54
export default function Edit({ attributes, setAttributes }) {
55
	const { selectJobPosts } = attributes;
56
 
57
	const { jobs, departments, locations } = useSelect((select) => {
58
		const selectCore = select('core');
59
		
60
		const jobPosts = selectCore.getEntityRecords('postType', 'vtl_career', { per_page: -1, status: 'publish', facetwp: true});
61
		const allDepartments = selectCore.getEntityRecords('taxonomy', 'department', { per_page: -1 });
62
		const allLocations = selectCore.getEntityRecords('taxonomy', 'location', { per_page: -1 });
63
 
64
		return {
65
			jobs: jobPosts,
66
			departments: allDepartments,
67
			locations: allLocations,
68
		};
69
 
70
	}, []);
71
	
72
	const jobTitle = jobs?.map((job) => decodeEntities(job?.title?.raw)) || [];
73
	
74
	const departmentMap = Object.fromEntries(departments?.map((dep) => [dep.id, dep.name]) || []);
75
	const locationMap = Object.fromEntries(locations?.map((loc) => [loc.id, loc.name]) || []);
76
	
77
	const selectedJobTitles = selectJobPosts?.map((job) => job.title);
78
 
79
	const handleJobChange = (tokens) => {
80
		const selectJobs = tokens.map((jobTitle) => {
81
 
82
			const job = jobs?.find((job) => decodeEntities(job?.title?.raw) === jobTitle);
83
			
84
			return {
85
				title: jobTitle,
86
				id: job?.id,
87
				department: departmentMap[job?.department[0]],
88
				location: locationMap[job?.location[0]],
89
				permalink: job?.link
90
			};
91
		});
92
 
93
		setAttributes({ selectJobPosts: selectJobs });
94
	};
95
	
96
	return (
97
		<div {...useBlockProps()} className='job-lists global-job-lists'>
98
			<InspectorControls>
99
				<PanelBody
100
					title={__(
101
						'Select Jobs',
102
						'jobs'
103
					)}
104
				>
105
					<FormTokenField
106
						value={selectedJobTitles}
107
						suggestions={jobTitle}
108
						__experimentalExpandOnFocus
109
						placeholder={__(
110
							'Select Jobs',
111
							'jobs'
112
						)}
113
						onChange={handleJobChange}
114
						__nextHasNoMarginBottom
115
					/>
116
				</PanelBody>
117
			</InspectorControls>
118
			{selectJobPosts && selectJobPosts.length ? (
119
				<table className="job-lists">
120
					<thead>
121
						<tr>
122
							<th scope='col'>
123
								Job Title
124
							</th>
125
							<th scope='col'>
126
								Department
127
							</th>
128
							<th scope='col'>
129
								Location
130
							</th>
131
							<th scope='col'></th>
132
						</tr>
133
					</thead>
134
					<tbody className='facetwp-template'>
135
						{selectJobPosts.map((jobPost) => {
136
							return (
137
								<tr key={jobPost.id}>
138
									<td aria-label='Job Title'>{jobPost.title}</td>
139
									<td aria-label='Department'>{jobPost.department}</td>
140
									<td aria-label='Location'>{jobPost.location}</td>
141
									<td aria-label="">
142
										<div className="wp-block-button is-style-outline">
143
											<a href={jobPost.permalink} className="has-obsidian-color has-text-color wp-block-button__link wp-element-button">Apply Now</a>
144
										</div>
145
									</td>
146
								</tr>
147
							);
148
						})}
149
					</tbody>
150
				</table>
151
				
152
			) : (
153
				<p>{ __(
154
					'Please select any job post',
155
					'jobs'
156
				) }</p>
157
			)}
158
		</div>
159
	);
160
}

1
/**
2
 * React hook that is used to mark the block wrapper element.
3
 * It provides all the necessary props like the class name.
4
 *
5
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
6
 */
7
import { useBlockProps } from '@wordpress/block-editor';
8
 
9
/**
10
 * Retrieves the translation of text.
11
 *
12
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
13
 */
14
import { __ } from '@wordpress/i18n';
15
 
16
/**
17
 * The save function defines the way in which the different attributes should
18
 * be combined into the final markup, which is then serialized by the block
19
 * editor into `post_content`.
20
 *
21
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
22
 *
23
 * @return {Element} Element to render.
24
 */
25
export default function save({ attributes }) {
26
    const { selectJobPosts } = attributes;
27
	
28
    return (
29
		<div { ...useBlockProps.save() } className='job-lists global-job-lists'>
30
			{selectJobPosts && selectJobPosts.length ? (
31
				<table className="job-lists">
32
                    <thead>
33
                        <tr>
34
                            <th scope='col'>
35
                                Job Title
36
                            </th>
37
                            <th scope='col'>
38
                                Department
39
                            </th>
40
                            <th scope='col'>
41
                                Location
42
                            </th>
43
                            <th scope='col'></th>
44
                        </tr>
45
                    </thead>
46
                    <tbody className='facetwp-template'>
47
                        {selectJobPosts.map((jobPost) => {
48
                            return (
49
                                <tr key={jobPost.id}>
50
                                    <td aria-label='Job Title'>{jobPost.title}</td>
51
                                    <td aria-label='Department'>{jobPost.department}</td>
52
                                    <td aria-label='Location'>{jobPost.location}</td>
53
                                    <td aria-label="">
54
                                        <div className="wp-block-button is-style-outline">
55
                                            <a href={jobPost.permalink} className="has-obsidian-color has-text-color wp-block-button__link wp-element-button">Apply Now</a>
56
                                        </div>
57
                                    </td>
58
                                </tr>
59
                            );
60
                        })}
61
                    </tbody>
62
                </table>
63
			) : (
64
				<p>{ __(
65
					'Please select any job post',
66
					'jobs'
67
				) }</p>
68
			)}
69
		</div>
70
	);
71
}