Skip to content

Instantly share code, notes, and snippets.

@johnReeve johnReeve/box-list.js Secret
Created Feb 1, 2019

Embed
What would you like to do?
// 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
You can’t perform that action at this time.