69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
;(function (blocks, element, blockEditor) {
|
|
const { registerBlockType } = blocks
|
|
const { createElement: el } = element
|
|
const { RichText, useBlockProps } = blockEditor
|
|
|
|
registerBlockType('aac/alert-info', {
|
|
title: 'Alert info',
|
|
icon: 'info',
|
|
category: 'widgets',
|
|
attributes: {
|
|
title: { type: 'string', source: 'html', selector: 'strong' },
|
|
content: { type: 'string', source: 'html', selector: 'p' },
|
|
},
|
|
|
|
edit: function (props) {
|
|
const { attributes, setAttributes } = props
|
|
const { title, content } = attributes
|
|
const blockProps = useBlockProps({ className: 'alert-info' })
|
|
|
|
return el('div', blockProps, [
|
|
el('div', { className: 'alert-header' }, [
|
|
el('img', {
|
|
src: '/wp-content/uploads/2025/10/WarningCircle.svg',
|
|
alt: 'Alert icon',
|
|
className: 'alert-icon',
|
|
}),
|
|
el(
|
|
'span',
|
|
null,
|
|
el(RichText, {
|
|
tagName: 'strong',
|
|
placeholder: 'Ważna informacja',
|
|
value: title,
|
|
onChange: (val) => setAttributes({ title: val }),
|
|
})
|
|
),
|
|
]),
|
|
el(RichText, {
|
|
tagName: 'p',
|
|
placeholder: 'Treść alertu...',
|
|
value: content,
|
|
onChange: (val) => setAttributes({ content: val }),
|
|
}),
|
|
])
|
|
},
|
|
|
|
save: function (props) {
|
|
const { attributes } = props
|
|
const { title, content } = attributes
|
|
|
|
return el('div', { className: 'alert-info' }, [
|
|
el('div', { className: 'alert-header' }, [
|
|
el('img', {
|
|
src: '/wp-content/uploads/2025/10/WarningCircle.svg',
|
|
alt: 'Alert icon',
|
|
className: 'alert-icon',
|
|
}),
|
|
el(
|
|
'span',
|
|
null,
|
|
el(RichText.Content, { tagName: 'strong', value: title })
|
|
),
|
|
]),
|
|
el(RichText.Content, { tagName: 'p', value: content }),
|
|
])
|
|
},
|
|
})
|
|
})(window.wp.blocks, window.wp.element, window.wp.blockEditor)
|