-
-
Save johnReeve/b11d1025a47f37a239491a6f43357b10 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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