wp-gutenberg-block-template/src/index.js

64 lines
1.3 KiB
JavaScript

import './style.scss';
import './editor.scss';
import { registerBlockStyle, registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
const NAMESPACE = 'namespace'; // TODO
const SLUG = 'slug'; // TODO
const BLOCK_TITLE = 'Block Title'; // TODO
const INNER_TEMPLATE = [
['core/heading', { placeholder: 'Article Title', className: 'heading' }],
['core/paragraph', { placeholder: 'Article Text', className: 'text' }],
];
registerBlockType(`${NAMESPACE}/${SLUG}`, {
title: __(BLOCK_TITLE, SLUG),
category: 'widgets',
supports: {
// Removes support for an HTML mode.
html: false,
},
attributes: {
text: {
type: 'string',
source: 'text',
selector: 'p',
default: __('Some default text.', NAMESPACE),
},
},
edit({ attributes, className }) {
return (
<div className={className}>
<div>
<InnerBlocks template={INNER_TEMPLATE} templateLock="all" />
</div>
<p>{attributes.text}</p>
</div>
);
},
save({ attributes }) {
return (
<div>
<div>
<InnerBlocks.Content />
</div>
<p>{attributes.text}</p>
</div>
);
},
});
registerBlockStyle(`${NAMESPACE}/${SLUG}`, {
name: 'block-style',
label: __('A Block Variation', NAMESPACE),
isDefault: false,
});