103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
|
const el = wp.element.createElement;
|
||
|
|
const { registerBlockType } = wp.blocks;
|
||
|
|
const { RichText, InnerBlocks } = wp.blockEditor;
|
||
|
|
|
||
|
|
// COMPANY
|
||
|
|
registerBlockType('cv/company', {
|
||
|
|
title: 'Company (CV)',
|
||
|
|
icon: 'building',
|
||
|
|
category: 'layout',
|
||
|
|
|
||
|
|
attributes: {
|
||
|
|
name: { type: 'string', default: '' },
|
||
|
|
dates: { type: 'string', default: '' }
|
||
|
|
},
|
||
|
|
|
||
|
|
edit: ({ attributes, setAttributes }) =>
|
||
|
|
el('div', { className: 'cv-company' },
|
||
|
|
|
||
|
|
el(RichText, {
|
||
|
|
tagName: 'div',
|
||
|
|
className: 'cv-company-name',
|
||
|
|
placeholder: 'Company Name',
|
||
|
|
value: attributes.name,
|
||
|
|
onChange: val => setAttributes({ name: val })
|
||
|
|
}),
|
||
|
|
|
||
|
|
el(RichText, {
|
||
|
|
tagName: 'div',
|
||
|
|
className: 'cv-company-dates',
|
||
|
|
placeholder: 'Years (e.g. 2020 - 2024)',
|
||
|
|
value: attributes.dates,
|
||
|
|
onChange: val => setAttributes({ dates: val })
|
||
|
|
}),
|
||
|
|
|
||
|
|
el(InnerBlocks, {
|
||
|
|
allowedBlocks: ['cv/position'],
|
||
|
|
template: [['cv/position']]
|
||
|
|
})
|
||
|
|
),
|
||
|
|
|
||
|
|
save: ({ attributes }) =>
|
||
|
|
el('div', { className: 'cv-company' },
|
||
|
|
el('div', { className: 'cv-company-name' }, el('strong', null, attributes.name)),
|
||
|
|
el('div', { className: 'cv-company-dates' }, attributes.dates),
|
||
|
|
el(InnerBlocks.Content, null)
|
||
|
|
)
|
||
|
|
});
|
||
|
|
|
||
|
|
// POSITION
|
||
|
|
registerBlockType('cv/position', {
|
||
|
|
title: 'Position (CV)',
|
||
|
|
icon: 'id',
|
||
|
|
parent: ['cv/company'],
|
||
|
|
category: 'layout',
|
||
|
|
|
||
|
|
attributes: {
|
||
|
|
title: { type: 'string', default: '' },
|
||
|
|
department: { type: 'string', default: '' },
|
||
|
|
dates: { type: 'string', default: '' }
|
||
|
|
},
|
||
|
|
|
||
|
|
edit: ({ attributes, setAttributes }) =>
|
||
|
|
el('div', { className: 'cv-position' },
|
||
|
|
|
||
|
|
el(RichText, {
|
||
|
|
tagName: 'div',
|
||
|
|
className: 'cv-position-title',
|
||
|
|
placeholder: 'Job Title',
|
||
|
|
value: attributes.title,
|
||
|
|
onChange: val => setAttributes({ title: val })
|
||
|
|
}),
|
||
|
|
|
||
|
|
el(RichText, {
|
||
|
|
tagName: 'div',
|
||
|
|
className: 'cv-position-department',
|
||
|
|
placeholder: 'Department',
|
||
|
|
value: attributes.department,
|
||
|
|
onChange: val => setAttributes({ department: val })
|
||
|
|
}),
|
||
|
|
|
||
|
|
el(RichText, {
|
||
|
|
tagName: 'div',
|
||
|
|
className: 'cv-position-dates',
|
||
|
|
placeholder: 'Period',
|
||
|
|
value: attributes.dates,
|
||
|
|
onChange: val => setAttributes({ dates: val })
|
||
|
|
}),
|
||
|
|
|
||
|
|
el(InnerBlocks, {
|
||
|
|
allowedBlocks: ['core/list'],
|
||
|
|
template: [['core/list']]
|
||
|
|
})
|
||
|
|
),
|
||
|
|
|
||
|
|
save: ({ attributes }) =>
|
||
|
|
el('div', { className: 'cv-position' },
|
||
|
|
el('div', { className: 'cv-position-title' }, el('strong', null, attributes.title)),
|
||
|
|
el('div', { className: 'cv-position-department' }, attributes.department),
|
||
|
|
el('div', { className: 'cv-position-dates' }, attributes.dates),
|
||
|
|
el(InnerBlocks.Content, null)
|
||
|
|
)
|
||
|
|
});
|