diff --git a/block.js b/block.js new file mode 100644 index 0000000..8fb686c --- /dev/null +++ b/block.js @@ -0,0 +1,102 @@ +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) + ) +}); diff --git a/cv-experience-block-v1.php b/cv-experience-block-v1.php new file mode 100644 index 0000000..53f4386 --- /dev/null +++ b/cv-experience-block-v1.php @@ -0,0 +1,50 @@ + 'cv-v1-blocks', + 'style' => 'cv-v1-style', + 'editor_style' => 'cv-v1-editor', + ]); + + register_block_type('cv/position', [ + 'editor_script' => 'cv-v1-blocks', + 'style' => 'cv-v1-style', + 'editor_style' => 'cv-v1-editor', + ]); +} +add_action('init', 'cv_v1_register_blocks'); diff --git a/editor.css b/editor.css new file mode 100644 index 0000000..ad89f82 --- /dev/null +++ b/editor.css @@ -0,0 +1,9 @@ +.cv-company { + border-left: 4px solid #2271b1; + padding-left: 10px; +} + +.cv-position { + border-left: 2px solid #ddd; + padding-left: 10px; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..5bee0ce --- /dev/null +++ b/style.css @@ -0,0 +1,40 @@ +.cv-company { + margin-bottom: 2rem; +} + +.cv-company-name { + font-size: 1.25rem; +} + +.cv-company-dates { + color: #666; + margin-bottom: 0.5rem; +} + +/* tighter spacing fix */ +.cv-position-dates { + color: #777; + margin-bottom: 4px; +} + +.cv-position .wp-block-list { + margin-top: 4px; + margin-bottom: 0; +} + +.cv-position p { + margin-bottom: 4px; +} + +.cv-position { + margin-left: 24px; + margin-bottom: 0.75rem; +} + +.cv-position-title { + font-weight: 700; +} + +.cv-position-department { + font-style: italic; +}