// Import CSS. | |
import './style.scss'; | |
import './editor.scss'; | |
import {List_Item, List_Item_Edit} from './list_item.js'; | |
const {__} = wp.i18n; // Import __() from wp.i18n | |
const {registerBlockType} = wp.blocks; | |
const { | |
TextControl | |
} = wp.components; | |
const { | |
URLInputButton, | |
InnerBlocks, | |
} = wp.editor; | |
registerBlockType('mat/block-mat-gb-box-list', { | |
title: __('Materiell: Box List'), | |
icon: 'grid-view', | |
category: 'common', | |
keywords: [ | |
__('Materiell'), | |
__('Box List'), | |
__('Custom'), | |
], | |
attributes: { | |
heading: { | |
type: 'array', | |
source: 'children', | |
selector: '.heading', | |
default: 'How Can We Help You?' | |
} | |
}, | |
edit: function (props) { | |
const { | |
attributes: {heading}, | |
setAttributes, | |
isSelected | |
} = props; | |
const inner_blocks_template = [ | |
['mat/block-mat-gb-box-list-item'], | |
['mat/block-mat-gb-box-list-item'], | |
['mat/block-mat-gb-box-list-item'], | |
['mat/block-mat-gb-box-list-item'], | |
]; | |
return ( | |
<div> | |
<section className="gb-layout-full-width-container"> | |
<div className="contents"> | |
<div className="gb-content-square-menu"> | |
{isSelected ? ( | |
<TextControl | |
label={__('Heading Text', 'materiell-plugins')} | |
help={__('Leave this field blank to omit the heading.', 'materiell-plugins')} | |
value={heading} | |
className="heading-editor" | |
onChange={heading => setAttributes({heading})} | |
/> | |
) : ( | |
<h2 className="heading">{heading}</h2> | |
)} | |
<ul className="list-container editor"> | |
<InnerBlocks | |
allowedBlocks={[ | |
'mat/block-mat-gb-box-list-item', | |
]} | |
template={inner_blocks_template}/> | |
</ul> | |
</div> | |
</div> | |
</section> | |
</div> | |
); | |
}, | |
save(props) { | |
const { | |
attributes: {heading, list_items} | |
} = props; | |
return ( | |
<div> | |
<section className="gb-layout-full-width-container"> | |
<div className="contents"> | |
<div className="gb-content-square-menu"> | |
<h2 className="heading">{heading}</h2> | |
<ul className="list-container"> | |
<InnerBlocks.Content/> | |
</ul> | |
</div> | |
</div> | |
</section> | |
</div> | |
); | |
}, | |
}); | |
registerBlockType('mat/block-mat-gb-box-list-item', { | |
title: __('Materiell: Box List Item'), | |
parent: ['mat/block-mat-gb-box-list-item'], | |
icon: 'grid-view', | |
category: 'common', | |
keywords: [ | |
__('Materiell'), | |
__('Box List Item'), | |
__('Custom'), | |
], | |
attributes: { | |
url: { | |
type: 'string', | |
source: 'attribute', | |
selector: '.item-url', | |
attribute: 'href' | |
} | |
}, | |
edit: function (props) { | |
const { | |
attributes: {url}, | |
setAttributes, | |
isSelected | |
} = props; | |
const inner_blocks_template = [ | |
['core/heading', {placeholder: 'Enter a title'}], | |
['core/paragraph', {placeholder: 'Enter content...'}], | |
]; | |
return ( | |
<li className="list-item"> | |
<InnerBlocks | |
templateLock="all" | |
template={inner_blocks_template}/> | |
<URLInputButton | |
url={url} | |
onChange={(url) => setAttributes({url})} | |
/> | |
</li> | |
); | |
}, | |
save(props) { | |
const { | |
attributes: {url}, | |
} = props; | |
return ( | |
<li className="list-item"> | |
<a href={url} className="item-url"> | |
<InnerBlocks.Content/> | |
</a> | |
</li> | |
); | |
}, | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment